當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

EXT4.2--Ext Designer 使用

發(fā)布時間：2025/3/21 编程问答 23 豆豆

生活随笔收集整理的這篇文章主要介紹了 EXT4.2--Ext Designer 使用小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

前言：

“畫EXT”是一個美好的想法，如果有一款可視化工具能夠只需進行拖拽而設(shè)計EXT，生成代碼--那真是一件美麗的事。然而現(xiàn)實是，即使是為Eclipse裝上EXT插件，用上idea，手寫代碼的提示也只是聊以安慰而已。Ext Designer是官方出的一款可視化設(shè)計EXT的工具，用來通過鼠標拖拽設(shè)計EXT，雖然設(shè)計滯后明顯，但閑時倒騰幾番對于EXT的理解和學(xué)習(xí)也是有幫助的。

下面筆者將演示2個示例來說明該工具的基本用法。

其中涉及到重要點包括：運用Ext Designer 創(chuàng)建項目，導(dǎo)出js源碼，設(shè)計中重要步驟。最后以idea工具在項目中顯示。

示例一：

Ext Designer 設(shè)計圖

設(shè)計中重要點：

布局：Form Panel 的布局為column （MyForm）;Panel的布局為form（MyPanel）. 布局決定了組件如何顯示，因此十分重要。

border：MyForm下面的第一級子組件為Panel，它的默認border是顯示的--雖然你第一次看到下面的border屬性會疑惑我沒有勾選怎么還有顯示？--沒關(guān)系，你再點一次就發(fā)現(xiàn)沒有了。

columnWidth：既然布局為column，那么子組件有一個屬性--columnWidth是必備配置項，如下：

生成/導(dǎo)出代碼：

保存到指定目錄，便導(dǎo)出了js代碼

保存項目：

設(shè)計完成，如下所示保存項目到指定目錄下次可直接打開。

這里是原始代碼：

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);} })

現(xiàn)在用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 設(shè)計圖

說明：

1.隱藏的fieldLabel

在“我的表單”中的textfield、radio、checkbox、combobox其實都有fieldLabel這個配置項，默認為：標簽: ?，但很奇怪上面的視圖卻沒有任何文字--這便是筆者發(fā)現(xiàn)Ext Designer的第一個bug。

看到這里，親愛的朋友你可能會問--示例1也是這樣嗎？答：不是。因為經(jīng)筆者測試發(fā)現(xiàn)，如果將父組件的布局設(shè)定為form布局即會顯示fieldLabel，如下：

2.buttonAlign：經(jīng)筆者測試formPanel的此配置項在設(shè)計視圖中如果設(shè)定為right無法看到正確顯示（在項目中正常顯示），left、center顯示正常。如下：

重要點：

frame：formPanel的這個配置項決定了它的button是否在框架視圖內(nèi)顯示。記得勾選此項，否則上圖中的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);} })

現(xiàn)在用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%'//注意：此選項設(shè)定后radio布局混亂--暫不知道radio應(yīng)該怎樣布局 },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 其他更多功能待續(xù)。。如果你看到這里，也對EXT感興趣就聯(lián)系我吧以前探討吧（qq: 472543236）

轉(zhuǎn)載于:https://www.cnblogs.com/wql025/p/5205319.html

總結(jié)

以上是生活随笔為你收集整理的EXT4.2--Ext Designer 使用的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。

Designer
Ext

上一篇：老徐杂谈：年后的第一个双休，你在做什么？
下一篇： hotcss用法