我有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