1

我有一种 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 中，它看起来很糟糕

不好

4

1 回答 1

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 添加到您的每个字段。
这是一种解决方法，可能不会导致您想要的确切结果，但它可能会有所帮助。

于 2013-05-22T09:11:24.797 回答