首页 文章

ExtJs Tree加载序列

提问于
浏览
1

美好的一天 .

我正在用 Ext.tree.Panel 编写树控件,它从外部.json文件加载其配置,而数据从服务器加载为.json .

所以,我有这样的观点:

Ext.define('App.tree.TreeView', {
    extend: 'Ext.tree.Panel',
    ...
    initFilters: function(cfg) {
        /*several this.store.addFilter() based on cfg*/
    },   
    initComponent: function () {
        var me = this;
        me.cfg = getSomeCfgFromSomewhere();
        me.initFilters(me.cfg);
    }    
});

商店:

Ext.define('Site.widgets.tree.TreeStore', {
    extend: 'Ext.data.TreeStore',
    ...
    proxy: { 
        type: App.cfg.proxy, 
        reader: { type: 'json', rootProperty: 'data.children' }, 
        format: App.cfg.proxy.urlEnd, 
        url: App.cfg.treeRoot, 
        noCache: false
    }
    lazyFill: true,

    rootVisible: true,
    root: {
        full_path: '/', /*set as idProperty in model*/
        'display-name': 'root',
        expanded: true
    },
});

问题是:我的根在商店中显式设置,因为 expanded: true 而加载其内容 . 但是,只有这些内容显示在树中,没有根本身 . 删除过滤后,加载tre即可 .

可能的原因:从调试ext-all-debug.js中的Sencha代码:在商店开始加载数据之前调用_s678652_,因此它在加载数据之前添加过滤器,当root仍为空时,然后调用

onNodeFilter: function(root, childNodes) {
    var me = this,
        data = me.getData(),
        toAdd = [];
    if (me.getRootVisible()) {
        if (childNodes.length) {
            toAdd.push(root);
        } else {
            root.set('visible', false, me._silentOptions);
        }
    }
    ...
}

,即root被设置为不可见,因为它仍然是空的,只有root的子项被加载 .

问题是:我的过滤器初始化中是否存在初始设计错误,我该如何解决?

2 回答

  • 1

    考虑到问题是在商店开始加载数据之前调用了视图的initComponent,我会尝试:

    Calling initFilters inside store load event, like this:

    Ext.define('Site.widgets.tree.TreeStore', {
        extend: 'Ext.data.TreeStore',
        ...
        proxy: { 
            type: App.cfg.proxy, 
            reader: { type: 'json', rootProperty: 'data.children' }, 
            format: App.cfg.proxy.urlEnd, 
            url: App.cfg.treeRoot, 
            noCache: false
        }
        lazyFill: true,
    
        rootVisible: true,
        root: {
            full_path: '/', /*set as idProperty in model*/
            'display-name': 'root',
            expanded: true
        },
        listeners : {
            load : function() {
                 //Call initFilters. 
                 //initFilters should call addFilter just once, 
                 //with array of filters as first parameter, 
                 //to avoid filtering the hole tree more than once!
            }
        }
    });
    

    这种方法有一个问题,因为你必须处理initFilters cfg参数范围 .

  • 1

    好吧,事实证明答案的一部分就在问题内部:我能够通过简单地在我的商店内重载 onNodeFilter() 方法来解决这个问题,因为我知道我想要始终显示根 . 如果有人能提出更好的建议 - 请成为我的客人 .

相关问题