ExtJS4學習筆記十一 樹控件的使用

一、樹面板簡單示例 

var tree = Ext.create('Ext.tree.Panel', {
    title: '樹面板簡單示例',
    width : 150,
    height : 100,
    renderTo: Ext.getBody(),
    root: {
        text: '樹根',//節點名稱
        expanded: true,//默認展開根節點
        children: [{
            text: '節點一',//節點名稱
            leaf: true//true說明爲葉子節點
        }, {
            text: '節點二',//節點名稱
            leaf: true//true說明爲葉子節點
        }]
    }
});

二、多列樹示例 

var tree = Ext.create('Ext.tree.Panel', {
    title: 'TreeGrid（多列樹示例）',
    renderTo: Ext.getBody(),
    width : 200,
    height : 120,
    fields: ['name', 'description'],
    columns: [{
        xtype: 'treecolumn',//樹狀表格列
        text: '名稱',
        dataIndex: 'name',
        width: 100,
        sortable: true
    }, {
        text: '描述',
        dataIndex: 'description',
        flex: 1,
        sortable: true
    }],
    root: {
        name: '樹根',
        description: '樹根的描述',
        expanded: true,
        children: [{
            name: '節點一',
            description: '節點一的描述',
            leaf: true
        }, {
            name: '節點二',
            description: '節點二的描述',
            leaf: true
        }]
    }
});

三、樹面板中的複選框示例 

var tree = Ext.create('Ext.tree.Panel', {
    title: '複選框示例',
    width : 150,
    height : 100,
    renderTo: Ext.getBody(),
    root: {
        text: '樹根',//節點名稱
        expanded: true,//默認展開根節點
        children: [{
            text: '節點一',//節點名稱
            checked : true,//默認選中
            leaf: true//true說明爲葉子節點
        }, {
            text: '節點二',//節點名稱
            checked : false,//默認不選中
            leaf: true//true說明爲葉子節點
        }]
    }
});