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

      0  

    Default


    Hi Benjamin,

    Sorry I didn't see this sooner. I will take a look at the failure to render on read().

    And thank you for the item disclosure fix - I'll incorporate that in my next "release".

    Scott

  2. #12
    Ext JS Premium Member
    Join Date
    Dec 2010
    Posts
    25
    Vote Rating
    0
    benjamin.jaton is on a distinguished road

      0  

    Default


    Actually the dockedItems are fine I just made a mistake in my code.

    That would be great if you could have a look at the read() items update.
    Here is a small testcase for that :

    Code:
    Ext.reg('mylist', Ext.ux.BufferedList);
    
    Ext.setup({
        onReady: function(){
            Ext.regModel('Contact', {
                fields: ['firstName', 'lastName']
            });
            
            var data = [
            	{firstName:'John', lastName:'Lenon'},
            	{firstName:'Frank', lastName:'Zappa'}
            ];
            
            var store = new Ext.data.JsonStore({
                model: 'Contact',
                data: data
            });
            
            new Ext.TabPanel({
                fullscreen: true,
                items: [{
                    xtype: 'panel',
                    title: 'MyPanel',
                    dockedItems: [{
                        xtype: 'button',
                        text: 'filter list',
                        handler: function(){
                            Ext.getCmp('mylist').store.filter('firstName', 'John');
                        }
                    }]
                }, {
                    id: 'mylist',
                    title: 'MyList',
                    xtype: 'mylist',
                    itemTpl: '{firstName} {lastName}',
                    store: store
                }]
            });
        }
    });
    Steps :
    - Go to MyList, check that there are 2 items
    - Go back to MyPanel and click on the button ( the list should have 1 item now )
    - Go back to MyList, there is nothing anymore

    Note : replacing the first line Ext.reg('mylist', Ext.ux.BufferedList);
    by Ext.reg('mylist', Ext.List);
    makes it work

  3. #13
    Sencha User
    Join Date
    Jun 2010
    Posts
    66
    Vote Rating
    0
    dontbugme is on a distinguished road

      0  

    Default


    First of great job on the list, it works very well apart from one issue.

    After rendering the list once, when I reload the store the list appears blank - any idea how to solve this?

    Basically what I am doing is, when showing the bufferedList the store is loading the data from a proxy with a letter as an argument in order to only load entries starting with this specific letter. Now this works on the first try but on the second I get the error "Uncaught TypeError: Cannot call method 'call' of undefined"

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

      0  

    Default


    Benjamin,

    Thanks for the example, I have some time put aside to work on this tomorrow.

    Scott

  5. #15
    Ext JS Premium Member
    Join Date
    Dec 2010
    Posts
    25
    Vote Rating
    0
    benjamin.jaton is on a distinguished road

      0  

    Default


    Hi Scott,

    no problem, if you need any early testing let me know.

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

      0  

    Default Bug fix

    Bug fix


    Benjamin,

    Attached is a new version of UxBufList, with a fix for your update bug.

    Edit: fix is now in the first post of the thread, along with subsequent fixes.

    Regards,

    Scott

  7. #17
    Ext JS Premium Member
    Join Date
    Dec 2010
    Posts
    25
    Vote Rating
    0
    benjamin.jaton is on a distinguished road

      0  

    Default


    Hi Scott,

    First, thank you so much for taking the time to do this, it is much appreciated.

    So about the newer version of the code, it does fix the test case I sent. However a read() call on the store will still empty the list out. So I created a new testcase using a json store which is closer from what the original problem I had :

    Code:
    Ext.reg('mylist', Ext.ux.BufferedList); // would work with Ext.List
    
    Ext.setup({
        onReady: function(){
            Ext.regModel('Contact', {
                fields: ['firstName', 'lastName']
            });
            
            var store = new Ext.data.Store({
                model: 'Contact',
                proxy: {
                    type: 'ajax',
                    url : 'data.js',
                    reader: {
                        type: 'json'
                    }
                },
                data : [
                    {firstName:'John', lastName:'Lenon'},
                    {firstName:'Frank', lastName:'Zappa'},
                    {firstName:'Led', lastName:'Zeppelin'}
                ]
            });
            
            new Ext.TabPanel({
                fullscreen: true,
                items: [{
                    xtype: 'panel',
                    title: 'MyPanel',
                    dockedItems: [{
                        xtype: 'button',
                        text: 'read new data',
                        handler: function(){
                            Ext.getCmp('mylist').store.read();
                        }
                    }]
                }, {
                    id: 'mylist',
                    title: 'MyList',
                    xtype: 'mylist',
                    itemTpl: '{firstName} {lastName}',
                    store: store
                }]
            });
        }
    });
    the testcase requires a data.js available :

    Code:
    [
    	{"firstName":"Charlie", "lastName":"Chaplin"},
    	{"firstName":"Sarah", "lastName":"Bernhardt"}
    ]
    From what I can see, the refresh() method in UxBufList gets called with this.onUpdate().

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

      0  

    Default


    Benjamin,

    Thanks again for a clear, simple example. The attached fix fixes both of your issues, and hopefully a broad category of others as well. I was trying to be excessively clever in terms of keeping the user's scroll position when data changes occur; this really wasn't very sensible under the kind of wholesale data change scenarios you are doing.

    Edit: this fix is now in the file attached to the first post in the thread, UxBufList014.zip.

    Regards,

    Scott

  9. #19
    Ext JS Premium Member
    Join Date
    Dec 2010
    Posts
    25
    Vote Rating
    0
    benjamin.jaton is on a distinguished road

      0  

    Default


    Hi Scott,

    Your fixes work great. I am now using it in one of my app
    Thank you so much!

    - Playing with it a bit I found an interesting behavior when you change the active Component while scrolling in the list :
    1) Go to 'MyList' tab
    2) scroll hard and quickly tap on the 'MyPanel' tab
    3) wait a second (for the scrolling to complete)
    4) go back to the list => no item rendered

    Note : If you scroll after 4), the items show up

    Here is a simple testcase as usual :

    Code:
    Ext.reg('mylist', Ext.ux.BufferedList);
    
    var data = []
    for (var i=0; i<600; i++) data.push({firstName: 'John'+i, lastName: 'Wayne'})
    
    Ext.setup({
        onReady: function(){
            Ext.regModel('Contact', {
                fields: ['firstName', 'lastName']
            });
            
            var store = new Ext.data.Store({
                model: 'Contact',
                data : data
            });
            
            new Ext.TabPanel({
              layout:'fit',
              fullscreen: true,
              scroll:'vertical',
              items: [{
                title: 'MyPanel',
                xtype: 'panel'
              },{
                title: 'MyList',
                fullscreen: true,
                xtype: 'mylist',
                itemTpl: '{firstName} {lastName}',
                store: store
              }]
            });
        }
    });
    What I did in my app was enabling/disabling the scroller when I switch panels. But I guess there is a better solution.

    Do you think that this component has any chance to be added to the framework ?
    I'd love to have it included since it is way more efficient than the default implementation !

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

      0  

    Default


    Benjamin,

    I'll take a look at the component switching issue. I suspect it will be simple to fix. Thanks again for making a clear test case. I especially like the John Wayne data theme - perhaps you can come up with a SASS/CSS3 visual theme to match?

    I wouldn't think this is likely to end up in the base framework. The way I'm rendering things here is outside the paradigm of the base framework components, and that has some consequences. For instance, the getNode function will always return the DOM node for a record index associated with a visible node. But it can return null for an index of a node outside the current display "window". For many applications, this has no consequence, but for some it might. There are probably some other little "gotchas" like the latest one you found. So this extension is definitely useful for applications that must perform with large lists, but it may not meet the total criteria for consistency that the Sencha folks rightly ask of all their product. As a software architect by background, I get that.

    I'd also guess that the percentage of people developing on Touch that must handle large lists is relatively small. And if I were a Sencha developer/architect, I'd be hoping that advances in hardware and OS, combined with optimizations and tweaks in the Sencha scrolling code itself, will eventually obviate the need for specialized components like UxBufList.

    Meanwhile, those of use who need it can use components like UxBufList where they work for us. This is the great advantage provided a large community developing and sharing extensions for each other.

    Regards,

    Scott

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