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'
這一行去掉就好了,很簡單不是嗎?