title: Ext JS 4 MVC Combobox
body: <p>I am new to Ext JS. Here i am trying to populate ComboBox using Store. I could see the combobox rendered, but with no dropdown values. Can someone please review and tell me whats wrong with below code.</p>
  
  <p><strong>app.js:-</strong></p>
  
  <pre><code>Ext.Loader.setConfig({
      enabled: true
      });
  
  
  Ext.application({
      name: 'MVCCombo', 
      controllers: ['Skills'],
      autoCreateViewport: true
  
  });
  </code></pre>
  
  <p><strong>Controller(Skills.js):-</strong></p>
  
  <pre><code>Ext.define('MVCCombo.controller.Skills', {
              extend : 'Ext.app.Controller', 
              //define the stores
              stores : ['Skills'],
              //define the models
              models : ['Skill'],
              //define the views
              views : ['combo.Skill'],
              init: function() {
                  alert("Controller Invoked");
              }
      });
  </code></pre>
  
  <p><strong>Store(Skills.js):-</strong></p>
  
  <pre><code>Ext.define('MVCCombo.store.Skills', {
          extend:'Ext.data.Store', 
          model:'MVCCombo.model.Skill',
          data: [{
              "id": "1",
              "name": "Java"
          }, {
              "id": "2",
              "name": "J2EE"
          }, {
              "id": "3",
              "name": "Ext JS"
          }
          ]
      });
  </code></pre>
  
  <p><strong>Model:(Skill.js):-</strong></p>
  
  <pre><code>Ext.define('MVCCombo.model.Skill', {
      extend: 'Ext.data.Model',
      fields: [{name:'id', type:'string'},{name:'name', type:'string'}]
  });
  </code></pre>
  
  <p><strong>View(ViewPort.js):-</strong></p>
  
  <pre><code>Ext.define('MVCCombo.view.Viewport', {
      extend: 'Ext.Viewport',    
      layout: 'fit',
      requires: [
          'MVCCombo.view.combo.Skill'
      ],
      initComponent: function() {
          var me = this;
  
          Ext.apply(me, {
              items: [                
                  {
                      xtype: 'cmbBox'
                  }
              ]
          });
  
          me.callParent(arguments);
      }
  });
  </code></pre>
  
  <p><strong>View(Skill.js):-</strong></p>
  
  <pre><code>Ext.define('MVCCombo.view.combo.Skill' ,{
      extend: 'Ext.form.ComboBox',
      alias : 'widget.cmbBox',    
      allowBlank: false,
      queryMode: 'local',
      valueField: 'id',
      displayField: 'name', 
      store: 'Skills' 
  });  
  </code></pre>