EXT JS在水平放置組件時看不到fieldLabel屬性

我正在寫一個包含兩個組合框的EXT JS應用程序，每個組合框都有其自己的fieldLabel屬性。我想將這些組合框水平放置在一起。但是，當我嘗試這樣做時，fieldLabel不再出現。EXT JS在水平放置組件時看不到fieldLabel屬性

這是相關代碼：

var stationsPanel = new Ext.Panel({ 
     padding: 10, 
     id: windowId + "stationsPanel", 
     defaultType: "combo", 
     width : "100%", 
     layout: "hbox", 
     items: [{ 
      fieldLabel: "Start Station", 
      id: "startstation", 
      allowBlank: false 
     },{ 
      xtype: "spacer", 
      width: 50 
     },{ 
      fieldLabel: "End Station", 
      id: "endstation", 
      allowBlank: false 
     }] 
    });

我從讀this question是Panel容器不支持顯示fieldLabel性能教訓。因此，我嘗試使用EXT Dynamic Forms示例（表3）嘗試渲染我的組件。這顯示了fieldLabel值但是組件，但它們仍然呈現垂直狀態。我也嘗試了this post的建議，但這些解決方案都不適合我。

鑑於這個問題後面的第一個評論中的小提琴，它使用了EXT JS 5.0.1，我想澄清我正在使用EXT JS 3.4.0。

來源

2014-12-03 user1849060

作品：https://fiddle.sencha.com/#fiddle/eep – 2014-12-03 18:12:31

我應該澄清我正在使用EXT 3.4.0。我用這個版本跑了你的小提琴，它沒有奏效。對不起，沒有提到。更新了我的帖子。 – user1849060 2014-12-03 20:49:23

如果使用螢火蟲，你會得到任何錯誤嗎？ – 2014-12-04 06:22:14

你可以嘗試這樣的，因爲我在你上面提供

var stationsPanel = new Ext.Panel({ 
    bodyStyle:'padding:5px 5px 0', 
    frame:true, 
    id: "stationsPanel", 
    layout:'column', 
    width : 700, 
    items: [{ 
    layout:'form', 
    items:[{ 
     xtype:'combo', 
     fieldLabel: "Start Station", 
      id: "startstation", 
     allowBlank: false 
    }] 
    },{ 
     layout:'form', 
     style: {marginLeft:'50px'}, 
     items:[{ 
     xtype:'combo', 
     fieldLabel: "End Station", 
     id: "endstation", 
     allowBlank: false 
     }] 
    }] 
});

的例子鏈接看我不把windowId爲測試這是測試和作爲規則，這工作。你可以在https://fiddle.sencha.com/fiddle/efs/preview看到的結果和代碼，你可以在https://fiddle.sencha.com/#fiddle/efs或http://jsfiddle.net/kapasaja/zn7e04so/

希望看到這能幫助你

來源

2014-12-04 06:27:18

儘管'spacer'仍然存在，但大多數情況下都可以使用，但組合框之間不再有空格。我嘗試添加一個邊距，但是這導致組件不再相互配合。 – user1849060 2014-12-04 09:27:47

現在，當我在每個非空白項目之前添加一個設置爲0.5的「columnWidth」屬性時，ComboBox組件之間沒有任何空間的問題現在可以使用。因此，我刪除了包含「spacer」的第二項。 – user1849060 2014-12-04 11:19:41

已經修改了組合之間的空間的答案，請檢查它。 – 2014-12-04 17:56:33

FieldLabel聯合只顯示與形式面板佈局橫向盒形式panel.try

來源

2014-12-04 03:06:35

無需間隔出現，保證金歡迎使用屬性爲你做的工作：

var stationsPanel = new Ext.Panel({ 
    width: 600, 
    layout: { 
     type: 'hbox', 
     align: 'middle', 
     pack: 'center' 
    }, 
    items: [ 
      { 
       xtype: 'combobox', 
       flex: 1, 
       margin: 20, 
       fieldLabel: 'Start Station', 
       allowBlank: false 
      }, 
      { 
       xtype: 'combobox', 
       flex: 1, 
       margin: 20, 
       fieldLabel: 'End Station', 
       allowBlank: false 
      }] 
    });

簡單的蛋糕;）

來源

2014-12-04 10:16:28 Chepaki

當我這樣做時，我根本看不到'ComboBox'組件或'fieldLabel'值。在任何情況下，'xtype'值應該是'combo'而不是'combobox' – user1849060 2014-12-04 10:37:58

'combobox'是一個正確的xtype，我測試過並且與一起工作您的問題與您的面板不同我猜想很多人在這裏的答案都是正確的問題是與您的面板寬度，自定義CSS或面板的容器，請仔細檢查或張貼容器代碼/截圖的視圖，可能是我可以弄清楚是什麼阻止你的組合框顯示正常 – Chepaki 2014-12-04 15:49:43

EXT JS在水平放置組件時看不到fieldLabel屬性

回答

相關問題