treeGrid的使用方法

最新推荐文章于 2024-08-23 08:48:14 发布

__王小明

最新推荐文章于 2024-08-23 08:48:14 发布

阅读量1.6k

点赞数

分类专栏： extjs

本文链接：https://blog.csdn.net/WangXiaoMing099/article/details/21716989

版权

extjs 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

store的定义：

  var menuStore = Ext.create('Ext.data.TreeStore', {
        proxy:{
            type:'ajax',
            url:'/manager/doc/index-menu'
        },
        root:{
            id:menu_id,
            text:'目录',
            expanded:true
        }
    });

data的数据类型：

[
    {
        "id": "2",
        "text": "URL规则",
        "leaf": "1"
    },
    {
        "id": "5",
        "text": "权限",
        "leaf": "1"
    },
    {
        "id": "6",
        "text": "常量",
        "leaf": "1"
    },
    {
        "id": "22",
        "text": "分表策略",
        "leaf": "1"
    }
]

view的定义：

var menu = Ext.create('Ext.tree.Panel', {
        listeners:{
            itemcontextmenu:function (me, record, item, index, event) {
                event.preventDefault();
                contextmenu.showAt(event.getXY());
            },
            itemclick:function (me, node) {
                var id = node.internalId;
                opt.load(id);
            }
        },
        columns: [
            {
                xtype: 'treecolumn', //这个xtype是treegrid的核心
                text: '菜单',
                flex: 2,
                dataIndex: 'text'
            },
            {
                text: 'ID',
                flex: 1,
                dataIndex: 'id'
            }
        ],
        region:'west',
        width:280,
        expand:true,
        store:menuStore,
        border:false
    });