我刚开始使用sencha touch,到目前为止我已经建成了这个: app.js:
Ext.regApplication({
name: 'app',
launch: function() {
this.launched = true;
this.mainLaunch();
},
mainLaunch: function() {
if (!device || !this.launched) {return;}
this.views.viewport = new this.views.Viewport();
}
});
Viewport.js:
app = Ext.extend(Ext.TabPanel, {
fullscreen: true,
sortable: false,
tabBar: {
dock: 'bottom',
layout: {pack: 'center'}
},
cardSwitchAnimation: {
type: 'slide',
cover: true
},
initComponent: function() {
Ext.apply(app.views, {
searchListTab: new app.views.SearchListTab(),
searchTab: new app.views.SearchTab(),
mapTab: new app.views.MapTab(),
infoTab: new app.views.InfoTab()
});
Ext.apply(this, {
items: [
app.views.searchTab,
app.views.mapTab,
app.views.infoTab
]
});
app.views.Viewport.superclass.initComponent.apply(this, arguments);
}
});
SearchTab.js
app.views.SearchTab = Ext.extend(Ext.Panel, {
title: 'Search',
iconCls: 'search',
dockedItems: [{
xtype: 'toolbar',
title: 'Search'
}],
items: [
{
xtype: 'button',
ui: 'round',
text: 'Hledej',
listeners: {
tap: function() {
Ext.dispatch({
controller: app.controllers.main,
action: 'search',
animation: {type:'slide', direction:'right'}
});
}
}
}
],
initComponent: function() {
app.views.SearchTab.superclass.initComponent.apply(this, arguments);
}
});
SearchListTab.js
app.views.SearchListTab = Ext.extend(Ext.Panel, {
title: 'Search',
iconCls: 'search',
dockedItems: [{
xtype: 'toolbar',
title: 'Search Results'
}],
items: [{
xtype: 'list',
store: app.stores.results,
itemTpl: '{titul}',
grouped: false
//onItemDisclosure: function (record) {
//Ext.dispatch({
// controller: app.controllers.contacts,
// action: 'show',
// id: record.getId()
//});
//}
}],
initComponent: function() {
app.stores.results.load();
app.views.SearchListTab.superclass.initComponent.apply(this, arguments);
}
});
和search.js
app.controllers.main = new Ext.Controller({
search: function(options) {
app.views.searchTab.setActiveItem(
app.views.searchListTab, options.animation
);
}
});
以及其他一些现在不重要的东西。所以基本上我有一个主视口,它是一个tabpanel,然后几个面板是它的项目和一个面板,从一开始就没有。现在我想实现,当我点击searchTab中的按钮时,我希望searchTab面板与searchListTab面板交换。问题是,当我使用app.views.viewport.setActiveItem(...);它工作正常,但它在选项卡面板中添加了一个新选项卡。我只是希望当前的选项卡面板滑动到另一个面板,但是当我使用我在这里发布的代码时 - app.views.searchTab.setActiveItem(...);它没有做任何事情。
我做错了什么?感谢。
答案 0 :(得分:2)
我认为你必须引入另一层嵌套来实现这一目标。
我认为您希望将SearchTab嵌套在具有卡片布局的另一个Ext.Panel中,并在需要时将SearchListTab添加到此面板,然后您可以使用setActiveItem()方法滑过。这样可以在选项卡中的子视图之间移动时保持TabPanel可见。
我画了一张小图试图更好地解释它!黑盒子是我认为你应该添加的新面板,它将取代SearchTab作为直接添加到TabPanel的项目。
希望这有帮助并且很清楚!