我是Sencha的新手用户。我会编写一个标签面板,并在每个表格中放入一个表格。 我尝试定义mainForm var并放入2-tab,但是如果我点击2-tab按钮我返回了一个空白面板....
我做错了什么? 谢谢。
//<debug>
Ext.Loader.setPath({
'Ext': '../../src'
});
//</debug>
/**
* This is a simple example that demonstrates the Ext.TabPanel component.
*
* It will simply create a Ext.tab.Panel component with three children and add it to the viewport.
*/
Ext.application({
glossOnIcon: false,
icon: {
57: 'resources/icons/icon.png',
72: 'resources/icons/icon@72.png',
114: 'resources/icons/icon@2x.png',
144: 'resources/icons/icon@114.png'
},
phoneStartupScreen: 'resources/loading/Homescreen.jpg',
tabletStartupScreen: 'resources/loading/Homescreen~ipad.jpg',
//next we require any components we are using in our application.
requires: [
'Ext.tab.Panel',
'Ext.form.*',
'Ext.field.*',
'Ext.Button',
'Ext.data.Store'
],
/**
* The launch function is called when the browser and the framework is ready
* for the application to launch.
*
* All we are going to do is create a simple tabpanel with 3 items, and add
* it to the global Ext.Viewport instance.
*/
launch: function() {
//we send a config block into the Ext.Viewport.add method which will
//create our tabpanel
var mainForm = Ext.create('Ext.form.Panel', {
fullscreen: true,
items: [
{
xtype: 'textfield',
name : 'name',
label: 'Name'
},
{
xtype: 'emailfield',
name : 'email',
label: 'Email'
},
{
xtype: 'passwordfield',
name : 'password',
label: 'Password'
}
]
});
Ext.Viewport.add({
//first we define the xtype, which is tabpanel for the Tab Panel component
xtype: 'tabpanel',
//next we define the items that will appear inside our tab panel
items: [
{
//each item in a tabpanel requires the title configuration. this is displayed
//on the tab for this item
title: '1-tab',
//next we give it some simple html
items: {
html: '1',
centered: true
},
//then a custom cls so we can style it
cls: 'card1'
},
{
//title
title: '2-tab',
//the items html
items: [mainForm],
//custom cls
cls: 'card2'
},
{
//title
title: '3-tabs',
//the items html
items: {
html: '3',
centered: true
},
//custom cls
cls: 'card3'
}
]
});
}
});
答案 0 :(得分:2)
你做错了。
您正在mainForm
数组中嵌套items[]
。情况应该不是这样。
相反,单独创建每个项目并添加到TabPanel的项目数组。
演示: -
Ext.Loader.setConfig({
enabled: true
});
Ext.application({
name: 'SenchaFiddle',
launch: function() {
var mainForm = Ext.create('Ext.form.Panel', {
fullscreen: true,
title:'2-tab',
items: [
{
xtype: 'textfield',
name : 'name',
label: 'Name'
},
{
xtype: 'emailfield',
name : 'email',
label: 'Email'
},
{
xtype: 'passwordfield',
name : 'password',
label: 'Password'
}
]
});
var htmlForm1 = Ext.create('Ext.form.Panel',{
title: '1-tab',
//next we give it some simple html
items: {
html: '1',
centered: true
},
//then a custom cls so we can style it
cls: 'card1'
});
var htmlForm3 = Ext.create('Ext.form.Panel',{
title: '3-tab',
//next we give it some simple html
items: {
html: '3',
centered: true
},
//then a custom cls so we can style it
cls: 'card3'
});
Ext.Viewport.add({
//first we define the xtype, which is tabpanel for the Tab Panel component
xtype: 'tabpanel',
//next we define the items that will appear inside our tab panel
items: [htmlForm1,mainForm,htmlForm3]
});
}
});
输出: