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

Question

How we can fixed the textbox width in extjs,Here i used the width property also but first time its displaying perfect but when we click on outside the textfield automatically width is changed. here is my code please provide any suggestion

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

Use proper combination of layouts, probably you can try using 'fit' layout.

If the issue persist then try using minWidth config property of textfield.