- 求教extjs问题：我想实现TabPanel加载的item页中加载新的item的问题
-
是这样的问题，不知道我能不能表达清楚。
先上个图
[img]http://dl.iteye.com/upload/attachment/289430/4031ffc4-9b09-31a8-9021-928b70c41bc8.gif[/img]
其实就是类似126邮件，在邮件列表中，点击一封邮件，跳转到另一个新的tabpanel中。
请问一下怎么实现的呢？
new Ext.TabPanel上的item是加载的一个新页面，我要在新页面上点击在父页上新加tabpanel.我真不知道怎么去定义，连搜索，我都不知道搜什么关键字。所以到这里来求教了。
![http://dl.iteye.com/upload/attachment/289430/4031ffc4-9b09-31a8-9021-928b70c41bc8.gif[/img]](http://dl.iteye.com/upload/attachment/289430/4031ffc4-9b09-31a8-9021-928b70c41bc8.gif%5B/img%5D){kind=link}
还有一种 通过ajax请求一个js的方式 实现新增一个tab页
这里给出一个小例子
[code="java"] if(!tabs.getItem(id)){
Ext.Ajax.request({
url:"<%=path%>/js/"+url,//这里是的请求那个js的具体地址 url稍微改一下
success: function(response, opts){
var obj = eval(response.responseText);
obj.id=id,
tabs.add(obj);
tabs.setActiveTab(obj);
tabs.doLayout();
},
failure : function(response, options) {
Ext.Msg.alert("系统信息", "请求失败");
}
});
}else{
tabs.setActiveTab(tabs.getItem(node.id));
}[/code]
然后给出所请求的简单的一个js代码(代码简单 只是一个例子而已)
code="java"{
AccountUi = Ext.extend(Ext.form.FormPanel, {
title: 'Account',
labelWidth: 100,
labelAlign: 'left',
layout: 'form',
width: 600,
frame: true,
initComponent: function() {
this.items = [
{
xtype: 'container',
autoEl: 'div',
layout: 'column',
items: [
{
xtype: 'container',
autoEl: 'div',
layout: 'form',
columnWidth: 0.5,
items: [
{
xtype: 'textfield',
fieldLabel: 'First Name',
anchor: '95%',
name: 'fname',
ref: '../../fname'
},
{
xtype: 'datefield',
fieldLabel: 'Birth of day',
anchor: '95%',
name: 'birthday',
ref: '../../birthday'
}
]
},
{
xtype: 'container',
autoEl: 'div',
layout: 'form',
columnWidth: 0.5,
items: [
{
xtype: 'textfield',
fieldLabel: 'Last Name',
anchor: '95%',
name: 'lname',
ref: '../../lname'
},
{
xtype: 'combo',
fieldLabel: 'Sex',
anchor: '95%',
name: 'sex',
ref: '../../sex'
}
]
}
]
},
{
xtype: 'htmleditor',
anchor: '98%',
fieldLabel: 'Memo',
height: 150,
width: 300,
name: 'memo',
ref: 'memo'
}
];
this.fbar = {
xtype: 'toolbar',
items: [
{
xtype: 'button',
text: 'Save',
ref: '../saveBtn'
},
{
xtype: 'button',
text: 'Reset',
ref: '../resetBtn'
}
]
};
AccountUi.superclass.initComponent.call(this);
}
});
Account = Ext.extend(AccountUi, {
initComponent: function() {
Account.superclass.initComponent.call(this);
this.saveBtn.on('click', this.doSaveAction, this);
},
doSaveAction: function() {
alert(this.fname.getValue());
}
});
var account = new Account();
return new Ext.Panel({ //这个js返回的东西
draggable: false,
closable:true,
items:[account],
});
})() //匿名函数
[/code]
我的一个小例子
[code="java"]
//点击按钮的时候调用这个函数
function addPanelToTab(id,panelId){
//先看tab上有没有这个panel
var panel = tabs.getItem(panelId);
//如果没有则tabs.add一个panel
if(!panel){
var grid = getGrid();
panel = tabs.add({
title:"详细信息",
id:panelId,
layout:"fit",
//这里我用了items只是一种方式
//你也可以用autoload或者iframe
items:[grid],
closable: true
});
}
//新增的panel下有个grid 这行是加载数据
panel.items.item(0).getStore().load({params:{id:id}}) //传过去id参数 加载store
tabs.setActiveTab(panel);//设置panel标签页作为当前活动标签页
tabs.doLayout();//强制容器的布局管理器重新计算布局
}
[/code]
