CODEWITHSUNDEEP
extjsextjs4.1
Jacobian
Jacobian

Reputation: 10802

How to set fieldLabel width to 50%. Cross-browser solution

I need to set fieldLabel width to 50% for all fields inside my tabpanel. The solution should be cross-browser and the result should look like this:

enter image description here

I now have this code.

Ext.onReady(function(){
Ext.create('Ext.Button', {
    text: 'Click me',
    renderTo: Ext.getBody(),
    handler: function() {
        var mypanel=Ext.create('Ext.form.Panel',{
            layout:'border',
            border:false,
            items:[{
                region:'center',
                xtype:'tabpanel',
                border:false,
                items:[{
                    title:'tab1',
                    bodyStyle:'padding:4px',
                    layout:'anchor',
                    defaults:{
                        anchor:'100%'
                    },
                    items:[{
                        xtype:'textfield',
                        fieldLabel:'Label'
                    },{
                        xtype:'fieldset',
                        title:'Title',  
                        defaults:{
                            anchor:'100%'
                        },                                  
                        items:[{
                            xtype:'textfield',
                            fieldLabel:'Label 2'
                        }]
                    }]
                },{
                    title:'tab1',
                    bodyStyle:'padding:4px',
                    layout:'anchor',
                    defaults:{
                        anchor:'100%'
                    },
                    items:[{
                        xtype:'textfield',
                        fieldLabel:'Label 3'
                    }]
                }]
            }]
        });
        Ext.create('Ext.window.Window',{ 
            width:400,
            height:300,
            layout:'fit',
            items:mypanel
        }).show();
    }
});         
});

If I set labelWidth to 100%, then I get a desired result in FF, but not in Chrome. If I set labelWidth to 50%, then it's ok in Chrome, when I click on a tab for the first time, but if I click for the second time fields get larger. So, I need a true cross-browser solution.

Upvotes: 0

Views: 645

Answers (1)

Filipe Pereira
Filipe Pereira

Reputation: 198

Have you tried just using css?

Add a class to both textfields (or override .x-form-item) and add the following css (you might have to use !important to override the default css):

.x-form-item {
    width: 100%;
}
.x-form-item label {
    width: 50%;
}
.x-form-item .x-form-item-body {
    width: 50%;
    min-width: 100px;
}

Hope it helps!

Upvotes: 1

Related Questions