我正在尝试更改 Ext.List
的内容。我正在尝试将内容更改为新面板,尽管我不需要更多列表元素。
这似乎替换了内容,但我如何动画更改?
onItemDisclosure: function(record, btn, index) {
console.log('Disclose more info for ' + record.get('name'));
var panel1 = Ext.getCmp('panel-1');
panel1.remove(Ext.getCmp('panel-1'));
panel1.add(Ext.getCmp('panel-2'));
panel1.doLayout();
}
最佳答案
最好是将 panel-1
和 panel-2
作为不同面板中的项目,然后在它们之间切换。示例:
var detailPanel = new Ext.Panel({
fullscreen: true,
id:'detailPanel',
scroll:'vertical',
tpl:'<h1>{text}</h1>'
});
var list = new Ext.List({
id :'theList',
itemTpl : '{firstName} {lastName}',
store: store1,
width: '100%',
scroll:false
});
var panel = new Ext.Panel({
fullscreen: true,
id:'thePanel',
layout: 'card',
cardSwitchAnimation:'slide',
scroll:'vertical',
items:[list, detailPanel]
});
然后您可以像这样更新 detailPanel Ext.getCmp('detailPanel').update(record.data);
并切换到它。 Ext.getCmp('thePanel').setActiveItem(1,{type:'slide',direction:'left'});
setActiveItem 的第二个参数是动画配置。目的。 http://dev.sencha.com/deploy/touch/docs/?class=Ext.Panel
关于javascript - 动画(滑入)新面板以替换当前面板的内容?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7577729/