最近要实现一个小控件,为了追求效果,采用了Ext JS4。由于Ext4与Ext3相比,有些内容作了调整,主要有如下不同:
(1)store的形式 由treeloader改为TreeStore
(2)原有click事件定义不太好使,可以使用oncheckchange实现。
(3)原有通过重新bindstore来加载树,已经不太好使,需要通过setRootNode的模式来实现。
例子如下:
Ext.require([
'Ext.tree.*',
'Ext.data.*'
]);
Ext.onReady(function() {
var store = new Ext.data.TreeStore({
proxy: {
type: 'ajax',
url: 'get-nodes.php'
},
root: {
text: 'Ext JS',
id: 'src',
expanded: true
},
sorters: [{
property: 'leaf',
direction: 'ASC'
}, {
property: 'fileName',
direction: 'ASC'
}]
});
var tree = new Ext.tree.TreePanel({
id:'tests',
xtype: 'check-tree',
loadMask : false,
rootVisible: false,
useArrows: true,
frame: true,
title: 'Check Tree',
width: 250,
height: 300,
animate: true,
border: false,
store: store,
renderTo: 'tree-div',
height: 300,
width:400,
listeners: {
'beforeload':function(){
tree.getEl().mask('Loading...');
},
'load':function(){
tree.getEl().unmask();
}
}
});
//实现异步加载处理
tree.body.mask('加载...');
alert('load');
//Ext.getBody().mask("数据重新加载中,请稍等");
tree.setRootNode({
text: 'Root',
expanded: true,
children: [{
text: 'Child 1',
leaf: true,
checked:true
}, {
text: 'Child 2',
children: [{
text: 'Child 1',
leaf: true
}, {
text: 'Child 2',
leaf: true
}]
}]
});
tree.body.unmask();
});