如上,我打开一个window的时候会出现这样一个画面.第一次选择文本导入和接口导入2个tab页的时候一切正常
然后这个时候我关闭了这个window 然后再次打开的时候 切换到接口导入 就出现了第三幅图片的样子.感觉做了2次render
- JScript code
getFileTree=null;
getInterfaceTree=null;
getPanel_2=null;
getPanel=null;
function uploadReq(){
//导入文件树
getFileTree=function(){
var addFileRoot = new Ext.tree.AsyncTreeNode({
text : '文件名称',
expanded : true,
id : '1'
});
var addFileTree = new Ext.tree.TreePanel({
loader : new Ext.tree.TreeLoader({
dataUrl : 'req/getNode.jsp'
}),
root : addFileRoot,
autoScroll : true,
animate : false,
useArrows : false,
border : false
});
var comboxWithFileTree = new Ext.form.ComboBox({
id : 'filetree',
store : new Ext.data.SimpleStore({
fields : [],
data : [[]]
}),
editable : false,
value : ' ',
emptyText : '请选择...',
fieldLabel : '文件名称',
id:'fildName',
anchor : '90%',
mode : 'local',
triggerAction : 'all',
maxHeight : 390,
tpl : "<tpl for='.'><div style='height:390px'><div id='addFileTreeDiv'></div></div></tpl>",
allowBlank : false,
onSelect : Ext.emptyFn
});
// 监听下拉树的节点单击事件
addFileTree.on('click', function(node) {
comboxWithFileTree.setValue(node.text);
if(!node.hasChildNodes()){//如果选中的节点不是最终的子节点就不会关闭下拉树
comboxWithFileTree.collapse();//关闭下拉树
}
});
// 监听下拉框的下拉展开事件
comboxWithFileTree.on('expand', function() {
// 将UI树挂到treeDiv容器
addFileTree.render('addFileTreeDiv');
// addDeptTree.root.expand(); //只是第一次下拉会加载数据
addFileTree.root.reload(); // 每次下拉都会加载数据
});
return comboxWithFileTree;
}
//导入接口树
getInterfaceTree=function(){
var addInterfaceRoot = new Ext.tree.AsyncTreeNode({
text : '文件名称',
expanded : true,
id : '1'
});
var addInterfanceTree = new Ext.tree.TreePanel({
loader : new Ext.tree.TreeLoader({
dataUrl : 'req/getNode.jsp'
}),
root : addInterfaceRoot,
autoScroll : true,
animate : false,
useArrows : false,
border : false
});
// 监听下拉树的节点单击事件
var comboxWithInterfaceTree = new Ext.form.ComboBox({
id : 'interfancetree',
store : new Ext.data.SimpleStore({
fields : [],
data : [[]]
}),
editable : false,
value : ' ',
emptyText : '请选择...',
fieldLabel : '接口名称',
id:'interfaceName',
anchor : '90%',
mode : 'local',
triggerAction : 'all',
maxHeight : 390,
tpl : "<tpl for='.'><div style='height:390px'><div id='addInterfaceTreeDiv'></div></div></tpl>",
allowBlank : false,
onSelect : Ext.emptyFn
});
addInterfanceTree.on('click', function(node) {
comboxWithInterfaceTree.setValue(node.text);
comboxWithInterfaceTree.collapse();//关闭下拉树
});
// 监听下拉框的下拉展开事件
comboxWithInterfaceTree.on('expand', function() {
// 将UI树挂到treeDiv容器
addInterfanceTree.render('addInterfaceTreeDiv');
// addDeptTree.root.expand(); //只是第一次下拉会加载数据
addInterfanceTree.root.reload(); // 每次下拉都会加载数据
});
return comboxWithInterfaceTree;
}
getPanel=function(){
var panel = new Ext.FormPanel({
id : 'text',
name : 'addtext',
defaultType : 'textfield',
labelAlign : 'right',
labelWidth : 75,
frame : false,
bodyStyle : 'padding:1 5 0',
items : [ getFileTree(),{
fieldLabel : '文件上传',
inputType: 'file',
name : 'file',
id : 'file',
anchor : '90%'
}, {
xtype:"panel",
layout:"column",
fieldLabel:'比对类型',
anchor : '90%',
isFormField:true,
items:[{
columnWidth:.5,
xtype:"radio",
boxLabel:"按日期",
name:"type1"
},{
columnWidth:.5,
checked:true,
xtype:"radio",
boxLabel:"按内容",
name:"type1"
}]
}]
})
return panel;
}
getPanel_2=function(){
var panel_2 = new Ext.FormPanel({
id : 'port',
name : 'addport',
defaultType : 'textfield',
labelAlign : 'right',
labelWidth : 75,
frame : false,
bodyStyle : 'padding:1 5 0',
items : [ getInterfaceTree(), {
xtype:'button',
fieldLabel : '测试连接',
text:"测试",
anchor : '40%'
},{
xtype:"combo",
fieldLabel: '选择需求',
name: 'combo',
store: new Ext.data.SimpleStore({
fields: ['value', 'text'],
data: [
['value1', 'text1'],
['value2', 'text2']
]
}),
displayField: 'text',
valueField: 'value',
mode: 'local',
emptyText:'请选择',
anchor : '90%'
},
{
xtype:"panel",
layout:"column",
fieldLabel:'比对类型',
anchor : '90%',
isFormField:true,
items:[{
columnWidth:.5,
xtype:"radio",
boxLabel:"按日期",
name:"type2"
},{
columnWidth:.5,
checked:true,
xtype:"radio",
boxLabel:"按内容",
name:"type2"
}]
}]
})
return panel_2;
}
var tabs=new Ext.TabPanel({
region:'center',
margins:'3 3 3 0',
activeTab:0,
defaults:{autoScroll:true}
});
tabs.add({
title: '文本导入',
layout: 'fit',
items: getPanel()
});
tabs.add({
title: '接口导入',
layout: 'fit',
items: getPanel_2()
});
var win=new Ext.Window({
title:'导入方式',
closable:true,
collapsible : true, // 是否可收缩
maximizable : true, // 设置是否可以最大化
width:350,
modal:true,
height:220,
border:false,
layout:'border',
buttonAlign : 'right',
items:[tabs],
buttons : [{
text : '导入',
iconCls : 'acceptIcon'
},{
text : '关闭',
iconCls : 'deleteIcon',
handler : function() {
win.close();
}
}]
});
win.show();
}