Extjs treepanel 配置ajax加载数据的treestore无法加载数据bug

使用mvc(或者说mvvm吧)方式使用Extjs6框架,单独写的treestore配置给treepanel无法正常远程加载数据.

 

然后搜索到这样一篇博文:

https://www.oschina.net/question/189633_2142590

 

这位博主找到了bug出处---treepanel源代码中的applyStore()方法自动把treestore的proxy覆盖为了memory类型,所以proxy无法远程加载数据,相关代码如下:

applyStore: function(store) {
        // private
        // Note that this is not a config system applier. store is not yet a config.
        // It just does the job of an applier and converts a config object to the true value
        // for the setter to use.
        var me = this;

        if (Ext.isString(store)) {
            store = me.store = Ext.StoreMgr.lookup(store);
        } else if (!store || !store.isStore) {
            store = Ext.apply({
                type: 'tree'
                // proxy: 'memory'
            }, store);
            if (me.root) {
                store.root = me.root;
            }
            if (me.fields) {
                store.fields = me.fields;
            } else if (me.model) {
                store.model = me.model;
            }
            if (me.folderSort) {
                store.folderSort = me.folderSort;
            }
            store = me.store = Ext.StoreMgr.lookup(store);
        } else if (me.root) {
            store = me.store = Ext.data.StoreManager.lookup(store);
            store.setRoot(me.root);
            if (me.folderSort !== undefined) {
                store.folderSort = me.folderSort;
                store.sort();
            }
        }

        return store;
    }

 

博主提出的解决办法是在treepanel中配置store写明proxy,具体如下:

Ext.define('moke.view.main.MenuTree', {
    extend : 'Ext.tree.Panel',
    xtype : 'menutree',

    requires : [ 'moke.store.Menu' ],

    border : false,
    hrefTarget : 'contentpanel',
    rootVisible : true,
    store : {
        type: 'menu',
        proxy: {
            type: 'ajax',
            url : 'data/menus.json',
            reader : {
                type : 'json'
            }
        }
    }
});

这样可以解决问题,但似乎不是太方便,加大了耦合性,使用起来也会于往常习惯不同,我更倾向于在一个包中调整框架源码,应用引用这个包就好了.

 

其实extjs6对源码进行调整也非常简单,可以见到的ext的工程目录结构中有一个override文件夹,在其中创建与想要调整的源码文件相对应的文件即可,

例如为了解决上述问题,我在该文件夹下创建tree->Panel.js文件,其中代码如下:

Ext.define('Zlf.overrides.tree.Panel', {
    override: 'Ext.tree.Panel',

    applyStore: function(store) {
        // private
        // Note that this is not a config system applier. store is not yet a config.
        // It just does the job of an applier and converts a config object to the true value
        // for the setter to use.
        var me = this;

        if (Ext.isString(store)) {
            store = me.store = Ext.StoreMgr.lookup(store);
        } else if (!store || !store.isStore) {
            store = Ext.apply({
                type: 'tree'
                // proxy: 'memory'
            }, store);
            if (me.root) {
                store.root = me.root;
            }
            if (me.fields) {
                store.fields = me.fields;
            } else if (me.model) {
                store.model = me.model;
            }
            if (me.folderSort) {
                store.folderSort = me.folderSort;
            }
            store = me.store = Ext.StoreMgr.lookup(store);
        } else if (me.root) {
            store = me.store = Ext.data.StoreManager.lookup(store);
            store.setRoot(me.root);
            if (me.folderSort !== undefined) {
                store.folderSort = me.folderSort;
                store.sort();
            }
        }

        return store;
    }
});

 

没错,就仅仅把

// proxy: 'memory'
这一行去掉就好了,很简单不是吗?