突发奇想想弄一个前台的ext5.1的表格和tree之间的动态转换，具体效果是给树增加或者删除节点之后，表格里面的数据也会相应改变，如果修改表格里面的数据也会动态将树的结构作相应变化。
首先先把界面设计好按照步骤一步一步来：
etx树的的构造：
1.基础属性配置：
Ext.create('Ext.tree.Panel', {
width: 200,
border : false,
name : 'mytreepanel',
store: store,
rootVisible: true,
listeners : {
'itemclick' : function(view, record, items, index, e) {//单击树的节点出发
},
'itemcontextmenu' : function(menutree, record, items, index, e) { //右键树的节点出发
e.preventDefault();
e.stopEvent(); //撤销页面的右键功能，在下面会将自己的页面右键功能放入
onCtxMenuHandler(e,record); //右键菜单具体逻辑
}
}
});
上面配置了ext的树的基本属性，接下来就需要给树加上相应的监听事件，本人是加上了右键弹出菜单，然后将功能写在里面：该方法onCtxMenuHandler(e,record);
function onCtxMenuHandler(e,record){//发送被单击的节点与时间对戏那个给时间处理程序
var obj = record;
while (!obj.parentNode.isRoot()) {
obj = obj.parentNode;
}
var rootId = obj.getId();
console.log(rootId);
var nodemenu = new Ext.menu.Menu({ //右键弹出的菜单
items : [{
text : "添加文件夹",
// icon:'images/add.gif',
// iconCls:'leaf',
handler : function() {
if (record.get('leaf') == false) {
Ext.MessageBox.prompt("标题", "請輸入",
function(btn, text) {
if (btn == "ok") {
var id = new Date().getTime();
record.appendChild({
text : text,
id : id,
expanded : true
});
var grid = DSYGrid.getGrid('myRightGrid');//获取表格对象
var data = [{ID : id , NAME : text , PARENTID : record.data.id}] //这里传入自己想插入表格的数据
grid.getStore().loadData(data,true); //往自己的表格里面插入数据
}
}, this, false, // 表示文本框为多行文本框
"新添加文件夹"); //默认值
}
},
listeners : {
render : function(com) {
if(record.get('leaf') == true)
com.setVisible(false); //设置隐藏
}
}
}, {
text : "添加子节点",
handler : function() {
Ext.MessageBox.prompt("标题", "請輸入",
function(btn, text) {
if (btn == "ok") {
var id = new Date().getTime();
record.appendChild({
text : text,
id : id,
expanded : true,
leaf : true
});
var grid = DSYGrid.getGrid('myRightGrid');
var data = [{ID : id , NAME : text , PARENTID : record.data.id}]
grid.getStore().loadData(data,true);
}
}, this, false, // 表示文本框为多行文本框
"新添加子节点");
},
listeners : {
render : function(com) {
if(record.get('leaf') == true)
com.setVisible(false);
}
}
}, {
text : "编辑",
// icon:'images/leaf.gif',
// iconCls:'leaf',
handler : function() {
Ext.MessageBox.prompt("标题", "請輸入",
function(btn, text) {
if (btn == "ok") {
record.data.text= text;
//修改表格内容
var store = DSYGrid.getGrid('myRightGrid').getStore();
var myitems = store.getData().items;
for( var i = 0 ; i < myitems.length ; i++){
if( myitems[i].data.ID == record.data.id ){
myitems[i].set("NAME","jj");
}
}
}
}, this, false, // 表示文本框为多行文本框
record.data.text);
}
}, {
text : "删除",
// icon:'images/delete.gif',
// iconCls:'leaf',
handler : function() {
//修改表格内容
var store = DSYGrid.getGrid('myRightGrid').getStore();
var myitems = store.getData().items;
for( var i = 0 ; i < myitems.length ; i++){
if( myitems[i].data.ID == record.data.id ){
store.remove(myitems[i]); //删除表格里面的对应的行 这里功能只能简单删除叶子结点的功能，如果删除文件夹的话还要删除下面的叶子结点，在此基础上加循环就行了。
}
}
record.remove();
}
}]
});
nodemenu.showAt(e.getXY()); //弹出菜单的位置
}
2.表格的创建
相信创建表格这个就不用多说了吧，创建之后，上面的有些数据就是取自表格里面的。