extjs4 treepanel、 树、节点的操作

这是个tree panel的实例，是基于extjs的mvc模式，先得对mvc模式有一定的了解

效果图



store存储层下加载tree数据的类

Ext.define('yang.store.frameAAA.module.FrameAAAWestTreeStore', {
extend : 'Ext.data.TreeStore',
storeId : 'frameAAAWestTreeStore',
proxy : {
type : 'ajax',
url : 'http://localhost:8080/b_springmvc_extjs/treeStore.do', // 提交的url
reader : 'json'
},
root : {
text : 'root',
id : '-1'
},
autoLoad : true,
sorters : [{
property : 'text', // 这里需要注意一下,如果排序的属性是id的话，例如7、8、9、10、11，排序后是：10、11、7、8、9
direction : 'asc' // 它是按照第一数字排序后再按照第二位数字排序，如此类推
}]
});

view层写个tree panel 的类

Ext.define('yang.view.frameAAA.module.FrameAAAWestTreePanel', {
extend : 'Ext.tree.Panel',
title : '<center>xxx  栏目</center>',
border : false,
iconCls : 'application_side_list',
alias : 'widget.frameAAAWestTreePanel', // 这里指定了别名，在
// GovInfoFrame.js 中 的
// items 中就可以直接使用 xtype :
// 'govInfoModuleTreePanel'
initComponent : function() {
var frameAAAWestTreeStore = Ext.create('yang.store.frameAAA.module.FrameAAAWestTreeStore');
var moduleTree = this;
Ext.apply(this, {
store : frameAAAWestTreeStore,
dockedItems : [{
dock : 'top',
xtype : 'toolbar',
layout : 'column',
border : false,
items : [{
iconCls : 'arrow_out',
columnWidth : 1 / 3,
text : '展开',
handler : function() {
moduleTree.expandAll();
}
}, {
columnWidth : 1 / 3,
iconCls : 'arrow_in',
text : '缩起',
handler : function() {
moduleTree
.collapseAll();
}
}, {
columnWidth : 1 / 3,
iconCls : 'arrow_refresh',
text : '刷新',
handler : function() {
moduleTree.store.load();
}
}]
}]

});
this.callParent(arguments);
}
});

然后再要加载这个tree panel 的视图里加上个items

items : [{
xtype : 'frameAAAWestTreePanel' // 因为这里用来某个类的alias别名，所以一定要把这个类引入进来
}, { 									// 上面requires :['yang.view.frameAAA.module.FrameAAAWestTreePanel'],就是引入这个类
xtype : 'panel',			//如果不引入这个类，会报错：Uncaught TypeError: Cannot call method 'substring' of undefined
iconCls : 'application_side_list',
title : '<center>yyy 栏目</center>'
}, {
xtype : 'panel',
iconCls : 'application_side_list',
title : '<center>zzz 栏目</center>'
}],
autoDestroy : true
}

后台返回的tree数据的格式如下

@RequestMapping(value = "/treeStore.do")
@ResponseBody
public String treeStore() {
String json = "["
+ "{text:'aaa',id:1,children: [{ text: 'bbb',id:2, leaf: true },{ text: 'ccc',id:3, leaf: true },{ text: 'ddd',id:4, leaf: true },{ text: 'eee',id:5, leaf: true }]}"
+ ","
+ "{ text: 'fff',id:6,children: [{ text: 'ggg',id:7, leaf: true },{ text: 'hhh',id:8, leaf: true },{ text: 'iii',id:9, leaf: true },{ text: 'jjj',id:10, leaf: true }]}"
+ ","
+ "{text:'KKK',id:11,children: [{text:'kkk',id:12,leaf:true},{text:'lll',id:13,leaf:true},{text:'mmm',id:14,leaf:true},{text:'nnn',id:15,leaf:true}]}"
+ "]";
System.out.println(json);
return json;
}

如果要这个tree panel添加监听的事件的话可以在controller层加上，我这里用弹窗演示，本来是生成tab panel的。

init : function() {
this.control({
'frameAAAWestTreePanel' : {
//这个点击事件的监听也写在frameAAAWestTreePanel所在类的 listeners 里，这在这里方便集中管理所有动作
itemclick : this.loadGridPanel
}
});
},

loadGridPanel : function(view, rec, item, index, e) {
Ext.Msg.alert('id : ' + rec.get('id'), 'text : '
+ rec.get('text'));
}

可以把id作为是否存在这个panel，如果不存在再生成这个panel到tabpanel上。

这个我会写在后面