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说明为叶子节点
        }]
    }
});