如何做一个两列的FormPanel

最新推荐文章于 2024-01-10 21:32:33 发布

最新推荐文章于 2024-01-10 21:32:33 发布 · 142 阅读

文章标签：

#EXT

前端/JavaScript/ExtJs 专栏收录该内容

19 篇文章

订阅专栏

本文介绍了一种使用ExtJS框架进行表单设计的方法，通过将表单元素分为两列来提高界面美观度。该方法适用于需要在一个FormPanel中放置大量输入框的情况，通过合理的布局可以使界面更加整洁。

有时一个FormPanel 放很多输入框会变的很长，这时候需要分成两列比较美观，下面就是代码了

//add buyer form panel.
  var formPanel = new Ext.FormPanel({
         frame: true,
         labelAlign: 'right',
         labelWidth: 85,
         width:450,
         waitMsgTarget: true,
         items: [
         {layout:'column',width:450,items:[
           {layout:'form',columnWidth:.50,items:[
                 buyerId,
              buyerName,
            buyerAgent,
            buyerCommission,
                  buyerBank,
                  buyerAccount,
                  buyerPostcode
           ]},
           {layout:'form',columnWidth:.50,items:[
            buyerTaxnum,
                  buyerTele,
                  buyerEmail,
                  buyerAddr,
                  buyerFlag,
                  buyerSpell
           ]}

         ]}
         ]
     });