无法查看我的 hbox 布局面板的 fieldLabel

Posted 2023-02-26

【中文标题】无法查看我的 hbox 布局面板的 fieldLabel

【英文标题】：Not able to view fieldLabel of my hbox layout panel

【发布时间】：2014-01-07 06:45:36

【问题描述】：

我有一个面板，布局是 hbox，我有两个文本文件作为面板的项目。

执行时无法查看 fieldLabels。请查找代码

         Ext.onReady(function()
        var panel = new Ext.Panel(
           title:"HBox Panel",
           layout:'hbox',
           width:300,
           height:200,
           renderTo:document.body,
           items:[
                    
                     xtype:"textfield",
                     fieldLabel:"Label1"
                    ,
                    
                     xtype:"textfield",
                     fieldLabel:"Label2"
                    

                 ]


           );
        );

注意：我正在开发 Ext 3.2.1

【参考方案1】：

你的布局应该是form。来自api documentation：

fieldLabel 配置仅在此组件由 已配置为使用 FormLayout 布局的容器 经理（例如Ext.form.FormPanel 或指定布局：'form'）。

【参考方案2】：

如前所述，fieldLabel 选项仅适用于表单布局上下文（通常由表单面板提供）。

作为一种快速修复，您可以在BoxComponent 中显示您的标签：

Ext.onReady(function() 
    var panel = new Ext.FormPanel(
        title: "HBox Panel",
        layout: 'hbox',
        width: 300,
        height: 200,
        renderTo: document.body,
        items: [
            xtype: 'box'
            ,html: '<label class="x-form-item-label" style="width: auto; margin: 0 5px;">'
                + 'Label 1:</label>'
            ,cls: 'x-form-item'
        ,
            xtype: "textfield"
        ,
            xtype: 'box'
            ,html: '<label class="x-form-item-label" style="width: auto; margin: 0 5px;">'
                + 'Label 2:</label>'
            ,cls: 'x-form-item'
        ,
            xtype: "textfield"
        ]
    );
);

当然，为自定义样式创建一个 CSS 类会更简洁，甚至可以从 BoxComponent 扩展一个新组件。

您也可以在父面板的initComponent 方法中推广此逻辑，从配置的字段fieldLabel 中为标签创建框组件（这样您还可以设置@987654329 的for 属性@标签，因为此时你会知道生成的字段组件的id）。

【参考方案3】：

将布局类型改为表单，

Ext.onReady(function()
    var panel = new Ext.Panel(
       title:"HBox Panel",
       layout:'form',
       width:300,
       height:200,
       renderTo:document.body,
       items:[
                
                 xtype:"textfield",
                 fieldLabel:"Label1"
                ,
                
                 xtype:"textfield",
                 fieldLabel:"Label2"
                

             ]


       );
    );