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

时间:2014-01-07 06:45:37

标签: extjs extjs3

我有一个面板,布局是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

3 个答案:

答案 0 :(得分:2)

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

  仅当此组件由a呈现时,才会使用

fieldLabel 配置   已配置为使用FormLayout布局的容器   经理(例如Ext.form.FormPanel或指定布局:'表格')。

答案 1 :(得分:1)

如前所述,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字段组件。

答案 2 :(得分:0)

将布局类型更改为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"
                }

             ]


       });
    });