Question

Extjs中怎么重新new一个panel给tabpanel使用？

现有一个tabpanel和panel_1，在每一个tab里都嵌套了panel，但每个嵌套的panel都是通过同一个panel_1重新new出来的。不是重复利用。不要那种自己一个一个建panel的方法。

Answer 1

var centerPanel = Ext.create('Ext.TabPanel', {
region: 'center',
deferredRender: false,
activeTab: 0,
items: []
})
var ftab = Ext.create('Ext.Panel', {
tpl: new Ext.XTemplate('<iframe style="width: 100%; height: 100%; border: 0;padding:4px 4px 4px 4px;" src="{url}"></iframe>'),
load: function (b) { this.update(this.tpl.apply(b)) }, clear: function () { this.update("") },
title: '首页',
autoScroll: true
});
ftab.load({ url: '<%=Url.Action("Welcome",new{ controller="Home"}) %>' });
centerPanel.add(ftab);
function trsel(view, record, item, index, e) {
if (record.raw.leaf) {
var tab = centerPanel.getComponent("tab" + record.raw.id); //获取tab对象
if (!tab) {//如果tab不存在，就创建并添加到centerPanel中
tab = Ext.create('Ext.Panel', {
tpl: new Ext.XTemplate('<iframe style="width: 100%; height: 100%; border: 0;padding:4px 4px 4px 4px;" src="{url}"></iframe>'),
load: function (b) { this.update(this.tpl.apply(b)) }, clear: function () { this.update("") },
id: "tab" + record.raw.id,
title: record.raw.text,
closable: true,
autoScroll: true
});
tab.load({ url: '/' + record.raw.menu_area + '/' + record.raw.menu_controller + '/' + record.raw.menu_action });
centerPanel.add(tab);
}
centerPanel.setActiveTab(tab); //设置显示当前面板
}
};
函数是点击菜单树时调用的。你自己调整一下，点按钮时调这个函数就可以

自定义一个formpanel 扩展类, 用数组来存放 每个formpanel的数据
FormClass = Ext.extend(Ext.FormPanel,{
frame:true,
layout:'table',
trackResetOnLoad : false,
layoutConfig: {columns:3},
defaults:{labelAlign:'right',labelWidth:90, frame:false,layout:'form'},

initComponent : function( val_arr) {
var that=this;
this.fields_arr['id']=new Ext.form.TextField ({name:'id', fieldLabel: 'id',value:val_arr['id'] });
this.fields_arr['name']=new Ext.form.TextField ({name:'name', fieldLabel: 'name',value:val_arr['name'] });
// formpanel 的元素和值都用数组包含 给不同的数组就展示不同的数据
Ext.apply(this,{
items:[ this.fields_arr['id'],this.fields_arr['name']]
});
FormClass.superclass.initComponent.call(this);
},
}
//使用时

formpanel= new FormClass(new array('id':001,'name':'name1'))
formpanel2= new FormClass(new array('id':002,'name':'name2'))