在利用ext樹開發一個demo時發現了一個bug，代碼如下：
<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html;charset=UTF-8">
<META HTTP-EQUIV="Cache-Control" CONTENT="no-store"/>
<META HTTP-EQUIV="Pragma" CONTENT="no-cache"/>
<META HTTP-EQUIV="Expires" CONTENT="0"/>
<SCRIPT SRC="http://localhost:8080/jeasyweb/scripts/ext-3.0.0/ext-base.js" TYPE="TEXT/JAVASCRIPT"></SCRIPT>
<SCRIPT SRC="http://localhost:8080/jeasyweb/scripts/ext-3.0.0/ext-all.js" TYPE="TEXT/JAVASCRIPT"></SCRIPT>
<SCRIPT SRC="http://localhost:8080/jeasyweb/scripts/ext-3.0.0/ext-all-debug.js" TYPE="TEXT/JAVASCRIPT"></SCRIPT>
<SCRIPT SRC="http://localhost:8080/jeasyweb/scripts/ext-3.0.0/locale/ext-lang-zh_CN.js" TYPE="TEXT/JAVASCRIPT"></SCRIPT>
<SCRIPT SRC="http://localhost:8080/jeasyweb/scripts/common-func.js?ver=20100103214411" TYPE="TEXT/JAVASCRIPT"></SCRIPT>
<LINK HREF="http://localhost:8080/jeasyweb/scripts/ext-3.0.0/resources/css/ext-all.css" TYPE="TEXT/CSS" REL="STYLESHEET">
<LINK HREF="http://localhost:8080/jeasyweb/scripts/button-icon.css" TYPE="TEXT/CSS" REL="STYLESHEET">
<TITLE>[組織機構配置]維護頁面</TITLE>
</HEAD>
<script>
//頁面初始化操作
function doPageInit(){
//bt_query_click();
}
//樹的單擊事件
function treeClick(node,e){
loadFormData({
url : rootPath+'selectSysDepartment.do?uuid='+node.id,
formName : 'queryForm'
});
}
var currentNode = null;
var treeMenu = new Ext.menu.Menu({
id : 'treeMenu',
items : [
new Ext.menu.Item({
text : '增加節點', iconCls : 'icon_add',
handler:treeAdd
}),
new Ext.menu.Item({
text : '修改節點', iconCls : 'icon_update',
handler:treeUpdate
}),
new Ext.menu.Item({
text : '刪除節點', iconCls : 'icon_delete',
handler:treeDelete
})
]
});
//創建右鍵菜單
function treeContextMenu(node, e) {
e.preventDefault(); //這行是必須的
currentNode = node;
var coords = e.getXY();
treeMenu.showAt([coords[0], coords[1]]);
}
//增加節點打開頁面
function treeAdd(){
insertWindow.show(true);
insertForm.getForm().reset();
Ext.getCmp('insertForm:parentDepartIdFk').setValue(currentNode.id);
}
//增加節點保存操作
function bt_i_save_click(){
saveForm({
formName : 'insertForm',
yesFun : function(form,action){
insertWindow.hide();
sysDepartmentTree_root.reload();
},
noFun : function(form,action){
insertWindow.hide();
sysDepartmentTree_root.reload();
}
});
}
//增加節點返回操作
function bt_i_goback_click(){
insertWindow.hide();
}
//修改節點打開頁面
function treeUpdate(){
updateWindow.show(true);
updateForm.getForm().reset();
loadFormData({
url : rootPath+'selectSysDepartment.do?uuid='+currentNode.id,
formName : 'updateForm',
noFun : function(){
updateWindow.hide();
}
});
}
//修改節點保存操作
function bt_u_save_click(){
saveForm({
formName : 'updateForm',
yesFun : function(form,action){
updateWindow.hide();
sysDepartmentTree_root.reload();
},
noFun : function(form,action){
updateWindow.hide();
sysDepartmentTree_root.reload();
}
});
}
//修改節點返回操作
function bt_u_goback_click(){
updateWindow.hide();
}
//刪除節點操作
function treeDelete(){
if(node.childNodes!=null&&node.childNodes.length>0){
Ext.MessageBox.show({title:'刪除失敗', msg:'樹節點下有子節點,請先刪除子節點后繼續操作.',buttons: Ext.MessageBox.OK,icon: Ext.MessageBox.ERROR});
return;
}
deleteRecords({
url : rootPath+'deleteSysDepartment.do?uuids='+currentNode.id,
yesFun : function(){
sysDepartmentTree.getLoader().load();
},
noFun:function(){
sysDepartmentTree.getLoader().load();
}
});
}
///////////////////////////////////////////////////////////////////////////////////////
//////下面是對功能的操作，上面是對功能分類樹菜單的操作/////////////////
///////////////////////////////////////////////////////////////////////////////////////
//查詢域處理按鈕：查詢
function bt_query_click(){
//loadGridData({gridName : 'sysDepartmentList',formName : 'queryForm'});
}
//查詢域處理按鈕：重置
function bt_reset_click(){
queryForm.getForm().reset();
}
</script>
<BODY>
<SCRIPT>
var pWinCmpId = null;
Ext.BLANK_IMAGE_URL = 'http://localhost:8080/jeasyweb/scripts/ext-3.0.0/resources/images/default/s.gif';
var basePath = 'http://localhost:8080/jeasyweb/null';
var rootPath = 'http://localhost:8080/jeasyweb/';
Ext.onReady(function() {
Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget = 'qtip';
/******************下面開始BODY內JavaScript代碼輸出************************/
sysDepartmentTree = new Ext.tree.TreePanel({
id:'sysDepartmentTree',split:true,collapsible:true,rootVisible : false,name:'sysDepartmentTree',autoScroll:true,border:true,
region:'west',title:'組織機構樹',width:500,
loader:new Ext.tree.TreeLoader({dataUrl:'http://localhost:8080/jeasyweb/treeDepartment.do'})
});
sysDepartmentTree_root = new Ext.tree.AsyncTreeNode({
text:'Ext TreeRoot',id:'src_root'
});
sysDepartmentTree.setRootNode(sysDepartmentTree_root);
sysDepartmentTree.on('contextmenu', function(node, e){treeContextMenu(node, e);}, sysDepartmentTree);
sysDepartmentTree.on('click', function(node, e){treeClick(node, e);});
var queryForm_columns = 2 * 1;
queryForm = new Ext.form.FormPanel({
region:'center',
frame:true,
title:'查詢[組織機構配置]信息',
buttonAlign:'center',frame:true,layout:'table',
name:'queryForm',id:'queryForm',height:200,
layoutConfig: {columns:queryForm_columns},
defaults:{labelSeparator:'：',border:false,layout:'form',frame:false,labelAlign:'right',labelWidth:100,height:30}
});
queryForm.add({
name:'queryForm_item_departCode',id:'queryForm_item_departCode',
colspan:2,bodyStyle:'padding:2px',
items:{
xtype:'textfield',anchor:'100%',name:'departCode',fullname:'queryForm:departCode',colspan:'1',fieldLabel:'機構代碼', id:'queryForm:departCode'
}
});
queryForm.add({
name:'queryForm_item_departName',id:'queryForm_item_departName',
colspan:2,bodyStyle:'padding:2px',
items:{
xtype:'textfield',anchor:'100%',name:'departName',fullname:'queryForm:departName',colspan:'1',fieldLabel:'機構名稱', id:'queryForm:departName'
}
});
queryForm.add({
name:'queryForm_item_isValid',id:'queryForm_item_isValid',
colspan:2,bodyStyle:'padding:2px',
items:{
xtype:'combo',anchor:'90%',name:'comboBox_queryForm:isValid',valueset:'[系統]有效標記',show:'name',colspan:'1',editable:true,forceSelection:true,listeners:{load:function(){Ext.getCmp('comboBox_queryForm:isValid').setValue(document.getElementById('queryForm:isValid').value);}},mode:'local',store:new Ext.data.SimpleStore({fields: ['codevalue','codename','codevalue_codename'],data:comboBox_data_402880e825c9676c0125c968a3210001}),displayField: 'codename',valueField:'codevalue',emptyText:'請選擇',fieldLabel:'是否有效',hiddenId:'queryForm:isValid',hiddenName:'isValid',triggerAction: 'all',fullName:'queryForm:isValid',codevalueUuid:'402880e825c9676c0125c968a3210001',id:'comboBox_queryForm:isValid'
}
});
queryForm.addButton({xtype:'button',name:'bt_query',text:'保存修改',enablerule:'0',handler:function(){try{bt_query_click();}catch(e){alert('調用函數[bt_query_click]錯誤.');}},disabled:false,icon:'http://localhost:8080/jeasyweb/scripts/button-icon/icon-ok.png',type:'button',cls:'x-btn-text-icon',id:'bt_query'});
queryForm.addButton({xtype:'button',name:'bt_reset',text:'重置',enablerule:'0',handler:function(){try{bt_reset_click();}catch(e){alert('調用函數[bt_reset_click]錯誤.');}},disabled:false,icon:'http://localhost:8080/jeasyweb/scripts/button-icon/icon_redo.gif',type:'button',cls:'x-btn-text-icon',id:'bt_reset'});
queryForm.on("bodyresize", function(){
var _bodyWidth = parseInt(document.getElementById('queryForm').style.width);
var queryForm_columns = 2 * 1;
var _perWidth = _bodyWidth/queryForm_columns;
queryForm.getComponent("queryForm_item_departCode").setWidth(_perWidth * 2-15);
queryForm.getComponent("queryForm_item_departName").setWidth(_perWidth * 2-15);
queryForm.getComponent("queryForm_item_isValid").setWidth(_perWidth * 2-15);
});
var viewport_2abe47b907934d87a51db3257264d4e1 = new Ext.Viewport({
layout:'border',
items:[sysDepartmentTree,queryForm]
});
var insertForm_columns = 2 * 1;
insertForm = new Ext.form.FormPanel({
region:'center',
url:'http://localhost:8080/jeasyweb/insertSysDepartment.do',
frame:true,
title:'增加[組織機構配置]',
buttonAlign:'center',frame:true,layout:'table',
name:'insertForm',id:'insertForm',height:200,
layoutConfig: {columns:insertForm_columns},
defaults:{labelSeparator:'：',border:false,layout:'form',frame:false,labelAlign:'right',labelWidth:100,height:30}
});
insertForm.add({
name:'insertForm_item_parentDepartIdFk',id:'insertForm_item_parentDepartIdFk',
colspan:2,bodyStyle:'padding:2px',
items:{
xtype:'textfield',anchor:'100%',name:'parentDepartIdFk',fullname:'insertForm:parentDepartIdFk',colspan:'1',readOnly:true,fieldLabel:'上級機構ID_FK', id:'insertForm:parentDepartIdFk'
}
});
insertForm.add({
name:'insertForm_item_departCode',id:'insertForm_item_departCode',
colspan:2,bodyStyle:'padding:2px',
items:{
xtype:'textfield',anchor:'100%',name:'departCode',fullname:'insertForm:departCode',colspan:'1',fieldLabel:'機構代碼', id:'insertForm:departCode'
}
});
insertForm.add({
name:'insertForm_item_departName',id:'insertForm_item_departName',
colspan:2,bodyStyle:'padding:2px',
items:{
xtype:'textfield',anchor:'100%',name:'departName',fullname:'insertForm:departName',colspan:'1',fieldLabel:'機構名稱', id:'insertForm:departName'
}
});
insertForm.add({
name:'insertForm_item_departDesc',id:'insertForm_item_departDesc',
colspan:2,bodyStyle:'padding:2px',
items:{
xtype:'textarea',anchor:'100%',height:100,name:'departDesc',colspan:'1',fieldLabel:'機構描述',id:'insertForm:departDesc'
}
});
insertForm.addButton({xtype:'button',name:'bt_insert',text:'保存記錄',enablerule:'0',handler:function(){try{bt_i_save_click();}catch(e){alert('調用函數[bt_i_save_click]錯誤.');}},disabled:false,icon:'http://localhost:8080/jeasyweb/scripts/button-icon/icon-ok.png',type:'button',cls:'x-btn-text-icon',id:'bt_insert'});
insertForm.addButton({xtype:'button',name:'bt_goback',text:'關閉返回',enablerule:'0',handler:function(){try{bt_i_goback_click();}catch(e){alert('調用函數[bt_i_goback_click]錯誤.');}},disabled:false,icon:'http://localhost:8080/jeasyweb/scripts/button-icon/icon_goback.gif',type:'button',cls:'x-btn-text-icon',id:'bt_goback'});
insertForm.on("bodyresize", function(){
var _bodyWidth = parseInt(document.getElementById('insertForm').style.width);
var insertForm_columns = 2 * 1;
var _perWidth = _bodyWidth/insertForm_columns;
insertForm.getComponent("insertForm_item_parentDepartIdFk").setWidth(_perWidth * 2-15);
insertForm.getComponent("insertForm_item_departCode").setWidth(_perWidth * 2-15);
insertForm.getComponent("insertForm_item_departName").setWidth(_perWidth * 2-15);
insertForm.getComponent("insertForm_item_departDesc").setWidth(_perWidth * 2-15);
});
//開始輸出Window對象到JSP頁面.
insertWindow = new Ext.Window({
name:'insertWindow',closeAction:'hide',width:600,height:300,modal:true,plain:true,layout:'border',id:'insertWindow',
items:[insertForm]
});
var updateForm_columns = 2 * 1;
updateForm = new Ext.form.FormPanel({
region:'center',
url:'http://localhost:8080/jeasyweb/updateSysDepartment.do',
frame:true,
title:'修改[組織機構配置]',
buttonAlign:'center',frame:true,layout:'table',
name:'updateForm',id:'updateForm',height:200,
layoutConfig: {columns:updateForm_columns},
defaults:{labelSeparator:'：',border:false,layout:'form',frame:false,labelAlign:'right',labelWidth:100,height:30}
});
updateForm.add({
name:'updateForm_item_uuid',id:'updateForm_item_uuid',
colspan:2,bodyStyle:'padding:2px',
items:{
xtype:'textfield',anchor:'100%',name:'uuid',fullname:'updateForm:uuid',colspan:'1',readOnly:true,fieldLabel:'主鍵UUID', id:'updateForm:uuid'
}
});
updateForm.add({
name:'updateForm_item_parentDepartIdFk',id:'updateForm_item_parentDepartIdFk',
colspan:2,bodyStyle:'padding:2px',
items:{
xtype:'textfield',anchor:'100%',name:'parentDepartIdFk',fullname:'updateForm:parentDepartIdFk',colspan:'1',readOnly:true,fieldLabel:'上級機構ID_FK', id:'updateForm:parentDepartIdFk'
}
});
updateForm.add({
name:'updateForm_item_departCode',id:'updateForm_item_departCode',
colspan:2,bodyStyle:'padding:2px',
items:{
xtype:'textfield',anchor:'100%',name:'departCode',fullname:'updateForm:departCode',colspan:'1',readOnly:true,fieldLabel:'機構代碼', id:'updateForm:departCode'
}
});
updateForm.add({
name:'updateForm_item_departName',id:'updateForm_item_departName',
colspan:2,bodyStyle:'padding:2px',
items:{
xtype:'textfield',anchor:'100%',name:'departName',fullname:'updateForm:departName',colspan:'1',fieldLabel:'機構名稱', id:'updateForm:departName'
}
});
updateForm.add({
name:'updateForm_item_departDesc',id:'updateForm_item_departDesc',
colspan:2,bodyStyle:'padding:2px',
items:{
xtype:'textarea',anchor:'100%',height:100,name:'departDesc',colspan:'1',fieldLabel:'機構描述',id:'updateForm:departDesc'
}
});
updateForm.addButton({xtype:'button',name:'bt_save',text:'保存記錄',enablerule:'0',handler:function(){try{bt_u_save_click();}catch(e){alert('調用函數[bt_u_save_click]錯誤.');}},disabled:false,icon:'http://localhost:8080/jeasyweb/scripts/button-icon/icon-ok.png',type:'button',cls:'x-btn-text-icon',id:'bt_save'});
updateForm.addButton({xtype:'button',name:'bt_goback',text:'關閉返回',enablerule:'0',handler:function(){try{bt_u_goback_click();}catch(e){alert('調用函數[bt_u_goback_click]錯誤.');}},disabled:false,icon:'http://localhost:8080/jeasyweb/scripts/button-icon/icon_goback.gif',type:'button',cls:'x-btn-text-icon',id:'bt_goback'});
updateForm.on("bodyresize", function(){
var _bodyWidth = parseInt(document.getElementById('updateForm').style.width);
var updateForm_columns = 2 * 1;
var _perWidth = _bodyWidth/updateForm_columns;
updateForm.getComponent("updateForm_item_uuid").setWidth(_perWidth * 2-15);
updateForm.getComponent("updateForm_item_parentDepartIdFk").setWidth(_perWidth * 2-15);
updateForm.getComponent("updateForm_item_departCode").setWidth(_perWidth * 2-15);
updateForm.getComponent("updateForm_item_departName").setWidth(_perWidth * 2-15);
updateForm.getComponent("updateForm_item_departDesc").setWidth(_perWidth * 2-15);
});
//開始輸出Window對象到JSP頁面.
updateWindow = new Ext.Window({
name:'updateWindow',closeAction:'hide',width:600,height:300,modal:true,plain:true,layout:'border',id:'updateWindow',
items:[updateForm]
});
try{doPageInit();}catch(e){alert(e)}
/******************BODY內JavaScript代碼輸出結束************************/
});
//輸出不為空的代碼集[[系統]有效標記],描述[有效標記]
comboBox_data_402880e825c9676c0125c968a3210001=[
['0','有效','0-有效'],
['1','無效','1-無效']
];
</SCRIPT>
</BODY>
</HTML>
在tree的contextmenu的操作過程中，定義了Menu對象的handler屬性。傳入的參數不是node對象，只能定義一個全局變量
currentNode。上午發的代碼有bug。