EXT JS 水平放置组件时看不到 fieldLabel 属性

Posted 2023-02-26

【中文标题】EXT JS 水平放置组件时看不到 fieldLabel 属性

【英文标题】：EXT JS cannot see fieldLabel property when placing components horizontally

【发布时间】：2014-12-03 16:56:04

【问题描述】：

我正在编写一个包含两个组合框的 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。

【问题讨论】：

作品：fiddle.sencha.com/#fiddle/eep

我应该澄清一下我使用的是 EXT 3.4.0。我用这个版本运行了你的小提琴，但它没有用。很抱歉没有提到这一点。更新了我的帖子。

如果使用萤火虫，你会得到任何错误吗？

【参考方案1】：

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

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/看到代码

希望对你有帮助

【讨论】：

这在大多数情况下都有效，但组合框之间不再有空间，即使 spacer 仍然存在。我尝试添加边距，但这导致组件不再相互对齐。

当我在每个非间隔项之前添加一个设置为 0.5 的 columnWidth 属性时，ComboBoxcomponents 之间没有任何空格的问题现在可以解决了。因此，我删除了包含 spacer 的第二项。

答案已经修改为combo之间的空格，请查看。

【参考方案2】：

fieldLabel 仅显示表单面板。尝试使用表单面板布局 hbox

【参考方案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
            ]
     );

简单的蛋糕；）

【讨论】：

当我这样做时，我根本看不到 ComboBox 组件或 fieldLabel 值。在任何情况下，xtype 值都应该是 'combo' 而不是 'combobox'

'combobox' 是我测试过的正确 xtype 并且可以解决您的问题不是您的面板我猜因为很多人在这里回答是正确的问题是您的面板宽度，自定义 css或面板的容器，仔细检查或发布容器代码/截屏视图，可能我可以弄清楚是什么阻止了您的组合框正确显示