1. #61
    Sencha User
    Join Date
    Aug 2011
    Posts
    6
    Vote Rating
    0
    Dannydekr is on a distinguished road

      0  

    Default


    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:

    Code:
     
    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);
            }
        });

  2. #62
    Sencha User Surykat's Avatar
    Join Date
    Jul 2011
    Location
    BIALYSTOK, Poland
    Posts
    58
    Vote Rating
    1
    Surykat is on a distinguished road

      0  

    Default


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

    Code:
    // 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

  3. #63
    Sencha User
    Join Date
    Aug 2011
    Posts
    6
    Vote Rating
    0
    Dannydekr is on a distinguished road

      0  

    Default


    Edit: went on another route

  4. #64
    Sencha User
    Join Date
    Aug 2011
    Posts
    6
    Vote Rating
    0
    Dannydekr is on a distinguished road

      0  

    Default


    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)

    Code:
    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
    Code:
    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.

  5. #65
    Sencha User
    Join Date
    Aug 2011
    Posts
    6
    Vote Rating
    0
    Dannydekr is on a distinguished road

      0  

    Default


    Quote Originally Posted by hotdp View Post
    Hello
    I posted in the old thread so I will also post my problem here.

    I have problems with the performance using this list:
    Code:
    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.

  6. #66
    Sencha User
    Join Date
    Sep 2011
    Posts
    2
    Vote Rating
    0
    pat777 is on a distinguished road

      0  

    Default


    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!

  7. #67
    Sencha User Surykat's Avatar
    Join Date
    Jul 2011
    Location
    BIALYSTOK, Poland
    Posts
    58
    Vote Rating
    1
    Surykat is on a distinguished road

      0  

    Default


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

  8. #68
    Ext JS Premium Member
    Join Date
    Aug 2007
    Location
    Portland, OR
    Posts
    61
    Vote Rating
    0
    MahlerFreak is on a distinguished road

      0  

    Default


    Quote Originally Posted by Surykat View Post
    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.

  9. #69
    Sencha User SunboX's Avatar
    Join Date
    Mar 2010
    Posts
    238
    Vote Rating
    28
    SunboX has a spectacular aura about SunboX has a spectacular aura about

      0  

    Exclamation


    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

  10. #70
    Sencha User
    Join Date
    Nov 2011
    Posts
    5
    Vote Rating
    0
    ssameer82 is on a distinguished road

      0  

    Default Not showing full data in the list and getting blank screen while scrolling down

    Not showing full data in the list and getting blank screen while scrolling down


    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..

Similar Threads

  1. tobiuGrid - High Performance EditorGrid
    By tobiu in forum Community Discussion
    Replies: 23
    Last Post: 21 Dec 2010, 8:10 PM
  2. ExtJS Grid, Poor Performance with High Frequency Updates?
    By pkoa in forum Ext 3.x: Help & Discussion
    Replies: 3
    Last Post: 17 Sep 2010, 5:36 AM
  3. Interesting high performance grid
    By mankz in forum Community Discussion
    Replies: 7
    Last Post: 21 Aug 2010, 1:59 PM
  4. ExtJS performance on large forms
    By berend in forum Ext 2.x: Help & Discussion
    Replies: 5
    Last Post: 12 May 2010, 5:54 AM
  5. [FIXED] [1.1.4] ComboBox PagingToolBar to high in the dropdown list
    By mwojciechowski in forum Ext GWT: Bugs (1.x)
    Replies: 3
    Last Post: 26 Nov 2008, 9:12 PM

Thread Participants: 45

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi