EXT4.2--Ext Designer 使用
生活随笔
收集整理的這篇文章主要介紹了
EXT4.2--Ext Designer 使用
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
前言：
“畫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: LenovoDate: 2016/2/21Time: 4:32To 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: LenovoDate: 2016/2/21Time: 6:23To 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",//paneltitle:"",layout:"form",//columnborder:false,columnWidth:1,items:[]},*/{xtype:'fieldset',//暫不知如何正常布局，故采用fieldsetcolumnWidth: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）
?
轉載于:https://www.cnblogs.com/wql025/p/5205319.html
總結
以上是生活随笔為你收集整理的EXT4.2--Ext Designer 使用的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 老徐杂谈：年后的第一个双休，你在做什么？
- 下一篇： hotcss用法