ExtTreeの右クリックメニューの削除と同期データベースのドラッグ&ドロップ
ExtTreeだけでもExtJsを学ぶのは多くの開発者がよく言う言葉ですが、確かにExtの木への支持は非常によく、非常に美しいです.次に、コードを通じて、ExtTreeの各方面に関する私の学習過程の知識を紹介します.
コードは次のとおりです.
以降の説明では、Extのほとんどがデータベースに関連していて変更が分からない場合は、トリガーイベントの処理方法に
このような非同期の要求はExtの中で随所に使うことができて、バックグラウンドの処理のコードについて私は貼らないで、みんなもすべて知っているべきで、パラメータを受け入れて、データを照会した後に
JSON形式のデータを転送するにはもちろんJSONデータ形式は[{name:'張三'},{age:34},{sex:'男'}]というデータ形式のJSONデータでなければなりません.私の木のコードが皆さんに役に立つことを望んでいます.少し乱れていますが、多くのコメントが落ちたコードも役に立ちます.コメントをキャンセルして効果を試してみてください.
コードは次のとおりです.
Ext.onReady(function() {
Ext.BLANK_IMAGE_URL = 'extjs3.1/resources/images/default/s.gif';
var Tree = Ext.tree;
// Loader
var treeloader = new Tree.TreeLoader( {
dataUrl : "display.action?nodeId='A1'"
});
// ，
var treepanel = new Tree.TreePanel( {
// renderTo:"tree_div",// renderTo， setRootNode() ， TreePanel root 。
el : 'tree_div', // ， HTML DIV
rootVisible : true, // false ， ，
border : true, //
animate : true, //
autoScroll : true, //
enableDD : true, //
containerScroll : true,
// root:rotnode, // root ，
// root， setRootNode S
loader : treeloader,
useArrows : true,
checkModel : 'cascade', //
onlyLeafCheckable : false
//
// treeloader ，
// ：loader: new Tree.TreeLoader({
// dataUrl:'http://localhost:8080/Struts2JsonExtJsTree/menus.action'
// })
// loader:new
// Tree.TreeLoader({dataUrl:"menus.action?id='A1'"});
});
//
var rootnode = new Tree.AsyncTreeNode( { // ，
id : 'workArea',
text : ' ',
draggable : false
// ， FALSE
});
// , tree
treepanel.setRootNode(rootnode);
// ， node . ，
// / ， node 'beforeload'
treepanel.on('beforeload', function(node) {
treepanel.loader.dataUrl = 'display.action?id=' + node.id; // Loader
});
// Ext Tree demo ， movenode : ( Tree tree, Node node, Node oldParent,
// Node newParent, Number index )
// ， Ext.tree.TreePanel ， ，
// ， ajax ， ， ．（ ）
treepanel.on('movenode',function(tree,node,oldParent,newParent,index){
Ext.Ajax.request({
url:'move.action',
params:{
nodeId:node.id,
oldParentId:oldParent.id,
newParentId:newParent.id,
index:index
}
});
});
/*
* tree e e ， dropNode,target,point
* 1.dropNode 2.target
* 3.point ， append ，above ，below 。
*/
// treepanel.on('nodedrop', function(e) {
// if(e.point=='append'){
// Ext.Ajax.request({
// url:'node.action',
// params:{
// nodeId:e.dropNode.id,
// oldParentId:e.parentNode.id,
// newParentId:e.target.id
// }
// });
// }
// var msg;
// if (e.point == 'append') {
// msg = ' "【' + e.dropNode.text + '】" "【' + e.target.text
// + '】" ！';
// // alert(' "【' + e.dropNode.text + '】" "【' + e.target.text
// // + '】" ！');
// // var resultUrl =
// // "../info/rss.do?method=treeNodeTuoDong¤RootId="+e.dropNode.id+"&parentRootId="+e.target.id+"&type=append";
// // var resulthtml = XmlHttpHelper.transmit(false, "get", "text",
// // resultUrl, null, null);
// } else if (e.point == 'above') {
// // alert(' "' + e.dropNode.text + '" "' + e.target.text
// // + '" ！');
// msg = ' "' + e.dropNode.text + '" "' + e.target.text
// + '" ！';
// // var resultUrl =
// // "../info/rss.do?method=treeNodeTuoDong¤RootId="+e.dropNode.id+"&parentRootId="+e.target.id+"&type=above";
// // var resulthtml = XmlHttpHelper.transmit(false, "get", "text",
// // resultUrl, null, null);
//
// } else if (e.point == 'below') {
// // alert(' "' + e.dropNode.text + '" "' + e.target.text
// // + '" ！');
// msg = ' "' + e.dropNode.text + '" "' + e.target.text
// + '" ！';
// // var resultUrl =
// // "../info/rss.do?method=treeNodeTuoDong¤RootId="+e.dropNode.id+"&parentRootId="+e.target.id+"&type=below";
// // var resulthtml = XmlHttpHelper.transmit(false, "get", "text",
// // resultUrl, null, null);
// }
//
// // var viewPanel = Ext.getCmp('tree-window-view');
// // //
// // win.setTitle(' ');
// // win.show();
// // var tmpTpl = new Ext.Template(msg);
// // tmpTpl.overwrite(viewPanel.body);
// Ext.Msg.alert(" ", msg);
//
// });
treepanel.render(); // tree
rootnode.expand();// , ，
//
var contextMenu = new Ext.menu.Menu( {
items : [ {
text : ' ',
handler : addHandler
}, {
text : ' ',
handler : addBrotherHandler
}, {
text : ' ',
handler : deleteHandler
}, {
text : ' ',
handler : modifyHandler
}, {
text : ' ',
handler : viewHandler
} ]
});
// var treeSorter = new Ext.tree.TreeSorter(treepanel, {
// folderSort : true, //
// dir : 'asc' // , ，
// });
var treeEditor = new Ext.tree.TreeEditor(treepanel, {//
allowBlank : false, //
cancelOnEsc : true,// ESC
selectOnFocus : true
});
//
var win = new Ext.Window( {
maskDisabled : false,
id : 'tree-window',
modal : true,//
constrain : true,// viewport
closable : true,//
closeAction : 'hide',
layout : 'fit',
width : 300,
height : 200,
plain : true,
items : [ {
id : 'tree-window-view',
border : false
} ]
});
treepanel.on('contextmenu', treeContextHandler);
//
treepanel.on('beforemovenode', function(tree, node, oldParent,
newParent, index) {
// alert(tree + '-' + node + '-' + oldParent + '-' + newParent + '-'
// + index);
// TODO
});
// ， append
treepanel.on('nodedragover', function(e) {
var n = e.target;
if (n.leaf) {
n.leaf = false;
}
return true;
});
// treeEditor.on('complete', function(o, newText, oldText) {
// alert(' ， ');
// Ext.Ajax.request({
// url:'addchildnode.action',
// params:{
// newname:newText,
// nodeId:currentId,
// oldname:oldValue
// }
// });
// },this,true);
var pid;
var flag;
treeEditor.on("complete", function(treeEditor){
alert(treeEditor.editNode.text);
var ppid=pid==null?treeEditor.editNode.id:pid;
var fflag=flag==null?'modify':flag;
Ext.Ajax.request({
url:"addnode.action",
params:{
newname:treeEditor.editNode.text,
sign:fflag,
nodeId:ppid// Id, ID
}
});
});
//
function treeContextHandler(node, event) {
event.preventDefault();// ， （ ）
node.select();// ,
contextMenu.show(node.ui.getAnchor());
this.createrightClick(node).showAt(event.getXY());//
}
//
function addHandler() {
var newNode = new Ext.tree.TreeNode( {
text : ' '
});
var selectedNode = treepanel.getSelectionModel().getSelectedNode();
pid=selectedNode.id;
flag='add';
selectedNode.leaf = false;
selectedNode.expand(false, true, function() {
// ， expand ， ，
selectedNode.appendChild(newNode);
treepanel.getSelectionModel().select(newNode);
setTimeout(function() {
treeEditor.editNode = newNode;
treeEditor.startEdit(newNode.ui.textNode);
}, 10);
});
}
function addBrotherHandler() {
var newNode = new Ext.tree.TreeNode( {
text : ' '
});
var selectedNode = treepanel.getSelectionModel().getSelectedNode();
var selectedParentNode = selectedNode.parentNode;
pid=selectedParentNode.id;
flag='add';
if (selectedParentNode == null) {
selectedNode.appendChild(newNode);
} else {
selectedParentNode.insertBefore(newNode, selectedNode);
}
setTimeout(function() {
treeEditor.editNode = newNode;
treeEditor.startEdit(newNode.ui.textNode);
}, 10);
}
function deleteHandler() {
var nodeid=treepanel.getSelectionModel().getSelectedNode().id;
var pnodeid=treepanel.getSelectionModel().getSelectedNode().parentNode.id;
//document.location.href="deletenode.action?nodeId="+nodeid+"&oldParentId="+pnodeid;
alert(nodeid+"==="+pnodeid);
Ext.Ajax.request({
url:'deletenode.action',
params:{
nodeId:nodeid,
oldParentId:pnodeid
}
});
treepanel.getSelectionModel().getSelectedNode().remove();
}
function modifyHandler() {
var selectedNode = treepanel.getSelectionModel().getSelectedNode();//
pid=selectedNode.id;
flag='modify';
treeEditor.editNode = selectedNode;
treeEditor.startEdit(selectedNode.ui.textNode);
}
function viewHandler() {
var viewPanel = Ext.getCmp('tree-window-view');
var selectedNode = treepanel.getSelectionModel().getSelectedNode();
//
var tmpid = selectedNode.attributes.id;
var tmpname = selectedNode.attributes.text;
var tmpdes = selectedNode.attributes.description;
var tmphref = selectedNode.attributes.href;
win.setTitle(tmpname + ' ');
win.show();
var dataObj = {
id : tmpid,
name : tmpname,
des : tmpdes,
href : tmphref
}
var tmpTpl = new Ext.Template(
['<div style="margin:10px"><div style="margin:10px"> :{id}</div>',
'<div style="margin:10px"> :{name}</div>',
'<div style="margin:10px"> :{des}</div>',
'<div style="margin:10px"> :{href}</div></div></div>' ]);
tmpTpl.overwrite(viewPanel.body, dataObj);
}
// function myEditor(editor, newValue, oldValue) {
//
//// Ext.Ajax.request({
//// url:'addchildnode.action',
//// params:{
//// newname:newValue,
//// nodeId:currentId,
//// }
//// });
// }
});
以降の説明では、Extのほとんどがデータベースに関連していて変更が分からない場合は、トリガーイベントの処理方法に
Ext.Ajax.request({
url:"addnode.action",
params:{
newname:treeEditor.editNode.text,
sign:fflag,
nodeId:ppid// Id, ID
}
});
このような非同期の要求はExtの中で随所に使うことができて、バックグラウンドの処理のコードについて私は貼らないで、みんなもすべて知っているべきで、パラメータを受け入れて、データを照会した後に
JSON形式のデータを転送するにはもちろんJSONデータ形式は[{name:'張三'},{age:34},{sex:'男'}]というデータ形式のJSONデータでなければなりません.私の木のコードが皆さんに役に立つことを望んでいます.少し乱れていますが、多くのコメントが落ちたコードも役に立ちます.コメントをキャンセルして効果を試してみてください.