1. #1
    Sencha User
    Join Date
    Aug 2012
    Posts
    6
    Vote Rating
    0
    n1exceptme is on a distinguished road

      0  

    Default Infinite Scroll and Filters

    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 - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,548
    Vote Rating
    872
    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


    Looks like your store has remoteFilter turned off. There is a grid-filtering example that comes with Ext JS.
    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.