动态添加轮播项目的最佳实践/程序是什么。我需要一个顶部栏和底部栏，它们是固定的，在它们之间，需要一个轮播，其项目将从 url 动态添加。轮播的项目将用作我的应用程序中的图标，单击它们会列出它们各自的子类别。我尝试使用 Ext.getCmp('carousel').add() 方法在初始化事件中添加轮播和顶部栏和底部栏，但是在 android 2 手机中查看轮播项目时不会加载它。
代码如下所示
var obj;
var lengthArray,t,str;
var added_carousel ;
var rid=1;
horizontalCarousels = [];
Ext.define('AppNew.view.HomePage', {
extend: 'Ext.Carousel',
layout:{
type: 'card',
animation: {
type: 'slide',
direction: 'left'
}
},
xtype: 'homepage',
id:'carouselpage',
requires: [ 'AppNew.view.TopBar','Ext.data.Store','Ext.dataview.List',],
initialize : function() {
Ext.Ajax.request({
url: 'http://127.0.0.1/AppNew/AppNewApi/GetCategory?rest_id='+rid,
success: function(response, opts) {
var h = Math.ceil(Ext.Viewport.getWindowHeight() * 0.7);
var padvalue=h*.2;
var padvalue2=h/8.5;
var w = Math.ceil(Ext.Viewport.getWindowWidth() * 0.9);
obj = Ext.decode(response.responseText);
lengthArray=obj.category.length;
var division=Math.floor(lengthArray/num1);
var modulus=lengthArray%num1;
if(modulus>0) {
var pages=division+1;
}else {
var pages=division;
}
Ext.getCmp('carouselpage').add([{
xtype: 'topbar',
docked: 'bottom',
listeners:{
activeitemchange:function( obj, value, oldValue, eOpts ){
console.log(value);
var values_button=value.config.title;
if(values_button=='Contact') {
if(Ext.getCmp('ContactPage')){
Ext.getCmp('ContactPage').destroy();
}
Ext.Viewport.setActiveItem({
xtype: 'contactpage'
});
}
}
},
activeItem: 0,
scrollable : {
direction : false,
directionLock : true
},
items: [
{
title: 'Get Social',
iconCls: 'social',
html: 'Get Social screen'
},
{
title: 'Contact',
iconCls: 'locate',
text: "Save",
}
]
}
]);
start='';
Ext.getCmp('carouselpage').add([
{
xtype: 'toolbar',
docked: 'top',
title: 'AppNew' ,
id:'toptoolbar' }
]);
for ( i=-1;i<=pages;i++)
{
if(i<0)
{
start=1;
}
else
{
start=i*num1;
}
t= new Date().getTime();
if(i>0 ){
Ext.getCmp('carouselpage').add([
{
xtype: 'dataview',
id:'li'+start,
scroll: false,
scrollable : {
direction : false,
directionLock : true
},
items:[
],
listeners: {
activate:function(){console.log('in');
console.log(start);
}
},
store:str,
itemTpl: '<div style="margin-top:'+padvalue+'px; float:left;text-align:center;display:block;width:49%;height:'+padvalue2+'px"><img src="{image}" /><!--<h2>{client_category_id}</h2>--!><p>{category_name}</p></div>'
}
]);
}
}
},
failure: function(response, opts) {
console.log('server-side failure with status code ' + response.status);
}
});
} ,
config: {
listeners:{
add:function(HomePage, item, index, eOpts ){
if(added_carousel)
{
if(added_carousel!=1){
gr=3;
}
else
{
gr=3;
added_carousel=1;
}
}
else
{
gr=2;
added_carousel=1;
}
if(parseInt(index) >1){
str=Ext.create("AppNew.store.HomePage");
str.getProxy().setExtraParam('rest_id',rest_id);
str.getProxy().setExtraParam('start1',start);
str.getProxy().setExtraParam('end',num1);
str.getProxy().setExtraParam('t',t);
str.load();
} else{
str='';
}
}
},
title: 'AppNew',
fullscreen: true,
items: [ ]
} ,
})