The code is used as follows:
Ext.define('user.view.AreaTree', {
extend : 'Ext.tree.Panel',
title : 'tree directory',
width : 200,
height : 200,
region : 'west',
store : new Ext.data.TreeStore({ //You cannot specify root here, otherwise it will not be loaded by default and will go directly to the proxy remote
proxy : {
type : 'ajax',
url : 'http://xxx:80/remote.jsp'
}
}),
root : { //Specify root on the treePanel, load the root data on the treePanel first, then expand and then load the proxy through the store
id : '0',
expanded : true,
children : [{
id : '1',
text : 'First-level classification 1'
}, {
id : '2',
text : 'First-level classification 2'
}]
},
rootVisible : false,
border : false,
autoScroll : true,
listeners : {
itemcontextmenu : function(th, record, item, index, event, eOpts) {
event.preventDefault();
Ext.create('Ext.menu.Menu', {
width : 100,
height : 100,
floating : true, // usually you want this set
items : [{
text : 'New',
iconCls : 'add16',
handler : function() {
alert('xxxx');
}
}, {
text : 'modify'
}, {
text : 'delete'
}]
}).showAt(event.getXY());
}
})
Ext6, treePane and treeStore have yet to learn about the hierarchical loading order, so take notes here first