Ext JS GridPanel edit textfield ширина слишком узкая

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

В вашей скрипке использование JavaScript с Ext JS 4.2.0 версии, но CSS от Ext JS 4.0.2a версии.

Вы всегда должны использовать файлы javascript и CSS из той же версии Ext JS framework. В противном случае вы можете получить неожиданные результаты, как вы можете видеть в своей скрипке.

Когда я настроить вашу скрипку с Javascript и CSS от Ext JS 4.2.1 версии, все работает без проблем: https://fiddle.sencha.com/#fiddle/3ft