无法查看我的 hbox 布局面板的字段标签

Question

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

执行时，我无法查看字段标签。请找到代码

         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"
                    }
                 ]

           });
        });

注：I正在处理 Ext 3.2.1

Answer 1

您的布局应该form .从 api 文档中：

字段标签配置仅在此组件由 已配置为使用 FormLayout 布局的容器 管理器（例如 Ext.form.FormPanel 或指定布局："form"）。

Answer 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为标签创建框组件（这样，您还可以设置 label 标记的 for 属性，因为此时您将知道字段组件的生成id）。

Answer 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"
                }
             ]

       });
    });