Ext JS GridPanel编辑文本字段的宽度太窄

Question

我有一个 JSFiddle Demo ，可以创建一个启用了编辑功能的网格。我面临的问题是编辑行时显示的文本字段太窄。它们大约是列宽的一半。

// 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

在你的小提琴中，你使用Ext JS 4.2.0版本的javascript，但是使用Ext JS 4.0.2a版本的CSS。

你总是应该使用相同版本的Ext JS框架中的javascript文件和CSS。否则，你可以在小提琴中看到意想不到的结果。

当我使用Ext JS 4.2.1版本的javascript和CSS设置你的小提琴时，一切都没有问题： https://fiddle.sencha.com/#fiddle/3ft