博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

extjs4 tree

Posted on 2011-11-09 23:30  linFen  阅读(5550)  评论(0)  编辑  收藏  举报

一、树面板简单示例

Javascript代码 复制代码 收藏代码
  1. var tree = Ext.create('Ext.tree.Panel', {   
  2.     title: '树面板简单示例',   
  3.     width : 150,   
  4.     height : 100,   
  5.     renderTo: Ext.getBody(),   
  6.     root: {   
  7.         text: '树根',//节点名称   
  8.         expanded: true,//默认展开根节点   
  9.         children: [{   
  10.             text: '节点一',//节点名称   
  11.             leaf: true//true说明为叶子节点   
  12.         }, {   
  13.             text: '节点二',//节点名称   
  14.             leaf: true//true说明为叶子节点   
  15.         }]   
  16.     }   
  17. });  
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说明为叶子节点
	    }]
	}
});



二、多列树示例

Javascript代码 复制代码 收藏代码
  1. var tree = Ext.create('Ext.tree.Panel', {   
  2.     title: 'TreeGrid（多列树示例）',   
  3.     renderTo: Ext.getBody(),   
  4.     width : 200,   
  5.     height : 120,   
  6.     fields: ['name', 'description'],   
  7.     columns: [{   
  8.         xtype: 'treecolumn',//树状表格列   
  9.         text: '名称',   
  10.         dataIndex: 'name',   
  11.         width: 100,   
  12.         sortable: true  
  13.     }, {   
  14.         text: '描述',   
  15.         dataIndex: 'description',   
  16.         flex: 1,   
  17.         sortable: true  
  18.     }],   
  19.     root: {   
  20.         name: '树根',   
  21.         description: '树根的描述',   
  22.         expanded: true,   
  23.         children: [{   
  24.             name: '节点一',   
  25.             description: '节点一的描述',   
  26.             leaf: true  
  27.         }, {   
  28.             name: '节点二',   
  29.             description: '节点二的描述',   
  30.             leaf: true  
  31.         }]   
  32.     }   
  33. });  
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
        }]
    }
});



三、树面板中的复选框示例

Javascript代码 复制代码 收藏代码
  1. var tree = Ext.create('Ext.tree.Panel', {   
  2.     title: '复选框示例',   
  3.     width : 150,   
  4.     height : 100,   
  5.     renderTo: Ext.getBody(),   
  6.     root: {   
  7.         text: '树根',//节点名称   
  8.         expanded: true,//默认展开根节点   
  9.         children: [{   
  10.             text: '节点一',//节点名称   
  11.             checked : true,//默认选中   
  12.             leaf: true//true说明为叶子节点   
  13.         }, {   
  14.             text: '节点二',//节点名称   
  15.             checked : false,//默认不选中   
  16.             leaf: true//true说明为叶子节点   
  17.         }]   
  18.     }   
  19. });