How to make carousel Infinite with dynamic data(us

Since 2 days, I am trying to create Infinite carousel with desired data but could not get it. I also tried Kitchen Sink (Touch Style). 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.

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).

Source: http://dev.sencha.com/deploy/touch/examples/production/touchstyle/index.html and Click Dress and you have to show dressess. I want to display like this only.

I just displayed categories but could not display category respective words.

What I have done until now: View/CategoryPage.js

 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: [

          '<div class="categoryListings">',
          '<tpl for="data">',
          '<span onClick="catOption({cat_id})">{category_name}</span> ',
          //'<span >{category_name}</span> ',         
          '</tpl>',
          '</div>',

          ].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);  

      }

If one of the Category Click then Display respective words,

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: "<div class=\"words-list-empty-text\">No Words found.</div>",
            //onItemDisclosure: true,
          //  grouped: true,      
          itemTpl: [
           '<div>',                
           '<tpl for="data">',
           '<ul class="parabox">',
           '<li><h2 class="noStar" onclick = "addtofavourite({word_id})"><b>{name}</b> </h2>',                          
           '<tpl for="definitions">',
           '<ul class="para-box-wrapper">',
           '<li class="{rating}"><div class="paragraph-def" onclick =            "ratingStar({def_id})">','{defintion}',
           '<span class="authorBox"><i>Author: {author}</i></span>',

           '</li>' ,
        '</div>',
        '</ul></li>', 
        '</tpl>',
        '<div class="yesStar" ></div>',
        '</ul>',
        '</tpl>',
        '</div>'
        ].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' }
   ]);  
}

Category Display Model

model/CagegoryModel.js

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'}, 
    ],       
  },
});

and

Ext.define('MyApp.model.CategoryModelMenu', {
    extend: 'Ext.data.Model',
    config: {
        fields: [
           /*'cat_id',*/
           'category_name',
          ],

        belongsTo: "MyApp.model.CategoryModel"
    }
});

Word Display Model After Click Category:

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'},
        ],
    }
});

and

Ext.define('MyApp.model.CategoryDisplayModelMenu', {
    extend: 'Ext.data.Model',
    config: {
        fields: [
           /*'cat_id',*/
           'category',
           'name',
        ],

        belongsTo: "MyApp.model.CategoryDisplayModel"
    }

Stores:

Category Display Store:

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:''
        }
    }
}
});


});

Word Display Stores:

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:''
        }
    },
}
});

I have not created any controller yet.

JSON: Category Json and First Category(catID=1) Word Json 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.

please hep me out.Thank in Advance.