How to make carousel Infinite with dynamic data(using url) in sencha - sencha-touch

Question

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.