Update list dom only if list displayed

问题:

Sometimes we use one store for few views(list, carousel,dataviews) and when we refresh(load, filter) store data, dom of all view that use this store will be rebuild, but some views is not displayed in this time, and may be will not show with these data. How we can refresh list dom only if it displayed, not every time when it store refresh? Issue examle

Ext.define("Test.view.Main", {
    extend: 'Ext.tab.Panel',
    config: {
        tabBarPosition: 'bottom',

        items: [ ]
    },

    constructor : function(){
        this.callParent(arguments);
        var store = Ext.create('Ext.data.Store',{
                data :[
                    {title : 'One'},
                    {title : 'Two'},
                    {title : 'Three'}
                ]
            }),
            firstList = Ext.create('Ext.List',{
                title : 'tab1',
                store : store,
                itemTpl : '{title}',
                onItemDisclosure : function(){
                    store.add({title : 'Four'});
                }
            }),

            secondList = Ext.create('Ext.List',{
                title : 'tab2' ,
                store : store,
                itemTpl : '{title}'

            }),

             thirdList = Ext.create('Ext.List',{
                title : 'tab3',
                store : store,
                itemTpl : '{title}'

            });

        this.add([
            firstList,
            secondList,
            thirdList
        ]) ;
    }
});

When tap on item in the first list, in store will be added new item. And dom of all list will be change although second and third list not displayed I see one option. Create one main store and create separate stores for each views. And when view show fill it store from Main store. But it look not good. Any other ideas?

回答1:

As far as I know, there is no "out-of-the-box" solution. The docs say that the refresh event is preventable, but I haven't tested that theory.

One other idea would be to look at the dataview source and override parts of it.

The starting point would probably be to look at the store event hooks that you can find there:

storeEventHooks: {
    beforeload: 'onBeforeLoad',
    load: 'onLoad',
    refresh: 'refresh',
    addrecords: 'onStoreAdd',
    removerecords: 'onStoreRemove',
    updaterecord: 'onStoreUpdate'
}

However it would probably be tedious work perfecting it.

On the other hand, your DOM shouldn't be refreshed for the other lists when adding a new record, it should only add a new list item to each list so disabling the addrecords event and then doing a complete refresh of the other lists when they are displayed will probably be more ineffective?