Question

我们如何在extjs中修改文本框宽度，这里我也使用了width属性，但是第一次显示它是完美的但是当我们在文本域外点击时自动宽度会改变。这是我的代码，请提供任何建议

Ext.Loader.setConfig({
    enabled: true
});

Ext.require([
    'Ext.form.*',
    'Ext.window.Window'
]);

Ext.onReady(function() {
    //renderTo: Ext.getBody();
    var container = Ext.create('Ext.container.Container', {
        items: [{
                contentPaddingProperty: '10 10 10 10',
                renderTo: Ext.get('main'),
                border: false,
                html: '<img src="image/syneLogo.jpg" height="100" width="950"/>'
            }]
    });

    Ext.create('Ext.form.Panel', {
        renderTo: Ext.get('main'),
        name: 'myForm',
        width: 950,
        height: 800,
        border: false,
        frame: false,
        // title:'Login',
        bodyBorder: false,
        fieldDefaults: {
            labelWidth: 60
        },
        padding: '150 25 25 300',
        items: [
            {
                align: 'center',
                xtype: 'fieldset',
                cls: 'my-fieldset-legend',
                width: 400,
                height: 250,
                title: 'CAS Login',
                collapsible: false,
                items: [
                    {
                        xtype: 'container',
                        height: 30
                    },
                    {
                        xtype: 'textfield',
                        width: '300px',
                        allowBlank: false,
                        id: 'txtuser',
                        fieldLabel: 'User ID',
                        name: 'enter user id',
                        emptyText: 'enter user id'
                    },
                    {
                        xtype: 'container',
                        height: 30
                    },
                    {
                        xtype: 'textfield',
                        width: '300px',
                        allowBlank: false,
                        id: 'txtpass',
                        fieldLabel: 'Password',
                        name: 'pass',
                        emptyText: 'enter password',
                        inputType: 'password'
                    },
                    {
                        align: 'center',
                        cls: 'btn-margin',
                        border: false,
                        padding: '10 100 10 10',
                        buttons: [
                            {
                                style: 'btn-margin',
                                formBind: true,
                                disabled: true,
                                align: 'middle',
                                cls: 'btn-margin',
                                scale: 'medium',
                                text: 'Submit',
                                width: 40,
                                handler: function()
                                {
                                    var usr = this.up("form").getForm().findField("txtuser").getValue();
                                    alert('Welcome--> ' + usr);

                                }
                            },
                            {
                                style: 'btn-margin',
                                formBind: true,
                                disabled: true,
                                align: 'middle',
                                cls: 'btn-margin',
                                scale: 'medium',
                                text: 'Reset',
                                width: 40,
                                handler: function()
                                {
                                    form.getForm().reset();
                                    alert('Fields are cleared now');
                                }
                            }]

                    },
                    {
                        xtype: 'container',
                        height: 25
                    },
                    {
                        xtype: 'label',
                        padding: '150 5 5 100',
                        text: 'Please enter user id and password'
                    }
                ]
            }
        ]
    });
});

Answer 1

使用适当的布局组合，可能您可以尝试使用＆＃39; fit＆＃39;布局。

如果问题仍然存在，请尝试使用textfield的minWidth配置属性。

如何增加extjs中文本字段的宽度

1 个答案: