Extjs树形表格用法

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();
    },