Extjs树形表格用法

qq_45324420

已于 2023-05-12 17:37:31 修改

阅读量351

点赞数

文章标签：前端 javascript 开发语言

于 2023-05-12 17:23:55 首次发布

本文链接：https://blog.csdn.net/qq_45324420/article/details/130646817

版权

文章介绍了如何在Extjs中通过Ext.tree.Panel创建树形表格，强调了需设置xtype:treecolumn作为首列，并使用TreeStore作为数据存储。同时，当数据从后端加载时，需配置proxy类型为memory，并调用store.load()更新页面。若无MVVM支持，需手动处理数据变更和页面更新。

摘要由CSDN通过智能技术生成

extjs没有树形表格的概念，而是通过Ext.tree.Panel来实现树形表格，并且添加表格所具有的columns属性，首列使用 xtype: 'treecolumn',树形表格对应的store也应该为treeStore。

Ext.define('com.module.common.certificate.foldermanage.CertificateManage_TreeGrid', {
    extend: 'Ext.tree.Panel',
    flex: 1,
    width: '100%',
    frame: true,
    viewConfig: {
        stripeRows: true,
        enableTextSelection: true
    },
    title: '树形表格',
    multiSelect: true,
    useArrows: true,//true，在tree中使用Vista-style样式的箭头。
    rootVisible: false,//false，隐藏根节点。
    columns: [{
        xtype: 'treecolumn',
        text: '文件夹名称',
        flex: 1,
        sortable: true,
        dataIndex: 'folderName'
    }, {
        text: '级别',
        flex: 1,
        dataIndex: 'level',
        sortable: true
    },
    ],
    initComponent: function () {
        let me = this;
        let store = Ext.create('Ext.data.TreeStore', {
            autoLoad: true,
            fields: [],
            proxy: {
                type: 'memory',
                data: me.revertData
            }
        });
        me.store = store
        me.callParent()
    },

})

如果store的数据直接从前端加载，则应该使用如下方式，me.revertData是向后端请求回来的数据，放在当前的tree对象上

       let store = Ext.create('Ext.data.TreeStore', {
            autoLoad: true,
            fields: [],
            proxy: {
                type: 'memory',
                data: me.revertData
            }
        });

如果extjs没有自动实现MVVM，所以所有涉及到数据变更要更新页面的需求都需要调用相应的方法进行页面更新，前端静态数据的更新需要将数据塞到代理的data中，然后调用store.load()

    handleRefresh() {//需要将静态数据塞到代理的data中，然后重新load
        this.getAllFolder()//通过ajax将获取到的数据二次加工，再放在当前对象上
        this.store.setProxy({
            type: 'memory',
            data: this.revertData,
        });
        this.store.load();
    },