我需要在sencha touch中显示具有滑动效果的视图2.应该使用什么方法？
我正在使用
Ext.getCmp（ 'mainPanel中'）setActiveItem（ 'secondview'）;
或
Ext.getCmp('mainpanel').animateActiveItem(1, {type: 'slide', direction: 'right'});
Ext.getCmp('mainpanel').add('categorylist');
但在某些情况下，不会渲染滑动效果。在什么都有 条件是滑动效应？任何强制观点的配置？
主面板代码有一个视图xtype'carouselcontainer'，其代码显示在下面
Ext.define("MyApp.view.CarouselContainer",{
extend : 'Ext.Panel',
id : 'carouselcontainer',
xtype : 'carouselcontainer',
requires : [
'Ext.Carousel','Ext.data.Store','Ext.dataview.List'
],
config :{
layout :'card',
items :[{
xtype : 'carousel',
id:'car1',
animation: {
type: 'slide',
direction: 'left'
},
listeners:{
initialize : function() {
Ext.Ajax.request({
url: url_host+'GetCategory?rest_id='+rest_id,
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;
console.log('lengthArray'+lengthArray);
var division=Math.floor(lengthArray/num1);
console.log('division'+division);
var modulus=lengthArray%num1;
console.log('modulus'+modulus);
if(modulus>0) {
var pages=division+1;
}else {
var pages=division;
}
start='';
console.log(pages);
for ( i=0;i<pages;i++)
{
t= new Date().getTime();
if(i==0)
{
start=0;
}
else
{
start=(i*num1)-1;
}
str=Ext.create("MyApp.store.HomePage");
str.getProxy().setExtraParam('rest_id',rest_id);
str.getProxy().setExtraParam('start1',start);
str.getProxy().setExtraParam('end',num1);
str.getProxy().setExtraParam('t',t);
Ext.getCmp('car1').add([
{
xtype: 'dataview',
//id:'li'+start,
scroll: false,
scrollable : {
direction : false,
directionLock : true
},
items:[
],
listeners: {
itemtap:function(item, num, record, ev, e, eOpts) {
if(ev.data.category_name=='contact us') {
Ext.getCmp('mainpanel').setActiveItem('contactcontainer');
Ext.getCmp('contactcontainer').setActiveItem(2);
}
else if(ev.data.category_name=='Get Social')
{
Ext.getCmp('mainpanel').setActiveItem('contactcontainer');
Ext.getCmp('contactcontainer').setActiveItem(1);
}
else
{
//console.log(Ext.getCmp('categorylist').getStore());
Ext.getCmp('mainpanel').animateActiveItem(1, {type: 'slide', direction: 'right'});
Ext.getCmp('mainpanel').add('categorylist');
/*Ext.getCmp('categorylist').getStore().getProxy().setExtraParam('type',ev.data.client_category_id);*/
Ext.getCmp('categorylist').getStore().getProxy().setExtraParam('cat_id',ev.data.client_category_id);
Ext.getCmp('categorylist').getStore().getProxy().setExtraParam('rest_id',rest_id);
Ext.getCmp('mainpanel').setActiveItem('categorylist');
Ext.getCmp('categorylist').setActiveItem(0);
Ext.getCmp('categorylist').getStore().load();
//Ext.getCmp('categorylist').refresh();
// console.log(Ext.getCmp('categorylist').getStore().url);
}
}
},
store:str,
itemTpl: '<div id="{client_category_id}" 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>'
}
]);
str.load();
}
},
failure: function(response, opts) {
console.log('server-side failure with status code ' + response.status);
}
});
}
}
}]
}
});
主面板的代码是
Ext.define("MyApp.view.Main", {
extend: 'Ext.Panel',
requires: [
'Ext.TitleBar',
'Ext.Video'
],
config: {
id : 'mainpanel',
layout : 'card',
items : [
{
xtype : 'maintabpanel'
},
{
xtype:'contactcontainer'
} ,
{
xtype : 'categorylist'
},
{
xtype : 'categorylistsecond'
}
],
});
和maintabpanel的
Ext.define("MyApp.view.MainTab", {
extend: 'Ext.Panel',
requires: ['Ext.data.proxy.JsonP'],
xtype : 'maintabpanel',
id : 'maintabpanel',
config: {
id : 'home',
iconCls: 'home',
scrollable: false,
layout:'fit',
items: [
{
xtype:'panel',
id:'home_panel',
layout:'card',
items:[{
xtype : 'homeview'
},
]
}
]
}
});
和'homeview'的是
Ext.define("MyApp.view.Home",{
extend : 'Ext.Panel',
id : 'homeview',
xtype : 'homeview',
requires : [
'Ext.TitleBar',
'Ext.SegmentedButton',
'Ext.dataview.List',
'Ext.data.Store',
'Ext.field.Select'],
config :{
layout :'fit',
items :[{
xtype : 'toolbar',
docked: 'top',
//style :'background:url(resources/images/home-logo.png) no-repeat left;',
title:"Welcome"
//flex :.75//changed
},
{
xtype:'carouselcontainer'
}]
}
});
答案 0 :(得分：1)
您需要在主面板中添加
layout: {
type: 'card',
animation: {
type: 'slide',
direction: 'left'
}
}
或
panel.animateActiveItem(1, {type:'slide', direction:'left'});
也可以使用
答案 1 :(得分：1)
第一个参数是卡片布局中视图的索引，或者是对此视图的引用。第二个参数是动画。
以下是一个例子：
Ext.getCmp('mainpanel').animateActiveItem(1, {type: 'slide', direction: 'right'});
希望这有帮助