title: Ext JS GridPanel edit textfield width too narrow
body: <p>I have a <kbd><a href="http://jsfiddle.net/MrPolywhirl/GVU45/" rel="nofollow noreferrer">JSFiddle Demo</a></kbd> 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.</p>
  
  <p><img src="https://i.stack.imgur.com/4bWbp.png" alt="enter image description here"></p>
  
  <pre><code>// 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() &gt; 0) {
                                  sm.select(0);
                              }
                          }
                      });
                  },
                  disabled: false
              }]
          }]
      });
  });
  </code></pre>