CODEWITHSUNDEEP
extjsextjs3
Surya Prakash Tumma
Surya Prakash Tumma

Reputation: 2193

Not able to view fieldLabel of my hbox layout panel

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

Upvotes: 2

Views: 2337

Answers (3)

user2955481
user2955481

Reputation: 75

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

             ]


       });
    });

Upvotes: 0

rixo
rixo

Reputation: 25001

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).

Upvotes: 1

wonu wns
wonu wns

Reputation: 3608

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').

Upvotes: 2

Related Questions