Ext.data.TreeStore

最新推荐文章于 2023-05-12 17:23:55 发布

转载最新推荐文章于 2023-05-12 17:23:55 发布 · 4.5k 阅读

文章标签：

#treepanel

ExtJS 专栏收录该内容

33 篇文章

订阅专栏

本文展示了一个使用ExtJS框架创建树形结构组件的具体实例。该示例通过Ajax加载节点数据，并采用XML作为数据源格式。同时，文章还介绍了如何配置TreeStore、TreePanel以及实现拖拽功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

研究一下 extjs的tree树形结果，已经封装的很简单了

Ext.require([

    'Ext.tree.*',

    'Ext.data.*'

]);

Ext.onReady(function() {

    var store = Ext.create('Ext.data.TreeStore', {

        proxy: {

            type: 'ajax',

            url: 'get-nodes.php',

            extraParams: {

                isXml: true

            },

            reader: {

                type: 'xml',

                root: 'nodes',

                record: 'node'

            }

        },

        sorters: [{

            property: 'leaf',

            direction: 'ASC'

        },{

            property: 'text',

            direction: 'ASC'

        }],

        root: {

            text: 'Ext JS',

            id: 'src',

            expanded: true

        }

    });

    // create the Tree

    var tree = Ext.create('Ext.tree.Panel', {

        store: store,

        hideHeaders: true,

        rootVisible: true,

        viewConfig: {

            plugins: [{

                ptype: 'treeviewdragdrop'

            }]

        },

        height: 350,

        width: 400,

        title: 'Directory Listing',

        renderTo: 'tree-example',

        collapsible: true

    });

});