Question

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

执行时我无法查看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

Answer 1

您的布局应为form。来自api documentation：

仅当此组件由a呈现时，才会使用
fieldLabel 配置已配置为使用FormLayout布局的容器经理（例如Ext.form.FormPanel或指定布局：'表格'）。

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

Answer 3

将布局类型更改为form，

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

             ]


       });
    });

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

3 个答案: