ExtJS - 在FormPanel列布局中排列表單元素

我有一個3列的FormPanel。每列是FormPanel寬度的33％。看起來是這樣的：ExtJS - 在FormPanel列布局中排列表單元素

searchForm = new Ext.FormPanel({ 
    frame: true, 
    title: 'Search Criteria', 
    labelAlign: 'left', 
    labelStyle: 'font-weight:bold;', 
    labelWidth: 85, 
    width: 900, 
    items: [{ 
     layout: 'column', 
     items: [{ // column #1 
      columnWidth: .33, 
      layout: 'form', 
      items: [{ 
       xtype: 'textfield', 
       fieldLabel: 'Banner ID', 
       name: 'bannerID', 
       anchor: '95%', 
      }, 
      new Ext.form.ComboBox({ 
       fieldLabel: 'Advertiser', 
       typeAhead: true, 
       triggerAction: 'all', 
       mode: 'local', 
       emptyText: 'Advertiser', 
       store: advertiserList, 
       valueField: 'id', 
       displayField: 'name' 
      })] // close items for first column 
     }, { 
      columnWidth: .33, 
      layout: 'form', 
      items: [{ 
       xtype: 'textfield', 
       fieldLabel: 'Banner Name', 
       name: 'bannerName', 
       anchor: '95%', 
      }, 
      new Ext.form.ComboBox({ 
       fieldLabel: 'Art Type', 
       typeAhead: true, 
       triggerAction: 'all', 
       mode: 'local', 
       emptyText: 'Art Type', 
       store: artTypesList, 
       valueField: 'id', 
       displayField: 'name' 
      })] // close items for second column 
     }, { 
      columnWidth: .33, 
      layout: 'form', 
      items: [{ 
       xtype: 'hidden' 
      }, 
      new Ext.form.ComboBox({ 
       fieldLabel: 'Art Size', 
       typeAhead: true, 
       triggerAction: 'all', 
       mode: 'local', 
       emptyText: 'Art Size', 
       store: artSizeList, 
       valueField: 'id', 
       displayField: 'name' 
      })] // close items for third column 
     }] 
    }] 
}); // close searchForm FormPanel

它顯示的東西，看起來像這樣： Screenshot

唯一的問題是我想要的「圖片大小」字段/標籤在同一行排列的「廣告客戶「和」藝術類型「字段。有什麼辦法可以添加一個「空白」項目，這樣它強制輸入到正確的行？有沒有另外一種方法可以解決這個問題？

謝謝！

編輯：這工作：

{ 
    xtype: 'component', 
    fieldLabel: '&nbsp;', 
    labelSeparator: ' ', 
}

來源

2011-06-13 dmackerman

您可以嘗試添加一個空白的組件，即{xtype：'component'}在藝術大小項目前 – shane87 2011-06-13 16:10:37

好主意，但沒有工作。我是否需要指定和參數？ – dmackerman 2011-06-13 16:56:09

添加您的答案並將其標記爲已接受，以便其他人可以看到它 – JamesHalsall 2011-06-23 10:05:57

編輯：這工作：

  { 
       xtype: 'component', 
       fieldLabel: '&nbsp;', 
       labelSeparator: ' ', 
      }

來源

2011-06-23 13:35:20 dmackerman

您的解決方案將工作，但它不是ExtJS的（/ HTML表）的方式。

您正在使用column佈局，因此您可以在橫幅名稱字段上使用colspan: 2，從而得到相同的輸出。
你也可以使用rowspan使你的領域覆蓋兩行:)

來源

2012-10-15 09:52:37 A1rPun

默認情況下，空標籤被隱藏（字段被推到左邊）。而不是把'& nbsp;'標籤...

fieldLabel: '&nbsp;', 
labelSeparator: ' ',

可以適當做：

hideEmptyLabel : false

巫婆將調整即使沒有指定標籤，您提交的組件。

來源

2012-11-06 11:09:32

以上都不適合我。我不得不明確地設置empy單元的高度。

xtype: 'label', 
text: ' ', 
flex:1, 
height:22

令人失望的是，至少可以這麼說。

但是，這隻適用於vBox佈局。如果我使用錨佈局然後沒有任何工作:(

來源

2014-09-18 09:00:15

ExtJS - 在FormPanel列布局中排列表單元素

回答

相關問題