title: Creating a ListView from JSON with Sencha
body: <p>I just started playing with Sencha Touch using Architect and I'm trying to populate a list from a MySQL database using PHP to JSON. I let Architect do the script generation but I cant seem to get it to populate/show the data at run time. I am sure I'm missing something so some help would be greatly appreciated. Below are the suporting code snippets. </p>
  
  <p>The Served PHP:</p>
  
  <pre><code>&lt;?php//MySQL Database Connect
  include 'andaerologin.php';
  
  
  mysql_select_db("andaero");
  $sql = mysql_query("select * from regulatory_list");
  
  
  $output = array();
  /* used "key" as name */
  $output['listTitle'] = 'Regulatory_Guidance_Library';
  $output['targetKey'] = 'bodyContent';
  
  
  while ($row = mysql_fetch_assoc($sql)) {
      $output['items'][] = $row;
  }
  
  
  header('Cache-Control: no-cache, must-revalidate');
  header('Content-type: application/json');
  echo(json_encode($output));
  
  
  mysql_close();
  ?&gt;
  </code></pre>
  
  <p>Auto Generated app.js:</p>
  
  <pre><code>Ext.Loader.setConfig({
      enabled: true
  });
  
  
  Ext.application({
      models: [
          'ListDefaultModel'
      ],
      stores: [
          'ACListStore'
      ],
      views: [
          'ViewPort'
      ],
      name: 'MyApp',
  
  
      launch: function() {
  
  
          Ext.create('MyApp.view.ViewPort', {fullscreen: true});
      }
  
  
  });
  </code></pre>
  
  <p>Generated Model (ListDefaultModel.js):</p>
  
  <pre><code>Ext.define('MyApp.model.ListDefaultModel', {
      extend: 'Ext.data.Model',
      config: {
          idProperty: 'listDefaultModel',
          fields: [
              {
                  allowNull: false,
                  name: 'label',
                  type: 'string'
              },
              {
                  name: 'title',
                  type: 'string'
              },
              {
                  name: 'discription',
                  type: 'string'
              }
          ]
      }
  });
  </code></pre>
  
  <p>The Store (ACListStore):</p>
  
  <pre><code>Ext.define('MyApp.store.ACListStore', {
      extend: 'Ext.data.Store',
      requires: [
          'MyApp.model.ListDefaultModel'
      ],
  
  
      config: {
          model: 'MyApp.model.ListDefaultModel',
          storeId: 'ACListStore',
          proxy: {
              type: 'ajax',
              url: 'http://192.168.1.34/andaero/php/regulatory_list.php',
              reader: {
                  type: 'json',
                  rootProperty: 'items'
              }
          }
      }
  });
  </code></pre>
  
  <p>The list container within the ViewPort.js:</p>
  
  <pre><code>. . .
  xtype: 'list',
  cls: [
        'list-Container'
         ],
          itemTpl: [
                  '&lt;div&gt;',
                   '&lt;h1&gt;label {script}&lt;/h1&gt;',
                   '&lt;h2&gt;title {script}&lt;/h2&gt;',
                   '&lt;p&gt;description {script}&lt;/p&gt;',
                   '&lt;hr/&gt;',
                   '&lt;/div&gt;'
           ],
            scrollToTopOnRefresh: false,
            grouped: true
  . . .
  </code></pre>