title: Combobox not rendering in ExtJS Grid
body: <p>I am using ExtJS 4.2. I am using the below code to render a combobox in a ExtJS Grid. This is my first attempt on a Combobox inside a Grid and my end target is a few levels beyond this. But I am stuck at the first step i.e to add a combobox and display a Json result in the comboboxes of the Grid. Below is my code:</p>
  
  <pre><code>Ext.onReady(function() {
  
      Ext.require([ 'Ext.data.*', 'Ext.grid.*' ]);
  
  
      // ************************** Define Data Models ************************ //
  
      Ext.define('SecureUser', {
          extend : 'Ext.data.Model',
          fields : [ 'id', 'username' ]
      });
  
  
      // ************************** Define Data Stores ************************ //
  
      //The Store contains the AjaxProxy as an inline configuration
      var userStore = Ext.create('Ext.data.Store', {
          autoLoad : true,
          model : 'SecureUser',
          proxy : {
              type : 'ajax',
              api: {
                  read: 'secureUserSecureRole/listJSON',
              },
              reader : {
                  type : 'json',
                  successProperty: 'success',
                  root : 'secureUsers',
                  messageProperty: 'message'
              },
              writer : {
                  type : 'json',
                  encode: 'true',
                  root: 'secureUsers'                 
              }
          }
      });
  
  
      //renderer needed to display correct field when not editing combo (see API)
      Ext.util.Format.comboRenderer = function(combo) {
          return function(value) {
              var record = combo.findRecord(combo.valueField, value);
              return record ? record.get(combo.displayField)
                      : combo.valueNotFoundText;
          }
      }
  
      var combo = new Ext.form.ComboBox({
          typeAhead: true,
          triggerAction: 'all',
          mode: 'remote',
          store: userStore,
          valueField: 'username',
          displayField: 'username'
      });
  
      // Grid-columns with meta-data from backend.
      var recipeColumns = [ {
          header : "ID",
          width : 40,
          sortable : true,
          dataIndex : 'id'
      },{
          header : 'User Name',
          width : 130,
          dataIndex : 'username',
          editor : combo,
          renderer: Ext.util.Format.comboRenderer(combo)
      }];
  
      // create youbrew.recipe.Grid instance (@see recipeGrid.js)
      var userGrid = Ext.create('Ext.grid.Panel', {
          renderTo : document.body,
          store: userStore,
          width : 200,
          height : 300,
          clicksToEdit : 'auto',
          columns : recipeColumns
      });
  });
  </code></pre>
  
  <p>My JSON object returned from backend is:
      {"sucess":true,"secureUsers":[{"username":"admin","id":1},{"username":"super","id":2},{"username":"user","id":3}]}</p>
  
  <p>The result is just a Grid with two headers ID and User Name and the records listed one by one. But, I don't see any comboboxes on the username(s) in each row. Even when I click, they don't turn into comboboxes ( I read this is the behavior somewhere ). Also, I don't see any runtime errors on the debugger tool too. </p>
  
  <p><img src="https://i.stack.imgur.com/ahaIG.png" alt="No Combo"></p>
  
  <p>Can you tell me where am I going wrong? Is it because I am using the same userStore for both Grid and the combo as well?</p>