解决Ext4.2新版的Tree的一个小问题

来源:互联网 发布:linux系统开发工程师 编辑:程序博客网 时间:2024/04/30 12:13

   最近要实现一个小控件,为了追求效果,采用了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();
});