title: Load Data into Sencha List
body: <p>I want to add the data(array) to a sencha list. I just can't bind the data. Not sure whether list is not refreshed or data is not added to the list.</p>
  
  <p>My Store:</p>
  
  <pre><code>Ext.define("ListDemoApp.store.ListDemoStore", {
      extend: "Ext.data.Store",
  
      config: {
          storeId: 'listdemostore',
          model: "ListDemoApp.model.ListDemoModel"
      }
  });
  </code></pre>
  
  <p>My Model:</p>
  
  <pre><code>Ext.define("ListDemoApp.model.ListDemoModel", {
      extend: "Ext.data.Model",
      config: {
          fields: ["name"]
      }
  });
  </code></pre>
  
  <p>My MainView:</p>
  
  <pre><code>Ext.define('ListDemoApp.view.Main', {
      extend: 'Ext.Panel',
      xtype: 'main',
      id:'vwmain',
      requires: [
          'Ext.TitleBar',
          'Ext.Video'
      ],
      config: {
          tabBarPosition: 'bottom',
  
          items: [
             {
                 xtype: 'button',
                 id: 'listdemobtn',
                 text:'Load Data'
             }
          ]
      }
  });
  </code></pre>
  
  <p>MyListView:</p>
  
  <pre><code>Ext.define("ListDemoApp.view.DemoListView", {
      extend: 'Ext.Panel',
      xtype: 'demolistview',
      id: 'vwdemolist',
      requires: [
          'Ext.dataview.List',
          'Ext.XTemplate',
          'ListDemoApp.store.ListDemoStore'
      ],
      config: {
          items: [
              {
                  xtype: 'label',
                  html: 'testing...',
                  id: 'lblsml'
              },
              {
                  xtype: 'list',
                  id: 'namelist',
                  itemTpl: "{name}"
              }
          ]
      }
  });
  </code></pre>
  
  <p>And My controller:</p>
  
  <pre><code>Ext.define("ListDemoApp.controller.ListDemoController",
      {
          extend: "Ext.app.Controller",
          config: {
              refs: {
                  'mainvw': '#vwMain',
                  'demoList': '#vwdemolist'
              },
              control: {
                  '#listdemobtn':
                      {
                          tap: 'store'
                      }
              }
          },
          store: function () {
              //var dataresult;
              var group_store = Ext.getStore("listdemostore");
              var demodata = [{ "name": "AAA" }, { "name": "BBB" }, { "name": "CCC" }]
              if (this.getDemoList() == undefined) {
                  Ext.Viewport.setActiveItem({ xtype: "demolistview", id: "vwdemolist" });
              }
              else {
                  Ext.Viewport.setActiveItem(this.getDemoList());
              }
  
              var lst = Ext.getCmp('namelist');
              var lbl = Ext.getCmp('lblsml');
              lbl.setHtml(demodata[0]['name']);
              //lst.setStore(null);
              //lst.setData(demodata);
              group_store.add(demodata);
              //group_store.load();
              lst.setStore(group_store);
              //lst.refresh();
              //// lst.setData(demodata);
          }
      });
  </code></pre>
  
  <p>The data is not binded to the list. I was able to set the label html from array but not able to bind the list.</p>
  
  <p>Any help will be appreciated.</p>