求教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.我真不知道怎么去定义,连搜索,我都不知道搜什么关键字。所以到这里来求教了。

3个回答

还有一种 通过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]

tabs.getItem(id) 我这里的tabs 得预先定义 设置成全局变量 然后其他部分的js才能访问到

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问