1. #1
    Sencha User
    Join Date
    Sep 2009
    Posts
    44
    Vote Rating
    0
    ironandsteel is on a distinguished road

      0  

    Default need thorough discussion of buffered scrolling config and requirements (long!)

    need thorough discussion of buffered scrolling config and requirements (long!)


    I've not seen this discussed in a comprehensive way anywhere, and it seems like something that a LOT of developers want to do. Currently, I have my app somewhat working with 4.1b2, but it doesn't work right after you scroll past the first page of records. Basically, you get the loadmask and spinner until the server times out. rather than blindly fumble around trying things out, I'd really like to have some of these mysteries cleared up.
    What I want to do is:
    - have an ext grid display a large number of records(a few thousand, for instance)
    - have reasonable initial load time
    - dynamically pull in records from the server as needed when user scrolls
    - be able to sort by columns
    - be able to apply filters to the store
    - grouping would be nice, but I see how this can be really complicated

    Here are what I see as the variables to make this all work:
    - how to set up the store and the proxy (lots of config opts there)
    - when and how to initially load the store
    - what the server script needs to do and what variables it must look at and honor

    In my case, here is what I am attempting, and it nearly works. My app is a database of contractors. My store:
    PHP Code:
        var ContractorStore Ext.create('Ext.data.Store'
        {
            
    id'contstore',
            
    pageSize200,        // a number I've seen in examples- no idea what is ideal
            
    purgePageCount0,    // I am unsure about this
            
    model'Contractor.Model',
            
    autoLoadfalse,      // I don't know whether I should autoload, or load using guaranteeRange
            
    autoSynctrue,       // I believe this is needed so that edits in the grid will cause ajax calls to my update script
            
    remoteSorttrue,     // not sure about this- can a buffered store do sorting on its own or must the server script do thjis?
            
    remoteFilterfalse,    // not sure about this- can a buffered store do filtering on its own or must the server script do it?
            
    sortOnFiltertrue,   // not sure about this
            
    bufferedtrue,
            
    proxy: {
                
    id'contractorStoreProxy',
                
    autoSynctrue,   // don't know if this is needed here
                //url: 'scripts/getContListChunk.php',  // when api is defined, don't need url (right?)
                
    type'ajax',     // the correct combo seems to be type ajax on the proxy and json on the reader...
                // I don't know the correlation of the api property vs the url property
                
    api: {
                    
    read'../scripts/getContListChunk.php',    // seems to work
                    
    create'../scripts/createContRecord.php',  
                    
    update'../scripts/updateContRecord.php',
                    
    destroy'../scripts/deleteContRecord.php'
                
    }
                ,
    reader: {
                    
    type'json',
                    
    root'rows',
                    
    totalProperty'total'
                
    }
                ,
    writer: {
                  
    type'json',
                  
    writeAllFieldsfalse,    
                  
    root'rows'
                
    }
                ,
    simpleSortModetrue         // not sure about this
                
    ,batchUpdateMode'operation' // not sure about this
                
    ,batchActionsfalse          // not sure about this
                
    ,writeAllFieldsfalse        // not sure about this
            
    }
            
    // I've not found a discussion about the sorters and groupers. 
            // I don't know what this is about- I click on a col hdr and the ajax call includes "sort=city" or whatever i click on
            // so, what does this do?
            
    ,sorters: [{ property'catcode',direction'ASC'}]
           
    // ,groupers: [{ property: 'catcode',direction: 'ASC'}]
        
    }); 
    Now- how and when should we load the store?
    - I could autoload, but will that honor the buffering?
    - The code shown below does what one of the examples does- it calls prefecth on the store and then calls guaranteeRange in the callback
    - It does the prefetch and load at the end of onready

    PHP Code:
    Ext.require([
        
    'Ext.data.*',
        
    'Ext.tip.QuickTipManager',
        
    'Ext.window.MessageBox',
        
    'Ext.grid.PagingScroller',
        
    'Ext.selection.CheckboxModel'
    ]);

    Ext.onReady(function()
    {
        
    Ext.tip.QuickTipManager.init();
        
    // create the contractor Data Store
        
    var ContractorStore Ext.create('Ext.data.Store'
        {
            
    // as detailed above
        
    });
        
        var 
    main Ext.create('Ext.container.Container', {
            
    region'center',
            
    padding'0 0 0 0',
            
    //width: '100%',
            
    height800,
            
    flex:1,
            
    //renderTo: document.body,
            
    layout: {
                
    type'hbox',
                
    align'stretch'
            
    },
            
    items: [
            {
                
    itemId'grid',
                
    resizabletrue,
                
    xtype'contractorgrid',    //defined in another file
                
    title'Contractor List',
                
    flex1,    
                
    minWidth:400,
                
    storeContractorStore,
                
    listeners: {
                    
    selectionchange: function(selModelselected) {
                        
    main.child('#form').setActiveRecord(selected[0] || null);
                    }
                }
            },{
                
    itemId'form',
                
    resizabletrue,
                
    xtype'contractorform',  //defined in another file
                
    height500,
                
    width:250,
                
    minWidth:50,
                
    margins'0 0 10 0',
                
    listeners: {
                    
    create: function(formdata){
                        
    ContractorStore.insert(0data);
                    }
                }
            } ]
        });
        
        var 
    viewport = new Ext.container.Viewport({
            
    id:'mainviewport',
            
    layout: {
                
    type'vbox',
                
    align'stretch'
            
    },
            
    renderTodocument.body,
            
    items: [
            {   
    // html for banner at the top
              
    html:'<div id="header">' +
              
    '<table border="0" width="100%">' +
              
    '<tr>
    <td width="33%" align="middle">&nbsp;</td>' 
    +
              
    '<td width="33%" align="middle">
    <h1>Master Contractor List</H1>
    </td>' 
    +          
              
    '<td width="33%" align="middle" valign="bottom">' +
              
    '<a class="logout_link" href="index.php">Admin Home</a>
    <br>' 

              
    '<a class="logout_link" href="projects.php">Projects List</a>
    </td>' 
    +
              
    '</tr>
    </div>'
    ,
              
    height:50,

            }
            ,
    main   // the grid and form
            
    ]
        });
            
        
    ContractorStore.prefetch({
          
    start0
          
    ,limit199
          
    ,filters:[
              {
    id"sel"property"sel"value'false'  },
              {
    id"catcode"property"catcode"value'all'}                  
          ]
          ,
    callback: function(){
              
    ContractorStore.guaranteeRange(0199);
            }
        });
    }); 
    Finally, what should the server script that returns records do? From observing the ajax calls, I have found the following args are passed:
    - start (index of first record to retrieve)
    - limit (how many records after start to retrieve)
    - sort (name of field that it should sort on)
    - dir (direction of sort: either ASC or DESC)
    - filter (json array of filter specs)

    I've not seen it specified anywhere that these paramters are passed to the script called by the proxy, but I have written my code to honor these.

    Thanks for any help that can be provided- maybe there is a document on this topic that I've not read?
    LK

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,633
    Vote Rating
    817
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    autoLoad/load() !== prefetch

    Store has built-in paging feature so the start/limit are the paging params. start is the record index that should be the first returned record and the limit is the number of records to return.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha User
    Join Date
    Sep 2009
    Posts
    44
    Vote Rating
    0
    ironandsteel is on a distinguished road

      0  

    Default


    Quote Originally Posted by mitchellsimoens View Post
    autoLoad/load() !== prefetch

    Store has built-in paging feature so the start/limit are the paging params. start is the record index that should be the first returned record and the limit is the number of records to return.
    Ok, good info. I'd like to get it basically working correctly, and then worry about improving performance. To that end, can I just ignore prefetch and purgePageCount?

    So- to load the store, I see these options:
    - autoload config
    - call load
    - call guaranteeRange
    Is it the case that for a buffered store/paging situation I should use guaranteeRange?

  4. #4
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,633
    Vote Rating
    817
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    You will need to use prefetch
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

Thread Participants: 1

Tags for this Thread