Ext JS GridPanel edit textfield width too narrow

Question

I have a JSFiddle Demo which creates a Grid with editing enabled. The problem I am facing is that the textfields that are displayed when editing a row are too narrow. They are about half the column width.

// Data to be bound to the grid.
var albums = [{
    title: 'Frampton Comes Alive!',
    artist: 'Peter Frampton',
    genre: 'Rock',
    year: '01/06/1976'
}, {
    title: 'Led Zeppelin II',
    artist: 'Led Zeppelin',
    genre: 'Rock',
    year: '10/22/1969'
}, {
    title: 'Queen',
    artist: 'Queen',
    genre: 'Rock',
    year: '07/13/1973'
}];

// Imports
Ext.require([
    'Ext.grid.*',
    'Ext.data.*'
]);

// Models
Ext.define('AlbumManager.model.Album', {
    extend: 'Ext.data.Model',
    fields: [{
        name: 'title',
        type: 'string'
    }, {
        name: 'artist',
        type: 'string'
    }, {
        name: 'genre',
        type: 'string'
    }, {
        name: 'year',
        type: 'date',
        dateFormat: 'm/d/Y'
    }]
});

// Stores
Ext.define('AlbumManager.store.AlbumStore', {
    extend: 'Ext.data.JsonStore',
    storeId: 'albumStore',
    model: 'AlbumManager.model.Album',
    data: albums,
    autoLoad: 'true'
});

// Plugins
Ext.define('AlbumManager.plugin.AlbumEdit', {
    extend: 'Ext.grid.plugin.RowEditing',
    clicksToMoveEditor: 1,
    autoCancel: false
});

// Create view DOM onReady.
Ext.onReady(function () {
    // Store
    var albumStore = Ext.create('AlbumManager.store.AlbumStore');
    var rowEditing = Ext.create('AlbumManager.plugin.AlbumEdit');

    var grid = Ext.create('Ext.grid.GridPanel', {
        id: 'gridPanel',
        title: 'Albums',
        width: 400,
        height: 200,
        renderTo: 'grid-example',
        store: albumStore,
        columns: [{
            header: 'Album Title',
            dataIndex: 'title',
            flex: 1,
            editor: {
                width: 300,
                allowBlank: false
            }
        }, {
            header: 'Artist',
            dataIndex: 'artist',
            flex: 1,
            editor: {
                allowBlank: false
            }
        }, {
            header: 'Genre',
            dataIndex: 'genre',
            width: 60,
            editor: {
                allowBlank: true
            }
        }, {
            header: 'Year',
            dataIndex: 'year',
            width: 60,
            editor: {
                xtype: 'datefield',
                allowBlank: true
            },
            renderer: Ext.util.Format.dateRenderer('M Y')
        }],
        plugins: [rowEditing],
        dockedItems: [{
            xtype: 'toolbar',
            dock: 'top',
            items: [{
                xtype: 'button',
                text: 'Add New Album',
                handler: function () {
                    // Create a model instance
                    var r = Ext.create('AlbumManager.model.Album', {
                        title: 'New Album',
                        artist: 'New Artist'
                    });
                    albumStore.insert(0, r);
                    rowEditing.startEdit(0, 0);
                },
                disabled: false
            }, {
                xtype: 'button',
                text: 'Delete Album',
                handler: function () {
                    Ext.MessageBox.confirm('Delete', 'Are you sure ?', function (btn) {
                        if (btn === 'yes') {
                            var sm = grid.getSelectionModel();
                            rowEditing.cancelEdit();
                            albumStore.remove(sm.getSelection());
                            if (albumStore.getCount() > 0) {
                                sm.select(0);
                            }
                        }
                    });
                },
                disabled: false
            }]
        }]
    });
});

Answer 1

In your fiddle you use javascript from Ext JS 4.2.0 version but CSS from Ext JS 4.0.2a version.

You always should use javascript files and CSS from same version of Ext JS framework. Otherwise you can get unexpected results as you can see in your fiddle.

When I setup your fiddle with javascript and CSS from Ext JS 4.2.1 version, everything works without problems: https://fiddle.sencha.com/#fiddle/3ft