Question

我有一种ExtJs。

    Ext.define('${pkgName}.v02x001001.SV02X00100104' , {
    extend      : 'Ext.form.Panel',
    alias       : 'widget.sv02x00100104',
    layout      : 'fit',
    autoShow    : true,
    modal       : true,
    bodyStyle   : {
        background  : 'none'
    },
    initComponent: function () {
        this.items= [{
            xtype               : 'panel',
            bodyPadding         : 5,
            bodyStyle           : {
                background : 'none',
                border     : 0
            },

            items        : [{
                xtype    : 'container',                        
                anchor   : '100%',
                layout   : 'hbox',
                items    : [{
                    xtype      : 'textfield',
                    fieldLabel : 'Member No',
                    labelAlign : 'top',
                    id         : 'member-sv02x00100104',
                    readOnly   : true
                },{
                    xtype      : 'textfield',
                    fieldLabel : 'Ex-Member No',
                    labelAlign : 'top',
                    id         : 'exMember-sv02x00100104',
                    margin     : '0 0 0 5',
                    readOnly   : true
                },{
                    xtype      : 'textfield',
                    fieldLabel : 'Branch',
                    labelAlign : 'top',
                    margin     : '0 0 0 5',
                    readOnly   : true
                }]
            },{
                xtype    : 'container',                        
                anchor   : '100%',
                layout   : 'hbox',
                items    : [{
                    xtype      : 'textfield',
                    fieldLabel : 'Salutation',
                    id         : 'salutation-sv02x00100104',
                    labelAlign : 'top',
                    readOnly   : true
                },{
                    xtype      : 'textfield',
                    fieldLabel : 'Full Name',
                    id         : 'fullName-sv02x00100104',
                    labelAlign : 'top',
                    flex       : 1,
                    margin     : '0 0 0 5',
                    readOnly   : true
                },{
                    xtype      : 'textfield',
                    fieldLabel : 'Sur Name',
                    id         : 'nickName-sv02x00100104',
                    labelAlign : 'top',
                    margin     : '0 0 0 5',
                    readOnly   : true
                }]
            }]
        },{
            xtype      : 'sv02x00100101',
            border     : false
        }]

        this.callParent(arguments);
    }
});

它在Firefox中的确定并且看起来像那样（想要的）

但在Internet Explorer中它看起来很糟糕

not ok

Answer 1

首先，检查IE：和ie8一起去：http://docs.sencha.com/extjs/4.1.1/#!/api/Ext.form.field.Text
并在示例用法中用以下内容替换宽度和填充：

anchor   : '100%',
layout   : 'hbox',

然后进入实时预览，并检查结果。如果它看起来很好，那么您在当前站点中的css可能有问题如果它看起来不太好，您可能在IE中处于兼容模式。没有理由不好好看。

我可能尝试的第二件事是：
IE增加权重可能会有所帮助只需对每个字段添加 - flex：1 这是一种解决方法，可能无法获得您想要的确切结果，但它可能有所帮助。

在IE中，ExtJ中的间距是不同的。火狐

1 个答案: