前言：
“畫EXT”是一個美好的想法，如果有一款可視化工具能夠只需進行拖拽而設計EXT，生成代碼--那真是一件美麗的事。然而現實是，即使是為Eclipse裝上EXT插件，用上idea，手寫代碼的提示也只是聊以安慰而已。Ext Designer是官方出的一款可視化設計EXT的工具，用來通過鼠標拖拽設計EXT，雖然設計滯后明顯，但閑時倒騰幾番對於EXT的理解和學習也是有幫助的。
下面筆者將演示2個示例來說明該工具的基本用法。
其中涉及到重要點包括：運用Ext Designer 創建項目，導出js源碼，設計中重要步驟。最后以idea工具在項目中顯示。
示例一：
Ext Designer 設計圖
設計中重要點：
布局：Form Panel 的布局為column （MyForm）;Panel的布局為form（MyPanel）. 布局決定了組件如何顯示，因此十分重要。
border：MyForm下面的第一級子組件為Panel，它的默認border是顯示的--雖然你第一次看到下面的border屬性會疑惑我沒有勾選怎么還有顯示？--沒關系，你再點一次就發現沒有了。
columnWidth：既然布局為column，那么子組件有一個屬性--columnWidth是必備配置項，如下：
生成/導出代碼：
保存到指定目錄，便導出了js代碼
保存項目：
設計完成，如下所示保存項目到指定目錄下次可直接打開。
這里是原始代碼：
Ext.MyViewport=Ext.extend(Ext.Viewport ,{ xtype:"viewport", initComponent: function(){ this.items=[ { xtype:"form", title:"我的表單", labelWidth:100, labelAlign:"left", layout:"column", bodyBorder:false, maskDisabled:false, border:false, items:[ { xtype:"panel", title:"", layout:"form", border:false, columnWidth:0.3, items:[ { xtype:"textfield", fieldLabel:"姓名", anchor:"100%" } ] }, { xtype:"panel", title:"", layout:"form", bodyBorder:false, animCollapse:false, border:false, columnWidth:0.3, items:[ { xtype:"textfield", fieldLabel:"性別", anchor:"100%" } ] }, { xtype:"panel", title:"", layout:"form", border:false, columnWidth:0.3, items:[ { xtype:"textfield", fieldLabel:"戶籍", anchor:"100%" } ] }, { xtype:"panel", title:"", layout:"form", border:false, columnWidth:0.3, items:[ { xtype:"datefield", fieldLabel:"出生日期", anchor:"100%" } ] }, { xtype:"panel", title:"", layout:"form", border:false, columnWidth:0.3, items:[ { xtype:"datefield", fieldLabel:"入職日期", anchor:"100%" } ] } ] } ] Ext.MyViewport.superclass.initComponent.call(this); } })
現在用idea來顯示吧
如下所示：（注：因為是Viewport，所以無需以renderTo配置項渲染頁面指定的dom，只需var port = new Ext.MyViewport(); 即可顯示。）
<%-- Created by IntelliJ IDEA. User: Lenovo Date: 2016/2/21 Time: 4:32 To change this template use File | Settings | File Templates. --%> <%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title></title> <link rel="stylesheet" type="text/css" href="Extjs4.2/resources/css/ext-all-neptune-rtl.css"> <script type="text/javascript" src="Extjs4.2/ext-all.js"></script> <script type="text/javascript" src="Extjs4.2/locale/ext-lang-zh_CN.js"></script> <script type="text/javascript"> Ext.onReady(function(){ Ext.MyViewport=Ext.extend(Ext.Viewport ,{ xtype:"viewport", initComponent: function(){ this.items=[ { xtype:"form", title:"我的表單", labelWidth:100, labelAlign:"left", layout:"column", bodyBorder:false, maskDisabled:false, border:false, items:[ { xtype:"panel", title:"", layout:"form", border:false, columnWidth:0.3, items:[ { xtype:"textfield", fieldLabel:"姓名", anchor:"100%" } ] }, { xtype:"panel", title:"", layout:"form", bodyBorder:false, animCollapse:false, border:false, columnWidth:0.3, items:[ { xtype:"textfield", fieldLabel:"性別", anchor:"100%" } ] }, { xtype:"panel", title:"", layout:"form", border:false, columnWidth:0.3, items:[ { xtype:"textfield", fieldLabel:"戶籍", anchor:"100%" } ] }, { xtype:"panel", title:"", layout:"form", border:false, columnWidth:0.3, items:[ { xtype:"datefield", fieldLabel:"出生日期", anchor:"100%" } ] }, { xtype:"panel", title:"", layout:"form", border:false, columnWidth:0.3, items:[ { xtype:"datefield", fieldLabel:"入職日期", anchor:"100%" } ] } ] } ] Ext.MyViewport.superclass.initComponent.call(this); } }) var port = new Ext.MyViewport(); }) </script> </head> <body> <div id="mydiv"></div> </body> </html>
示例二：
Ext Designer 設計圖
說明：
1.隱藏的fieldLabel
在“我的表單”中的textfield、radio、checkbox、combobox其實都有fieldLabel這個配置項，默認為：標簽: ，但很奇怪上面的視圖卻沒有任何文字--這便是筆者發現Ext Designer的第一個bug。
看到這里，親愛的朋友你可能會問--示例1也是這樣嗎？答：不是。因為經筆者測試發現，如果將父組件的布局設定為form布局即會顯示fieldLabel，如下：
2.buttonAlign：經筆者測試formPanel的此配置項在設計視圖中如果設定為right無法看到正確顯示（在項目中正常顯示），left、center顯示正常。如下：
重要點：
frame：formPanel的這個配置項決定了它的button是否在框架視圖內顯示。記得勾選此項，否則上圖中的2個“我的按鈕”將不在formPanel中顯示。
原始代碼：
Ext.MyForm=Ext.extend(Ext.form.FormPanel ,{ xtype:"form", title:"我的表單", labelWidth:100, labelAlign:"left", layout:"column", width:400, height:350, padding:"10px", frame:true, style:";bodyPadding:10px;", bodyStyle:"", buttonAlign:"right", initComponent: function(){ this.fbar=[ { text:"我的按鈕" }, { text:"我的按鈕" } ] this.items=[ { xtype:"panel", title:"", border:false, columnWidth:1, layout:"column", items:[ { xtype:"textfield", fieldLabel:"標簽", columnWidth:0.5 }, { xtype:"textfield", fieldLabel:"標簽", columnWidth:0.5 } ] }, { xtype:"panel", title:"", columnWidth:1, border:false, layout:"column", items:[ { xtype:"textfield", fieldLabel:"標簽", columnWidth:0.5 }, { xtype:"datefield", fieldLabel:"標簽", columnWidth:0.5 } ] }, { xtype:"panel", title:"", border:false, layout:"column", columnWidth:1, items:[ { xtype:"radio", fieldLabel:"標簽", boxLabel:"boxLabel", validationEvent:"0.5", columnWidth:"" }, { xtype:"radio", fieldLabel:"標簽", boxLabel:"boxLabel" } ] }, { xtype:"panel", title:"", layout:"column", border:false, columnWidth:1, items:[ { xtype:"checkbox", fieldLabel:"標簽", boxLabel:"boxLabel" }, { xtype:"checkbox", fieldLabel:"標簽", boxLabel:"boxLabel" }, { xtype:"checkbox", fieldLabel:"標簽", boxLabel:"boxLabel" }, { xtype:"checkbox", fieldLabel:"標簽", boxLabel:"boxLabel" } ] }, { xtype:"panel", title:"", layout:"column", columnWidth:1, items:[ { xtype:"combo", triggerAction:"all", fieldLabel:"標簽", columnWidth:0.5 }, { xtype:"combo", triggerAction:"all", fieldLabel:"標簽", columnWidth:0.5 } ] }, { xtype:"htmleditor", anchor:"100%", fieldLabel:"標簽", height:150, width:300, columnWidth:1 } ] Ext.MyForm.superclass.initComponent.call(this); } })
現在用idea來顯示吧
如下所示：
<%-- Created by IntelliJ IDEA. User: Lenovo Date: 2016/2/21 Time: 6:23 To change this template use File | Settings | File Templates. --%> <%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title></title> <link rel="stylesheet" type="text/css" href="Extjs4.2/resources/css/ext-all-neptune-rtl.css"> <script type="text/javascript" src="Extjs4.2/ext-all.js"></script> <script type="text/javascript" src="Extjs4.2/locale/ext-lang-zh_CN.js"></script> <script type="text/javascript"> Ext.onReady(function(){ var states = Ext.create('Ext.data.Store', { fields: ['abbr', 'name'], data : [ {"abbr":"AL", "name":"Alabama"}, {"abbr":"AK", "name":"Alaska"}, {"abbr":"AZ", "name":"Arizona"} ] }); Ext.MyForm=Ext.extend(Ext.form.FormPanel ,{ xtype:"form", title:"我的表單", labelWidth:100, labelAlign:"left", layout:"column", width:550, height:450, // padding:"10px", bodyPadding :'5px', frame:true, buttonAlign:'center', defaults:{ style:'margin-top:10px;',//子組件距離頂部間距 }, fieldDefaults:{ labelAlign:'left', labelStyle:'margin-left:5px',//label距離左邊間距 labelWidth:'30%'//注意：此選項設定后radio布局混亂--暫不知道radio應該怎樣布局 }, renderTo:'mydiv', initComponent: function(){ this.fbar=[ { text:"我的按鈕" }, { text:"我的按鈕" } ] this.items=[ { xtype:"panel", title:"", border:false, columnWidth:1, layout:"column", items:[ { xtype:"textfield", fieldLabel:"標簽", columnWidth:0.5 }, { xtype:"textfield", fieldLabel:"標簽", columnWidth:0.5 } ] }, { xtype:"panel", title:"", columnWidth:1, border:false, layout:"column", items:[ { xtype:"textfield", fieldLabel:"標簽", columnWidth:0.5 }, { xtype:"datefield", fieldLabel:"標簽", columnWidth:0.5 } ] }, { xtype:"panel",//暫不知如何正常布局(像上面的textfield那樣) title:"", border:false, layout:"column", columnWidth:1, items:[ { xtype:"radio", fieldLabel:"性別", boxLabel:"男", validationEvent:"0.5", columnWidth:"" }, { xtype:"radio", // fieldLabel:"", boxLabel:"女" } ] }, /*{//若將下面的fieldset組件放在這里的items中則fledlset右邊框看不到了。原因暫時未知。 xtype:"container",//panel title:"", layout:"form",//column border:false, columnWidth:1, items:[ ] },*/ { xtype:'fieldset',//暫不知如何正常布局，故采用fieldset columnWidth:1, layout:'column', chechboxToggle:true, title:'愛好', defaultType:'checkbox', style:'margin-left:5px;margin-left:5px;', items:[ { xtype:"checkbox", // fieldLabel:"愛好:", boxLabel:"讀書", columnWidth:0.1 }, { xtype:"checkbox", // fieldLabel:"", boxLabel:"唱歌", columnWidth:0.1 }, { xtype:"checkbox", // fieldLabel:"", boxLabel:"跳舞", columnWidth:0.1 }, { xtype:"checkbox", fieldLabel:"", boxLabel:"繪畫", columnWidth:0.1 } ] }, { xtype:"panel", title:"", layout:"column", columnWidth:1, border:false, items:[ { xtype:"combobox", triggerAction:"all", fieldLabel:"標簽", columnWidth:0.5, store: states, displayField: 'name', valueField: 'abbr' }, { xtype:"combobox", triggerAction:"all", fieldLabel:"標簽", columnWidth:0.5, store: states, displayField: 'name', valueField: 'abbr' } ] }, { xtype:"htmleditor", anchor:"100%", // fieldLabel:"標簽", height:150, width:300, style:'margin-top:5px', columnWidth:1 } ] Ext.MyForm.superclass.initComponent.call(this); } }) var form = new Ext.MyForm(); }) </script> </head> <body> <div id="mydiv"></div> </body> </html>
后記：Ext Designer 其他更多功能待續。。如果你看到這里，也對EXT感興趣就聯系我吧以前探討吧（qq: 472543236）