Not able to view fieldLabel of my hbox layout panel

Question

I have a panel and the layout is hbox,I have two textfileds as items of the panel.

I am not able to view the fieldLabels when i execute .Please find the code

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

                 ]


           });
        });

Note:I am working on Ext 3.2.1

Answer 1

As already said, the fieldLabel option will only apply in a form layout context (usually provided by the form panel).

As a quick fix, you can display your labels in 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"
        }]
    });
});

Of course, it would be cleaner to create a CSS class for the custom styles, or even extend a new component from BoxComponent.

You can also generalize this logic in the parent panel's initComponent method, to create box components for the labels from the configured fieldLabel of the field (this way you could also set the for attribute of the label tag because you'll know the generated id of the field components at this time).

Answer 2

Your layout should be form. From the api documentation:

fieldLabel config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager (e.g. Ext.form.FormPanel or specifying layout:'form').

Answer 3

change the layout type to 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"
                }

             ]


       });
    });