您的位置：首页 > 其它

Ext的TabPanel切换界面显示问题

2013-12-08 12:43 357 查看
TabPane定义了“测试1”和“测试2”，默认显示第一个是“测试1”。

从“测试1”切换到“测试2”，发现“测试2”里面的布局错位，一个本该是combox的没显示出来。





代码如下：

Ext.onReady(function(){
Ext.QuickTips.init();

var itemTab = new Ext.TabPanel({
activeTab:0,
frame:true,
border:false,
plain:true,
deferredRender:false,
autoHeight:true,
items:
[{
xtype:'form',
title: '测试1',
id:'itemForm1',
autoHeight:true,
name:'itemForm1'
},{
xtype:'form',
title: '测试2',
id:'itemForm2',
autoHeight:true,
name:'itemForm2'
}]
});

var item2 = new Ext.form.FormPanel({
frame:true,
buttonAlign :'center',
labelAlign :'right',
items:
[{
layout:'column',
items:[{
columnWidth:.5,
layout: 'form',
items: [
{
xtype:'textfield',
fieldLabel: "<font color='red'>*</font>测试21",
id:'test21',
name: 'test21',
width :100
},
{
xtype : 'compositefield',
fieldLabel: '测试22',
items :
[{
width:          100,
xtype:          'combo',
mode:           'local',
triggerAction : 'all',
forceSelection: true,
editable:       false,
name:           'test22',
value:          '是',
displayField:   'name',
valueField:     'value',
store:new Ext.data.JsonStore({
fields : ['name', 'value'],
data   : [
{name : '是',  value: '是'},
{name : '否',  value: '否'}
]
})
}]
}
]
},{
columnWidth:.5,
layout: 'form',
items: [
{
xtype:'textfield',
fieldLabel: "<font color='red'>*</font>测试23",
id:'test23',
name: 'test23',
width :100
},
{
xtype:'textfield',
fieldLabel: "<font color='red'>*</font>测试24",
id:'test24',
name: 'test24',
width :100
}
]
}]
}]
});

var item1 = new Ext.form.FormPanel({
frame:true,
buttonAlign :'center',
labelAlign :'right',
items:
[{
layout:'column',
items:[{
columnWidth:.5,
layout: 'form',
items: [
{
xtype:'textfield',
fieldLabel: "<font color='red'>*</font>测试11",
id:'test11',
name: 'test11',
width :100
},
{
xtype : 'compositefield',
fieldLabel: '测试22',
items :
[{
width:          100,
xtype:          'combo',
mode:           'local',
triggerAction : 'all',
forceSelection: true,
editable:       false,
name:           'test12',
value:          '是',
displayField:   'name',
valueField:     'value',
store:new Ext.data.JsonStore({
fields : ['name', 'value'],
data   : [
{name : '是',  value: '是'},
{name : '否',  value: '否'}
]
})
}]
}
]
},{
columnWidth:.5,
layout: 'form',
items: [
{
xtype:'textfield',
fieldLabel: "<font color='red'>*</font>测试13",
id:'test13',
name: 'test13',
width :100
},
{xtype:'textfield',
fieldLabel: "<font color='red'>*</font>测试14",
id:'test14',
name: 'test14',
width :100
}
]
}]
}]
});
itemTab.render('item_tab');
item1.render('itemForm1');
item2.render('itemForm2');
});

改变下写法：

Ext.onReady(function(){
Ext.QuickTips.init();

var item2 = new Ext.form.FormPanel({
frame:true,
buttonAlign :'center',
labelAlign :'right',
items:
[{
layout:'column',
items:[{
columnWidth:.5,
layout: 'form',
items: [
{
xtype:'textfield',
fieldLabel: "<font color='red'>*</font>测试21",
id:'test21',
name: 'test21',
width :100
},
{
xtype : 'compositefield',
fieldLabel: '测试22',
items :
[{
width:          100,
xtype:          'combo',
mode:           'local',
triggerAction : 'all',
forceSelection: true,
editable:       false,
name:           'test22',
value:          '是',
displayField:   'name',
valueField:     'value',
store:new Ext.data.JsonStore({
fields : ['name', 'value'],
data   : [
{name : '是',  value: '是'},
{name : '否',  value: '否'}
]
})
}]
}
]
},{
columnWidth:.5,
layout: 'form',
items: [
{
xtype:'textfield',
fieldLabel: "<font color='red'>*</font>测试23",
id:'test23',
name: 'test23',
width :100
},
{
xtype:'textfield',
fieldLabel: "<font color='red'>*</font>测试24",
id:'test24',
name: 'test24',
width :100
}
]
}]
}]
});

var item1 = new Ext.form.FormPanel({
frame:true,
buttonAlign :'center',
labelAlign :'right',
items:
[{
layout:'column',
items:[{
columnWidth:.5,
layout: 'form',
items: [
{
xtype:'textfield',
fieldLabel: "<font color='red'>*</font>测试11",
id:'test11',
name: 'test11',
width :100
},
{
xtype : 'compositefield',
fieldLabel: '测试22',
items :
[{
width:          100,
xtype:          'combo',
mode:           'local',
triggerAction : 'all',
forceSelection: true,
editable:       false,
name:           'test12',
value:          '是',
displayField:   'name',
valueField:     'value',
store:new Ext.data.JsonStore({
fields : ['name', 'value'],
data   : [
{name : '是',  value: '是'},
{name : '否',  value: '否'}
]
})
}]
}
]
},{
columnWidth:.5,
layout: 'form',
items: [
{
xtype:'textfield',
fieldLabel: "<font color='red'>*</font>测试13",
id:'test13',
name: 'test13',
width :100
},
{xtype:'textfield',
fieldLabel: "<font color='red'>*</font>测试14",
id:'test14',
name: 'test14',
width :100
}
]
}]
}]
});

var itemTab = new Ext.TabPanel({
activeTab:0,
frame:true,
border:false,
plain:true,
deferredRender:false,
autoHeight:true,
layoutOnTabChange:true,
items:
[{
title: '测试1',
items:[item1]
},{
title: '测试2',
items:[item2]
}]
});

itemTab.render('item_tab');
});

效果图：



内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航