High Performance Large List component - UxBufferedList

[Dannydekr]

Since my list is getting bigger and bigger, I forced myself to use this great extension. Seems to work very good, I only have a problem with the onItemdisclosure. It simply won't work. It will not go to the detailspane at all, I can't seem to figure out why this is the case:

 
Ext.ns('ShotjesApp'); Ext.setup({
        onReady : function() {
            Ext.regModel('Contact', {
            fields: ['Naam', 'Inhoud']
        });


            var baseConfig = {
               itemTpl: '<div><p><strong>{Naam}</strong></p></div>',
               grouped: true,        // optional
               indexBar: true,        // optional
               maxItemHeight: 75,    // must specify
               blockScrollSelect: true,
               batchSize: 10, // not required, may require tweaking for some platforms

                store: new Ext.data.Store({
                    model: 'Contact',
                    sorters: 'Naam',
                    getGroupString : function(record) {
                    return record.get('Naam')[0];
    },

//                    data: ListTestData
                })
                
            };
            

            ShotjesApp.listPanel = new Ext.ux.BufferedList(Ext.apply(baseConfig, {
                    fullscreen: true,
                    id: 'listpanel',
                    onItemDisclosure: function(record) {
                    var naam = record.data.Naam;
                    ShotjesApp.detailPanel.update(record.data);
                    ShotjesApp.Viewport.setActiveItem(ShotjesApp.detailPanel, {type:'fade'}); 
                    ShotjesApp.detailPanel.dockedItems.items[0].setTitle(naam);         
            }
                }));
                
            ShotjesApp.detailPanel = new Ext.Panel({
            id: 'detailpanel',
            tpl: '{Inhoud}',
            layout: 'fit',
            scroll: false,
            dockedItems: [{
                xtype: 'toolbar',
                dock: 'top',
                items: [{
                        text: 'terug',
                        ui: 'back',
                        handler: function() {
                        ShotjesApp.Viewport.setActiveItem('listpanel', {type:'fade'});
                        }
                    }]
        }], 
});

ShotjesApp.Viewport = new Ext.Panel ({
            fullscreen: true,
            layout: 'fit',
            items: [ShotjesApp.listPanel, ShotjesApp.detailPanel]
        });
            
            // test to see if data load is handled correctly
            ShotjesApp.listPanel.store.loadData(ListTestData);
        }
    });

[Surykat]

You need to add a support (code below) for this event in initComponent() method of uxBuffList.

// onItemDisclosure support
    	this.itemTplDelayed = '<tpl for="."><div class="x-list-item"><div class="x-list-item-body">' + this.itemTpl + '</div>';
    	if (this.onItemDisclosure) {
    		this.itemTplDelayed += '<div class="x-list-disclosure"></div>';
    	}
    	this.itemTplDelayed += '</div></tpl>';
    	this.itemTplDelayed = new Ext.XTemplate(this.itemTplDelayed).compile();
    	// end onItemDisclosure support

[Dannydekr]

Edit: went on another route

[Dannydekr]

Edit: Fixed the problem that it wouldn't show (just needed to moved the main JS file a few rows). Also fixed the problem it wouldn't show any items after 50 items. Needed to update the main JS file with some code I found here.

Now the only big problem remains. And that is the onitemdisclosure that just would not work at all, it is working when I make it the standard ext.List. And yes, the onItemDisclousre code is in the uxBufferlist.js file.

I can press all I want, it just won't go to the details pane..

This is my code:

(the iOS stuff at the top is to reduce the loadingtime/white flash problem)

Ext.ns('ShotjesApp');Ext.setup({
    onReady: function() {
    ShotjesApp.Main.init();
    }
});
if (Ext.is.iOS && Ext.is.Phone) {
    Ext.Viewport.init = function(fn, scope) {
        var me = this,
            stretchSize = Math.max(window.innerHeight, window.innerWidth) * 2,
            body = Ext.getBody();
        me.updateOrientation();
        this.initialHeight = window.innerHeight;
        this.initialOrientation = this.orientation;
        body.setHeight(stretchSize);
        Ext.defer(function() {
            me.scrollToTop();
            if (fn) {
                fn.apply(scope || window);
            }
            me.updateBodySize();
        }, 50);
    };
}


ShotjesApp.listPanel = new Ext.ux.BufferedList ({
    store: ListStore,
    id: 'listpanel',
    layout: 'fit',
    
    grouped: true,        // optional
        indexBar: true,        // optional
      maxItemHeight: 75,    // must specify
      blockScrollSelect: true,
    batchSize: 10, // not required, may require tweaking for some platforms


    itemTpl: '<div><p><strong>{Naam}</strong></p></div>',
    
    onItemDisclosure: function(record) {
        var naam = record.data.Naam;
                ShotjesApp.detailPanel.update(record.data);
                ShotjesApp.listContainer.setActiveItem(ShotjesApp.detailPanel, {type:'fade'}); 
        ShotjesApp.detailPanel.dockedItems.items[0].setTitle(naam);    
                    
            }
});
ShotjesApp.detailPanel = new Ext.Panel({
            id: 'detailpanel',
            tpl: '{Inhoud}',
            layout: 'fit',
            scroll: false,
            dockedItems: [{
                xtype: 'toolbar',
                dock: 'top',
            items: [{
                        text: 'terug',
                        ui: 'back',
                        handler: function() {
                        ShotjesApp.listContainer.setActiveItem('listpanel', {type:'fade'});
                        }
                    }]
           
        }], 
});
ShotjesApp.listContainer = new Ext.Panel ({
    layout: 'card',
    items: [ShotjesApp.listPanel],
    
})
ShotjesApp.mainToolbar = new Ext.TabPanel ({
    flex: 1,
    xtype: 'tabpanel',
    tabBar: {
        dock: 'bottom',
        layout: {
            pack: 'center'
        }
    },
    ui: 'dark',
    cardSwitchAnimation: {
        type: 'fade',
        cover: true
    },
        scroll: 'vertical',
    items: [{
        title: 'Shotjes',
        iconCls: 'home',
    cls: 'card',
        layout: 'fit',
        items: ShotjesApp.listContainer
    }, {
        title: 'Informatie',
        iconCls: 'bookmarks',
        layout: 'fit',
        cls: 'card',
        html: 'Over deze applicatie',
        
    }]
})
ShotjesApp.Main = {
    init : function() {
        new Ext.Panel({
            fullscreen: true,
            layout: {
                type: 'fit',
            },
            items: [ShotjesApp.mainToolbar]    
        });
    }
};

The UxBufList.JS I use came from the previous page and is provided by Nikkelmann. It contains all the bug fixes and contains the ondisclosureitem code.


EDIT: Seemed that I fixed the onDisclosureItem problem by adding this code in the index.js. I forgot I removed the disclosure button and changed my ext.list so the whole row would be clickable

Ext.override(Ext.List, {
    afterRender: function(){
        Ext.List.superclass.afterRender.call(this);
         if (this.onItemDisclosure) {
            this.mon(this.getTargetEl(), 'singletap', this.handleItemDisclosure, this, {
                delegate: '.x-list-item-body'
            });
        }
        
    }
});

Hopefully this will be it.

Edit:

Also, the code for the onItemDisclosure breaks the Indexbar. Not a big problem for me, I don't' want to use it, but can of course be a problem for others.

This is the Javascript error: Uncaught TypeError: Cannot call method 'getCount' of undefined (line 634).

Edit:

I also notice some lag when scrolling fast through the list. And when I go to the detail pane (fade) and go back again, the fade transition is weird. It flickers and it seems the Buflist is loaded before the fade ends.

Edit:

Seems that all animations between the panels and the Buflist is weird. Doesn't happen in Chrome or the iPhone/iPad simulator. Only on my iPhone 4 device. Maybe someone knows how to fix this, I'm lost on this one.

[Dannydekr]

Hello
I posted in the old thread so I will also post my problem here.

I have problems with the performance using this list:

var baseConfig = {
    itemTpl: new Ext.XTemplate(
        '<tpl for=".">',
        '<div class="recipeList">',
        '<div class="recipeListImage"><img src="{image}" /></div>',
        '<div class="recipeContent">',
        '<span class="recipeName">{name}</span>',
        '<span class="recipeText">{teaser}</span>',
        '<div class="recipeTime">',
        '<em>Tid:</em>',
        '<i>{time}</i>',
        '<em>&nbsp;|&nbsp;</em>',
        '<span class="oneStar"></span>',
        '</div>',
        '</div>',
        '</div>',
        '</tpl>',
        {
            compiled: true
        }
    ),
    maxItemHeight: 130,
    blockScrollSelect: true,
    batchSize: 15,
    minimumItems: 15,
    store: store //(100 items)
};


var list = new Ext.ux.BufferedList(Ext.apply(baseConfig, {
    width: 500,
    height: 700
}));

When I scroll fast it lags and "flickers" (I think its when loading new components)
I have tried to increment batchSize and minimumItems to 25 but with same result.
Is it because i have images and other stuff on the items since it performance so bad or what am i doing wrong?

Yeah that sounds like the problem I have. I don't use any images in the item list though. I do use a background-gradient, but when I disabled it it's still laggy like you describe. I guess you also have the same problems with the animations as I have. I wonder if you also have it on the iDevice only, and not in the browser/simulator.

I tried to figure it out for a few hours, but I can't seem to find the problem. The Ext.List component doesn't have this problem (however, loading times when clicking an item are horrible, so Bufferedlist is still the best solution).

Still hope someone can help.

[pat777]

Hi,


first of all, I want to say thank you for sharing this code with the community - it really helped me a lot!


Since I needed a component which deals with large data sets and also handles updates on the store in the view accordingly, I took a closer look at the BufferedList but I ran into some issues with the control: When the bound store is updated within a timer, the refresh method of BufferedList is called, which does not seem to handle the scroll position in the right way. That sometimes leads to a "white list scenario" (it seems to scroll into topProxy and/or bottomProxy area in some situations). I wrote some code to fix that issue (just trying to hit the right scroll position in refresh() function), but it does not seem to help in every update scenario - there were always situations, when the scroll position of the list was unexpectedly outside the bounds of listContainer element .


So, after a lot of testing with BufferedList I decided to take some useful parts of the Ext.ux.BufferedList implementation and write my own component "Ext.ux.VirtualList" which definitely does not offer as many features as Ext.ux.BufferedList, but it handles updates on the store a bit better (IMO). The whole thing starts as an education project (I just wanted to learn writing my own components in Sencha Touch and implement my own concept of a list control ) but after a while it turns out to be useful in one of my projects, so maybe someone out there considers this code helpful too . My List implementation should be an alternative, not a replacement - there are still many features missing in my implementation. Anyway: I want to share this code with you - maybe it is useful for other people like the BufferedList was useful to me in first place.


You can find the implementation of my list control (which I called "Ext.ux.VirtualList") here: https://github.com/pat777/VirtualList.


Hope you enjoy it! Have a nice day everybody!

[Surykat]

Is there any roadmap to rebuild that component for Sencha Touch 2??

[MahlerFreak]

Is there any roadmap to rebuild that component for Sencha Touch 2??

Hi all, I've been off on other life missions for a few months. I will take a look at porting the list to latest sencha touch this coming week, as well as the number of other issues mentioned in this thread.

[SunboX]

Great news!

Btw, ST2 does a really good job with large lists. ;o) But would be nice to have this component for really laaaarge lists.

greetings Sunny

[ssameer82]

Thanks for providing such a component. I tried this for populating large amount of data in a list from JSON STORE (more than 300) but after scrolling down (above 100 data's) not showing it in the list and getting scrolled with blank screen. Please help me out on this..