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

      0  

    Default High Performance Large List component - UxBufferedList

    High Performance Large List component - UxBufferedList


    This is the first functionality-complete release of the list component I and others have been working on in this thread:

    http://www.sencha.com/forum/showthre...dation-thread/

    Ext.ux.BufferedList is designed to be used in place of the standard Ext.List component, and supports essentially all Ext.List functions and configuration parameters, while providing the following enhancements and changes:

    - Adequate scrolling performance with large data sets. The attached examples use a data array of about 1400 items, while still providing similar scroll performance to Ext.List. This is accomplished by rendering a "sliding window" of list items based on current scroll position, rather than rendering all list items.
    - Independent support for indexBar and group headers. By setting the standard list config parameter "grouped" to true, and the extension config parameter useGroupHeaders to false, you can use an index bar without having group headers, as some native iOS applications do. Obviously, setting useGroupHeaders to true gives you standard group headers.
    - The configuration parameter "blockScrollSelect" is provided. If set to true, this prevents item selection while the list is still scrolling, so you can tap the list to stop scroll without invoking a selection - again, similar to native iOS. See the attached examples.

    The only non-intuitive configuration is a parameter called "maxItemHeight". This is set at 85 pixels by default. If you have a significant number of items in the list which will be greater than this height, you should increase the value at least to the 90th percentile or so item height, to avoid potential problems with long scrolls to the top of the list. Also, itemTpl should be specified only as a string, not as an XTemplate, although this restriction may be removed soon.

    I've licensed this work under either GPL or MIT, which I believe should allow for any forseeable reuse.

    Please let me know of any bugs, enhancements, etc.

    The attached file contains both the UxBufList.js file, and three examples demonstrating regular, indexBar, and grouped with headers lists. You will need to edit the html files to point to your sencha touch library.

    Edit: I have joined the 21st Century and will not be posting updates in zip file format any longer. The latest will always be found here:

    https://github.com/Lioarlan/UxBufLis...ouch-Extension
    Attached Files
    Last edited by MahlerFreak; 8 Mar 2011 at 2:25 PM. Reason: Add albumdata.js back in for example

  2. #2
    Touch Premium Member
    Join Date
    Jun 2010
    Posts
    324
    Vote Rating
    2
    profunctional is on a distinguished road

      0  

    Default


    Hi, thanks for this. In the BufListGrpHdr example, if I set the indexBar: false, it breaks. How do we run the example without the index bar?

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

      0  

    Default


    BufList.html is set up to work without groups or index bar.

    Edit: did you want group headers but not index bar? I honestly didn't think of that, but it could probably be done pretty easily ...

  4. #4
    Sencha User SunboX's Avatar
    Join Date
    Mar 2010
    Posts
    239
    Vote Rating
    27
    SunboX will become famous soon enough SunboX will become famous soon enough

      0  

    Default


    Could this be used to build a " High Performance Large PICKER component" too? If so, where should i start?

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

      0  

    Default


    I suppose it could be - what does the application look like? I have minimal time to enhance this any further at present, but I might be able to make general suggestions ...

  6. #6
    Sencha User SunboX's Avatar
    Join Date
    Mar 2010
    Posts
    239
    Vote Rating
    27
    SunboX will become famous soon enough SunboX will become famous soon enough

      0  

    Default


    I did have a Picker containing a dataset of 1000 items. It shows 3 items per page. If i tap on the belonging select field, the picker (the scroller inside the picker) takes some seconds to render and if i flip (scroll) through the "pages" it´s very slow. :/
    I have a seconds Picker with (only) 60 items, its a lot faster, lets say super fast. That drives me crazy, can´t finish my app. That picker with 1000 items isn´t usable.

  7. #7
    Sencha User
    Join Date
    Aug 2010
    Posts
    13
    Vote Rating
    0
    lchurch is on a distinguished road

      0  

    Default


    coming from other mobile environments I would suggest two things:
    1. drop list or pickers don't work well when the list is > 50 items
    2. We use a list screen where the entire screen is a list of items to choose from.

    Ideally you implement a "progressive" search on the list, so that if I type in "S", the list jumps to the first "S" in the list. Progressive means that if the user types "Su" the list jumps to the first entry with "Su".

    This is all hypothetical in this this environment as I' a newbie with JS and these devices. But I've been building tablet and PDA stuff since 1992.

  8. #8
    Sencha User
    Join Date
    Aug 2010
    Location
    Europa
    Posts
    216
    Vote Rating
    1
    kortovos is on a distinguished road

      0  

    Default


    Looks very nice, but I have some suggestions.

    1. You cann't use the groups without an indexbar.
    2. You cannot have getGroupString functions which return more than one character
    3. Disclosure buttons would be nice (yes I know it isn't to difficult to add something like this myself, but it would be nice to have it in the plugin)

    I will also try to add these things myself and will post them here if I get it working.

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

      0  

    Default


    I really appreciate all the effort put on this subject. The BufferedList implementation works great.

    May be you could help me with an issue I have with this simple piece of code :

    Code:
    WP.components.PeopleList = new Ext.ux.BufferedList({ //new Ext.List({
    	fullscreen: true,
    	itemTpl: '{name}<br/>{title}',
    	maxItemHeight: 75,	// must specify
    	blockScrollSelect: true,
    	batchSize: 10,
    	store: new Ext.data.Store({ model: 'Contact' })
    });
    		
    WP.components.PeopleList.bindStore(WP.stores.People);
    The initial render works fine but when I trigger a read() on my store, the BufferedList doesn't render any item.

    After calling the read() method on the associated store I can see that some methods are triggered on my BufferedList :
    - refresh
    - collectData ( records contain actual data )
    - renderOnScroll
    - replaceItemList
    - getNode
    - isItemRendered
    - buildItemHtml ( the HTML code produced for the records seems to be OK )
    So everything seems fine..

    If I switch to the Ext.List implementation, then the new items are getting rendered fine.

    I also have some problem trying to add a dockedItem to the list / removing the fullscreen:true parameter ( no display )

    I am still learning the framework and would appreciate any advice/comment on that.

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

      0  

    Default


    onItemDisclosure support can be achieve by replacing some code in UxBufList.js :

    Code:
    // line to replace (35):
    //this.itemTplDelayed = new Ext.XTemplate('<div class="x-list-item"><div class="x-list-item-body">' + this.itemTpl + '</div></div>').compile();
    		
    // 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
    It is pretty much a copy/paste of the List.js code, but I thought it could help some ppl.

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

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar