Question

我正在编写一个包含两个组合框的EXT JS应用程序，每个组合框都有自己的fieldLabel属性。我想将这些组合框水平放置在一起。但是，当我尝试这样做时，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。

Answer 1

fieldLabel仅显示带有表单面板布局hbox

的表单panel.try

Answer 2

您可以像我在上面提供的示例链接中看到的那样尝试

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/

上可以看到的代码

希望这可以帮到你

Answer 3

不需要垫片，保证金属性为您完成工作：

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

易蛋糕;）

在水平放置组件时，EXT JS无法看到fieldLabel属性

3 个答案: