在 sencha touch 中,我有一个这样的轮播:
ajaxNav = new Ext.Panel({
scroll: 'vertical',
cls: 'card1 demo-data',
styleHtmlContent: true,
layout: {
type: 'vbox',
align: 'stretch'
},
defaults: {
flex: 1
},
items: [{
xtype: 'carousel',
items: [{
id:'tab-1',
html: '',
cls: 'card card1'
},
{
id:'tab-2',
html: '<p>Clicking on either side of the indicators below</p>',
cls: 'card card2'
},
{
id:'tab-3',
html: 'Card #3',
cls: 'card card3'
}]
}]
});
有人知道如何动态添加元素吗?
最佳答案
我为您编写了一个简单的示例,向您展示如何在现有Ext.Carousel元素上动态添加新面板。
Ext.setup({
onReady: function() {
var ajaxNav = new Ext.Carousel({
fullscreen: true,
dockedItems: {
xtype: 'toolbar',
title: 'Demo',
items: [{
xtype: 'button',
ui: 'action',
text: 'Add',
handler: function(){
var element = new Ext.Panel({
html: 'New Element'
});
ajaxNav.add(element);
ajaxNav.doLayout();
}
}]
},
items: [{
id:'tab-1',
html: '',
cls: 'card card1'
},{
id:'tab-2',
html: '<p>Clicking on either side of the indicators below</p>',
cls: 'card card2'
},{
id:'tab-3',
html: 'Card #3',
cls: 'card card3'
}]
});
}
});
如您所见,在“添加”按钮事件上,您首先必须根据需要定义面板,然后将其添加到轮播中,最重要的是,您必须让轮播重新计算其布局调用“doLayout()”函数。
希望这可以帮助。