我有tabpanel,其中包含一些標籤。我將專注於第6個選項卡 - navigatingPanels.js文件。在這個文件中,我有一個卡片佈局,以便用戶可以在提交時將form1 &移動到form2(滑動到form2)。我也有一個停靠的工具欄,有一個後退按鈕,以便用戶可以移回form1(如果需要)。它給出了一個錯誤 - 未捕獲的錯誤:[錯誤] [Ext.Base#callParent]給出的項目無效:未定義,必須是配置對象以生成新項目或現有組件實例。 該應用程序可以在這裏看到 - http://maalguru.in/touch/Raxa-70/MyApp/Sencha Touch2 - 卡片佈局不工作的面板
更新 - 如果我添加一個額外的卡有關面板,&刪除在Form1窗體2 &(必填板/卡),然後正常工作。在這種情況下,我必須將ActiveItem設置爲所需的卡片(form1 & form2)。更改視口 - http://pastebin.com/P4k04dBQ 是否有任何解決方案只用2個面板/卡實現?
Viewport.js
Ext.define('MyApp.view.Viewport', {
extend: 'Ext.TabPanel',
xtype: 'my-viewport',
config:{
fullscreen: true,
tabBarPosition: 'bottom',
items: [
{
xclass: 'MyApp.view.navigatingPanels'
}
]
}
});
NavigatingPanels.js
Ext.define('MyApp.view.navigatingPanels',{
extend: 'Ext.Panel',
id: 'navigatingPanels',
xtype: 'navigatingPanels',
config:{
iconCls:'user',
title: 'Navigating Panels',
layout: 'card',
animation: {
type: 'slide',
direction: 'left'
},
defaults:{
styleHtmlContent: 'true'
},
items: [
{
docked: 'top',
xtype: 'toolbar',
title: 'Registeration Form',
items: [
{
text: 'Back',
ui: 'back',
align: 'centre',
//back button to take the user back from form2 to form1
handler: function() {
Ext.getCmp('navigatingPanels').setActiveItem(form1);
}
}
]
},
form1,
form2
]
}
});
var form1 = new Ext.Panel({
scrollable: 'vertical',
items:[
{
xtype: 'fieldset',
title: 'Form 1',
items: [
{
xtype: 'textfield',
label: 'Name',
name: 'name',
},
{
xtype:'button',
text:'Save Data & move to form2',
ui: 'confirm',
//TODO add some action: to store data
//save data & move to form2
handler: function() {
Ext.getCmp('navigatingPanels').setActiveItem(form2,{ type: 'slide', direction: 'right' });
console.log("Form1");
}
}
]
}
]
});
var form2 =new Ext.Panel({
scrollable: 'vertical',
items:[
{
xtype: 'fieldset',
title: 'Form 2',
items: [
{
xtype: 'textareafield',
label: 'Message',
name: 'message'
},
{
xtype:'button',
text:'Submit Data',
ui: 'confirm',
//TODO add some action: to store data
//action: 'Submit Data'
}
]
}
]
});
App.js
Ext.Loader.setConfig({
enabled: true
});
Ext.application({
name: 'MyApp',
controllers:['Main'],
launch: function() {
Ext.create('MyApp.view.Viewport', {fullscreen: true});
}
});
該鏈接不起作用,但是可能存在與它們的加載順序有關的問題。 – 2012-04-16 04:59:37
是的,我認爲加載順序是原因,我有時也會在我的本地服務器上遇到這種情況。 – Gaurav 2012-04-16 08:10:51