Results 1 to 2 of 2

Thread: Infinite Scroll and Filters

  1. #1
    Sencha User
    Join Date
    Aug 2012
    Posts
    6
    Vote Rating
    0
      0  

    Default Infinite Scroll and Filters

    Hi everybody.

    I'm a total newbie to ExtJS but I'm trying to learn as much as possible.

    At the moment I'm creating a grid, with remote filtering and infinite scroll.
    I read some discussions in this forum and I looked for working examples, but I can't really understand what my mistakes are.

    Specifically, I can filter data and infinite scroll seems to work. But, when filtered records exceed the buffer and I scroll the page, the infinite scroll causes a complete reload of the store with all its records (not only the filtered ones)!

    Can somebody, please, help me understand?

    This is my store:
    PHP Code:
    Ext.define('ExtPOD.store.Consumi', {
        
    extend'Ext.data.Store',
        
    model'ExtPOD.model.Consumo',
        
        
    storeId'Consumi',
        
        
    remoteSort:true,
        
    //remoteFilter: true,
        
    simpleSortMode:true,
        
    autoLoadtrue,
        
    sorters : {
            
    property 'pod',
            
    direction 'ASC'
        
    },

        
    // allow the grid to interact with the paging scroller by buffering
        
    bufferedtrue,
        
    pageSize100,

        
    proxy: {
            
    type'ajax',
            
    api: {
                
    read'php/elencaConsumi.php',
                
    create'php/nuovoConsumo.php'
                
    update'php/aggiornaConsumo.php',
                
    destroy'php/eliminaConsumo.php'
            
    },

            
    reader: {
                
    type'json',
                
    root'consumi',
                
    idProperty'id',
                
    successProperty'success'
            
    },
            
    writer: {
                
    type'json',
                
    writeAllFieldstrue,
                
    encodetrue,
                
    root'consumi'
            
    }
        }
    }); 
    This is my grid:

    PHP Code:
    var filtersCfg = {
        
    ftype'filters',
        
    encodetrue,
        
    localfalse,
        
    updateBuffer1000
    };


    Ext.define('ExtPOD.view.consumi.ConsumiGrid' ,{
        
    extend'Ext.grid.Panel',
        
    alias 'widget.ConsumiGrid',

        
    requires: [
            
    'Ext.ux.grid.FiltersFeature',
            
    'Ext.grid.PagingScroller'
        
    ],
        
        
    columnLinestrue,
        
        
    iconCls'icon-grid',

        
    features: [filtersCfg],
        
        
    title 'Consumi',
        
    store'Consumi',
        
        
    // Use a PagingGridScroller (this is interchangeable with a PagingToolbar)
        
    verticalScrollerType'paginggridscroller',
        
    verticalScroller: {
            
    numFromEdge0,
            
    trailingBufferZone500,
            
    leadingBufferZone1000
        
    },
        
    // do not reset the scrollbar when the view refreshs
        
    invalidateScrollerOnRefreshtrue,
        
    // infinite scrolling does not support selection
        
    disableSelectiontrue,   
        
    loadMasktrue,
        
    viewConfig: {
            
    trackOverfalse
        
    },    
        

        
    width600,
        
    height600,    

        
    initComponent: function() {
            
    this.columns 
                        [ 
    'Some Columns'
            
    ];    

            
    this.dockedItems = [    'Some Buttons'
            
    ];
            
            
    this.listeners = [ {
                    
    sortchange: function(){
                        
    getConsumiStore().load();
                    }
                }
            ];    
            
            
    this.callParent(arguments);
        }
    }); 
    and this is my php backend code to collect data on mysql db:

    PHP Code:

    include("connetti.php");

    // collect request parameters
    $start  = isset($_REQUEST['start'])  ? $_REQUEST['start']  :  0;
    $limit  = isset($_REQUEST['limit'])  ? $_REQUEST['limit']  : 50;
    $sort   = isset($_REQUEST['sort'])   ? json_decode($_REQUEST['sort'])   : null;
    $filters = isset($_REQUEST['filter']) ? $_REQUEST['filter'] : null;

    $sortProperty $sort[0]->property
    $sortDirection $sort[0]->direction;

    $filters json_decode($filters);

    $where ' 0 = 0 ';
    $qs '';

    // loop through filters sent by client
    if (is_array($filters)) {
        for (
    $i=0;$i<count($filters);$i++){
            
    $filter $filters[$i];

            
    $field $filter->field;
            
    $value $filter->value;
            
    $compare = isset($filter->comparison) ? $filter->comparison null;
            
    $filterType $filter->type;        

            switch(
    $filterType){
                case 
    'string' 
                    
    $qs .= " AND ".$field." LIKE '%".$value."%'"
                break;

                case 
    'list' :
                    if (
    strstr($value,',')){
                        
    $fi explode(',',$value);
                        for (
    $q=0;$q<count($fi);$q++){
                            
    $fi[$q] = "'".$fi[$q]."'";
                        }
                        
    $value implode(',',$fi);
                        
    $qs .= " AND ".$field." IN (".$value.")";
                    } else {
                        
    $qs .= " AND ".$field." = '".$value."'";
                    }
                break;        
                
                case 
    'boolean' 
                    
    $qs .= " AND ".$field." = ".($value); 
                break;
                
                case 
    'numeric' :
                    switch (
    $compare) {
                        case 
    'eq' $qs .= " AND ".$field." = ".$value; Break;
                        case 
    'lt' $qs .= " AND ".$field." < ".$value; Break;
                        case 
    'gt' $qs .= " AND ".$field." > ".$value; Break;
                    }
                break;
                
                case 
    'date' :
                    switch (
    $compare) {
                        case 
    'eq' $qs .= " AND ".$field." = '".date('Y-m-d',strtotime($value))."'"; Break;
                        case 
    'lt' $qs .= " AND ".$field." < '".date('Y-m-d',strtotime($value))."'"; Break;
                        case 
    'gt' $qs .= " AND ".$field." > '".date('Y-m-d',strtotime($value))."'"; Break;
                    }
                break;
            }
        }
        
    $where .= $qs;
    }

        
    $queryString "SELECT SQL_CALC_FOUND_ROWS * FROM consumi6 WHERE ".$where;
        
    $queryString .= " ORDER BY ".$sortProperty." ".$sortDirection;
        
    $queryString .= " LIMIT ".$start.",".$limit;

        
    //print_r($queryString);
        
        //esegui la query sql
        
    $query mysql_query($queryString) or die(mysql_error());
        
    $consumi = array();
        
        
    //determina il numero di record restituiti dalla query
        
    $count mysql_query("SELECT FOUND_ROWS()");
        
    $total mysql_fetch_array($count);
        
    $numrecords $total[0];
        
        
    //il ciclo crea un array contenente i record estratti dal db
        
    $consumi = array();
        while(
    $consumo mysql_fetch_assoc($query)) {
            
    $consumi[] = $consumo;
        }

        echo 
    json_encode(Array(
            
    "success" => mysql_errno() == 0,
            
    "total"=>$numrecords,
            
    "consumi" => $consumi
        
    )); 
    Thank you.

  2. #2
    Sencha - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,412
    Vote Rating
    1288
      0  

    Default

    Looks like your store has remoteFilter turned off. There is a grid-filtering example that comes with Ext JS.
    Mitchell Simoens @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Learn BBCode and use it!

    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.

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •