如何将fieldLabel宽度设置为50％。跨浏览器解决方案

Question

我需要为我的tabpanel中的所有字段设置fieldLabel width到50%。解决方案应该是跨浏览器，结果应如下所示：

我现在有了这段代码。

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();
    }
});         
});

如果我将labelWidth设置为100%，那么我会在FF中获得所需的结果，但不会在Chrome中获得。如果我将labelWidth设置为50%，那么当我第一次点击标签时，Chrome就可以了，但如果我第二次点击字段会变大。所以，我需要一个真正的跨浏览器解决方案。

Answer 1

您是否尝试过使用css？

向两个文本字段添加一个类（或覆盖.x-form-item）并添加以下css（您可能必须使用！important来覆盖默认的css）：

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

希望它有所帮助！