title: How to make carousel Infinite with dynamic data(using url) in sencha
body: <p>Since 2 days, I am trying to create Infinite carousel with desired data but could not get it. I also tried <strong>Kitchen Sink (Touch Style)</strong>. My theme is also same as touch style. I have categories and If I click one category then display associated respective Words , which is more different carousel items.</p>
  
  <p>I don't know how many words are there. but I want to display 7 Words in one swiping view(If i have 35 then i need 5 view), which is carousel items, Just like kitchen sink(Touch style).</p>
  
  <p>Source: <strong><a href="http://dev.sencha.com/deploy/touch/examples/production/touchstyle/index.html" rel="nofollow">http://dev.sencha.com/deploy/touch/examples/production/touchstyle/index.html</a></strong>
  and Click <strong>Dress</strong> and you have to show dressess.
  I want to display like this only.</p>
  
  <hr>
  
  <p>I just displayed categories but could not display category respective words.</p>
  
  <p>What I have done until now:
  <strong>View/CategoryPage.js</strong></p>
  
  <pre><code> Ext.define('MyApp.view.CategoryPage', {
        extend: 'Ext.Container',  
        alias: "widget.categorypage",   
        config: {    
         layout: 'vbox',   
         items: [
         {
          xtype:'globalmenu',
        },
        {
          xtype: 'toolbar',
          //docked: 'top',
          cls:'roundedToolbar',      
          title: 'Categories',
        },
  
        {  
          xtype:'panel',      
          flex: 1,  
          layout: 'fit', 
          cls: 'category-data',
          items:[          
          {
            scrollable: {  
              direction: 'vertical',
              directionLock: true,
            },
            xtype: 'list',        
            layout: 'fit',        
            itemHeight: 20,
            store: 'CategoryStore',
            itemTpl: [
  
            '&lt;div class="categoryListings"&gt;',
            '&lt;tpl for="data"&gt;',
            '&lt;span onClick="catOption({cat_id})"&gt;{category_name}&lt;/span&gt; ',
            //'&lt;span &gt;{category_name}&lt;/span&gt; ',         
            '&lt;/tpl&gt;',
            '&lt;/div&gt;',
  
            ].join(''),
            listeners: {
                  itemtap : function(list, index, target, record, event,cat_id) {
           //var id = index;
           var id = index + 1;
          console.log( "iOS" + id);
  
          catOption(id);
  
        }
      }
          }
          ]
        },
          ]
        }
      });
  
       function catOption(id){
            console.log("ID--"+id);
        var  token= '650773253e7f157a93c53d47a866204dedc7c363';
  
          var url = 'http://alucio.com.np/trunk/dev/sillydic/admin/api/word/searched_words_with_definition/catID/'+id+'/SDSILLYTOKEN/'+token;
  
          var stProxy = Ext.StoreMgr.get("CategoryWordDisplayStore").getProxy();
          stProxy.setUrl(url);
          Ext.getStore("CategoryWordDisplayStore").load();
  
           Ext.Viewport.remove(Ext.Viewport.animateActiveItem({ xtype: 'categorywordsdisplay' },{type:'slide'}), true);  
  
        }
  </code></pre>
  
  <p>If one of the Category Click then Display respective words,</p>
  
  <pre><code>Ext.define("MyApp.view.CategoryWordDisplayMain", {
    extend: 'Ext.Container',  
    alias: "widget.categorywordsdisplay", 
    requires:"Ext.dataview.List",
  
    config: {
  
     layout: 'vbox',   
     items: [
     {
      xtype: 'globalmenu',
      flex: 1,
      },//end of top menu     
      {  
        xtype:'panel',      
        scrollable: false, 
        flex: 3,  
        layout: 'fit',   
        items:[
  
        {
          flex: 1,
          xtype: 'toolbar',
          /* title: "Help", */
           cls:'roundedToolbar',
           title: 'value',
            docked: 'top',
            itemId:'titleid',
            id:'titleid',
        },     
        {      
  
         xtype: 'list',
         scrollable: true,       
         itemId: 'demolist', 
        // html:'Test',
         loadingText:"Loading ....",
         emptyText: "&lt;div class=\"words-list-empty-text\"&gt;No Words found.&lt;/div&gt;",
              //onItemDisclosure: true,
            //  grouped: true,      
            itemTpl: [
             '&lt;div&gt;',                
             '&lt;tpl for="data"&gt;',
             '&lt;ul class="parabox"&gt;',
             '&lt;li&gt;&lt;h2 class="noStar" onclick = "addtofavourite({word_id})"&gt;&lt;b&gt;{name}&lt;/b&gt; &lt;/h2&gt;',                          
             '&lt;tpl for="definitions"&gt;',
             '&lt;ul class="para-box-wrapper"&gt;',
             '&lt;li class="{rating}"&gt;&lt;div class="paragraph-def" onclick =            "ratingStar({def_id})"&gt;','{defintion}',
             '&lt;span class="authorBox"&gt;&lt;i&gt;Author: {author}&lt;/i&gt;&lt;/span&gt;',
  
             '&lt;/li&gt;' ,
          '&lt;/div&gt;',
          '&lt;/ul&gt;&lt;/li&gt;', 
          '&lt;/tpl&gt;',
          '&lt;div class="yesStar" &gt;&lt;/div&gt;',
          '&lt;/ul&gt;',
          '&lt;/tpl&gt;',
          '&lt;/div&gt;'
          ].join(''),
  
            store: 'CategoryWordDisplayStore',
          }
          ]
        },//end of menuitems
        ]
      },
     initialize : function(){
      this.callParent();
      var store = Ext.getStore('CategoryWordDisplayStore');
      console.log("category ----"+store.getAt(0).getData().name);
       this.down('toolbar').setHtml(store.getAt(0).getData().category);
    },
    });
  
  function home(){
    console.log("Home CategoryPage CLick");
    Ext.Viewport.remove(Ext.Viewport.getActiveItem(), true);  
    Ext.Viewport.add([
     { xtype: 'mainmenuview' }
     ]);  
  }
  </code></pre>
  
  <p>Category Display Model</p>
  
  <p><strong>model/CagegoryModel.js</strong></p>
  
  <pre><code>Ext.define('MyApp.model.CategoryModel', {
    extend: 'Ext.data.Model',
    requires: ['MyApp.model.CategoryModelMenu'],
    config: {
      fields: [
      {name:'data', mapping: 'data'},
      {name: 'cat_id'},
      {name: 'category_name'}, 
      ],       
    },
  });
  </code></pre>
  
  <p><strong>and</strong></p>
  
  <pre><code>Ext.define('MyApp.model.CategoryModelMenu', {
      extend: 'Ext.data.Model',
      config: {
          fields: [
             /*'cat_id',*/
             'category_name',
            ],
  
          belongsTo: "MyApp.model.CategoryModel"
      }
  });
  </code></pre>
  
  <p><strong>Word Display Model After Click Category:</strong></p>
  
  <pre><code>Ext.define('MyApp.model.CategoryDisplayModel', {
      extend: 'Ext.data.Model',
      requires: ['MyApp.model.CategoryDisplayModelMenu'],
      config: {
          fields: [
           {name:'data', mapping: 'data'},
              {name:'name'},
              {name: 'category'},
              {name: 'author'},
          ],
      }
  });
  </code></pre>
  
  <p><strong>and</strong> </p>
  
  <pre><code>Ext.define('MyApp.model.CategoryDisplayModelMenu', {
      extend: 'Ext.data.Model',
      config: {
          fields: [
             /*'cat_id',*/
             'category',
             'name',
          ],
  
          belongsTo: "MyApp.model.CategoryDisplayModel"
      }
  </code></pre>
  
  <p><strong>Stores:</strong></p>
  
  <p>Category Display Store:</p>
  
  <pre><code>Ext.define('MyApp.store.CategoryStore',{
  extend: 'Ext.data.Store', 
  config:
  {
      model: 'MyApp.model.CategoryModel',
      autoLoad:true,
      id:'Contacts',
      proxy:
      {
          type: 'ajax',
        url: 'http://alucio.com.np/trunk/dev/sillydic/admin/api/word/categories/SDSILLYTOKEN/650773253e7f157a93c53d47a866204dedc7c363', 
  
          reader:
          {
                  rootProperty:''
          }
      }
  }
  });
  
  
  });
  </code></pre>
  
  <p>Word Display Stores:</p>
  
  <pre><code>Ext.define('MyApp.store.CategoryWordDisplayStore',{
  extend: 'Ext.data.Store', 
  
  config:
  {
      model: 'MyApp.model.CategoryDisplayModel',
      autoLoad:true,
      id:'Category',
      proxy:
      {
          type: 'ajax',
           url: 'http://alucio.com.np/trunk/dev/sillydic/admin/api/word/searched_words/',
  
          reader:
          {
                  rootProperty:''
          }
      },
  }
  });
  </code></pre>
  
  <p>I have not created any controller yet. </p>
  
  <p>JSON: <a href="http://alucio.com.np/trunk/dev/sillydic/admin/api/word/categories/SDSILLYTOKEN/650773253e7f157a93c53d47a866204dedc7c363?_dc=1374564505785&amp;page=1&amp;start=0&amp;limit=25" rel="nofollow">Category Json</a> and 
        <a href="http://alucio.com.np/trunk/dev/sillydic/admin/api/word/searched_words/catID/1/SDSILLYTOKEN/650773253e7f157a93c53d47a866204dedc7c363?_dc=1375761300866&amp;page=1&amp;start=0&amp;limit=25" rel="nofollow">First Category(catID=1) Word Json</a> <strong>If i swip right then cat id change 2 and again swip right then 3 and so on. if I swip left from the 3 cat id, then goto cat id 2.</strong></p>
  
  <p>please hep me out.Thank in Advance.</p>