Ext JS GridPanel編輯文本字段的寬度太窄

Question

我有一個JSFiddle演示 ，它創建了一個啟用了編輯的網格。 我面臨的問題是在編輯行時顯示的文本字段太窄。 它們大約是列寬的一半。

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