title: Sencha touch 2. Making MVC grid
body: <p>i have a example of sencha touch 2 Grid. But when i try to make the same project, but like mvc, it gives me a some problems. The main problem with grid library. Some files cant find them. Could you halp me with mvc grid?</p>
  
  <p>My code:</p>
  
  <pre><code>Ext.Loader.setConfig({
      enabled : true,
      paths   : {
          'Ext.ux.touch.grid': './Ext.ux.touch.grid'
      }
  });
  
  Ext.require([
      'Ext.ux.touch.grid.List',
      'Ext.ux.touch.grid.feature.Feature',
      'Ext.ux.touch.grid.feature.Sorter'
  ]);
  
  Ext.define('TestModel',{
       extend: 'Ext.data.Model',
  
       config: {
            fields : [
                'company',
                'price',
                'change',
                'pct',
                'updated'
              ]
          }
  });
  
  var store = Ext.create('Ext.data.Store', {
          model   : 'TestModel',
          data    : [
              { company : '3m Co',                               price : 71.72, change : 0.02,  pct : 0.03,  updated : '9/1/2010' },
              { company : 'Alcoa Inc',                           price : 29.01, change : 0.42,  pct : 1.47,  updated : '9/1/2010' },
              { company : 'Altria Group Inc',                    price : 83.81, change : 0.28,  pct : 0.34,  updated : '9/1/2010' },
              { company : 'American Express Company',            price : 52.55, change : 0.01,  pct : 0.02,  updated : '9/1/2010' },
              { company : 'American International Group, Inc.',  price : 64.13, change : 0.31,  pct : 0.49,  updated : '9/1/2010' },
              { company : 'AT&amp;#38;T Inc.',                       price : 31.61, change : -0.48, pct : -1.54, updated : '9/1/2010' },
              { company : 'Wal-Mart Stores, Inc.',               price : 45.45, change : 0.73,  pct : 1.63,  updated : '9/1/2010' }
          ]
      });
  
  Ext.setup({
    onReady: function() {
      Ext.create('Ext.ux.touch.grid.List', {
          fullscreen : true,
          store      : store,
  
          features   : [
              {
                  ftype    : 'Ext.ux.touch.grid.feature.Sorter',
                  launchFn : 'initialize'
              }
          ],
          columns   : [
              {
                  header    : 'Company',
                  dataIndex : 'company',
                  style     : 'padding-left: 1em;',
                  width     : '40%',
                  filter    : { type : 'string' }
              },
              {
                  header    : 'Price',
                  dataIndex : 'price',
                  style     : 'text-align: center;',
                  width     : '15%',
                  filter    : { type : 'numeric' }
              },
              {
                  header    : 'Change',
                  dataIndex : 'change',
                  cls       : 'centered-cell redgreen-cell',
                  width     : '15%',
              },
              {
                  header    : '% Change',
                  dataIndex : 'pct',
                  cls       : 'centered-cell redgreen-cell',
                  width     : '15%',
              },
              {
                  header    : 'Last Updated',
                  dataIndex : 'updated',
                  hidden    : true,
                  style     : 'text-align: right; padding-right: 1em;',
                  sortable  : false,
                  width     : '15%'
              }
          ]
      });
  }       
  });
  </code></pre>