ExtJs佈局：如何安排每一行中的項目？

Question

我是extjs的初學者。
我想如下安排一些的TextField：

       一個：______         B：______         C：______
        d：______         E：______         F：______

這裏是我下面的測試代碼：

Ext.onReady(function() 
{ 
    new Ext.panel.Panel(
    { 
     renderTo: Ext.getBody(), 
     layout:'vbox', 
     width: 670, 
     tbar: [{text:"Add"}], 
     defaults: 
     { 
      layout:"column", 
      height:50 
     }, 
     items: 
     [ 
      { 
       defaults: 
       { 
        labelAlign:"right", 
        labelWidth:50 
       }, 
       items: 
       [ 
        { 
         xtype: 'textfield', 
         fieldLabel: 'a' 
        }, 
        { 
         xtype: 'textfield', 
         fieldLabel: 'b' 
        }, 
        { 
         xtype: 'textfield', 
         fieldLabel: 'c' 
        } 
       ] 
      }, 
      { 
       defaults: 
       { 
        labelAlign:"right", 
        labelWidth:50 
       }, 
       items: 
       [ 
        { 
         xtype: 'textfield', 
         fieldLabel: 'd' 
        }, 
        { 
         xtype: 'textfield', 
         fieldLabel: 'e' 
        }, 
        { 
         xtype: 'textfield', 
         fieldLabel: 'f' 
        } 
       ] 
      } 
     ] 
    }); 
}); 

結果，該頁面無法顯示任何的TextField。
感謝您提前提供任何幫助！

Answer 1

你可以這樣做：

new Ext.panel.Panel({ 
    renderTo: Ext.getBody(), 
    width: 670, 
    tbar: [{ 
    text: "Add" 
    }], 
    defaults: { 
    layout: , 
    height: 50 
    }, 
    items: [{ 
    defaults: { 
     labelAlign: "right", 
     labelWidth: 50 
    }, 
    items: [{ 
     xtype: 'textfield', 
     fieldLabel: 'a' 
    }, { 
     xtype: 'textfield', 
     fieldLabel: 'b' 
    }, { 
     xtype: 'textfield', 
     fieldLabel: 'c' 
    }] 
    }, { 
    defaults: { 
     labelAlign: "right", 
     labelWidth: 50 
    }, 
    items: [{ 
     xtype: 'textfield', 
     fieldLabel: 'd' 
    }, { 
     xtype: 'textfield', 
     fieldLabel: 'e' 
    }, { 
     xtype: 'textfield', 
     fieldLabel: 'f' 
    }] 
    }] 
}); 

它本質上是除與默認auto佈局更換vbox佈局的同一個例子。你的例子沒有工作的原因是vbox佈局需要設置一個高度和寬度。

你也可以這樣做：

new Ext.panel.Panel({ 
    renderTo: Ext.getBody(), 
    layout: 'column', 
    width: 670, 
    tbar: [{ 
    text: "Add" 
    }], 
    defaults: { 
    labelAlign: "right", 
    labelWidth: 50 
    }, 
    items: [{ 
    xtype: 'textfield', 
    fieldLabel: 'a' 
    }, { 
    xtype: 'textfield', 
    fieldLabel: 'b' 
    }, { 
    xtype: 'textfield', 
    fieldLabel: 'c' 
    }, { 
    xtype: 'textfield', 
    fieldLabel: 'd' 
    }, { 
    xtype: 'textfield', 
    fieldLabel: 'e' 
    }, { 
    xtype: 'textfield', 
    fieldLabel: 'f' 
    }] 
}); 

這是一個column佈局不嵌套的項目作爲前一個。 column佈局的一個好處是，它會將盡可能多的項目移動到左側，如果某個項目不適合，它將進入下一行。 由於寬度是靜態670，因此每行只能包含3個文本字段。列布局不需要設置高度。