代码如下:
Ext.ux.TreePanel = function(config){
Ext.QuickTips.init();
this.config = config;
this.title = this.config.title || '';
this.bean = this.config.bean;
this.id = this.config.id;
this.el = this.config.el;
this.region = this.config.region;
this.deleteUrl = this.config.deleteUrl;//删除action
this.loadUrl = this.config.loadUrl;//表格加载action
this.saveUrl = this.config.saveUrl;//表单保存action
this.editUrl = this.config.editUrl;//表单编辑action
this.formFields = this.config.formFields || new Array();//表单显示字段
this.key = this.config.key || 'id';//数据主键
this.treeMenu = new Ext.menu.Menu({
id: 'contextMenu',
items: [{id: 'addNode',text: '新增节点'},
{id: 'removeNode',text: '移除节点'},'-',
{id: 'refresh',text: '刷新'}]
});
this.root = new Ext.tree.AsyncTreeNode({text: ' ',draggable: false,id: ' ',children: [{id: ' ', text: 'loading' ,iconCls: 'x-tree-node-loading' ,leaf: true}]});
this.root.on('expand' ,this.getNodes.createDelegate(this));
this.tree = new Ext.tree.TreePanel({
region: this.region,
lines: true,
split: true,
//el: this.el,
renderTo: this.el,
frame: true,
collapseMode: 'mini',
collapsible: true,
width: 160,
height: 500,
treeRightMenu: this.treeMenu,
autoScroll: true,
rootVisible: false,
animate: true,
enableDD: false,
border: true,
root: this.root
});
this.tree.on('contextmenu' ,this.showMenu.createDelegate(this));
this.tree.on('click' ,this.nodeClick.createDelegate(this));
}
Ext.ux.TreePanel.prototype = {
onAdd : function(){
alert('add');
},
onDelete : function(){
alert('delete');
},
onReload : function(){
alert('reload');
},
onClose : function(){
alert('close');
},
showMenu : function(){
alert('menu');
},
nodeClick : function(node) {
alert('click');
},
getNodes : function(node){
var cnode = node.firstChild;
var m_url = this.loadUrl;
var m_key = this.key;
if (!cnode || (cnode && cnode.text == 'loading')){
Ext.Ajax.request({
url: m_url,
params: m_key + "=" + node.id,
method: 'post',
success: function(response){
var arrs = Ext.util.JSON.decode(response.responseText);
var cnode1 = null;
var arr = null;
for (var i = 0 ;i< arrs.length ;i++){
arr = arrs[i];
cnode1 = new Ext.tree.AsyncTreeNode({id: arr.id,text: arr.text,leaf: arr.leaf,children: [{id: ' ' ,text: 'loading', iconCls: 'loading', leaf: true}]})
cnode1.on('expand' ,Ext.ux.TreePanel.prototype.getNodes(this));
node.appendChild(cnode1);
}
if (cnode && cnode.text == 'loading') {
node.removeChild(cnode);
}
}
});
}
}
}
如上,红色部分这个节点的expand方法调用的还是这个方法,但不知道这里该怎么写。
问题补充:
getNodes :function(node){
var cnode = node.firstChild;
var m_url = this.loadUrl;
var m_key = this.key;
if (!cnode || (cnode && cnode.text == 'loading')){
Ext.Ajax.request({
url: m_url,
params: m_key + "=" + node.id,
method: 'post',
success: function(response){
var arrs = Ext.util.JSON.decode(response.responseText);
var cnode1 = null;
var arr = null;
for (var i = 0 ;i< arrs.length ;i++){
arr = arrs[i];
cnode1 = new Ext.tree.AsyncTreeNode({id: arr.id,text: arr.text,leaf: arr.leaf,children: [{id: ' ' ,text: 'loading', iconCls: 'loading', leaf: true}]})
cnode1.on('expand' ,Ext.ux.TreePanel.prototype.getNodes(this));
node.appendChild(cnode1);
}
if (cnode && cnode.text == 'loading') {
node.removeChild(cnode);
}
}
看这个的两个粗体的部分,因为我这个getNodes方法是在prototype中定义的,而我第二个粗体部分的表示是从服务器读取后,把新节点(cnode1)加到当前节点(node)下,然后这个新节点(cnode1)同样要在展开的时候执行这个方法去取得新的节点下来。就是在第二个粗体部分写什么都不对,刚开始写的是cnode1.on('expand',this.getNodes.createDelegate(this))出错,用this.getNodes也出错(在点击展开时),不知道这样描述清楚不清楚