Infinite Scroll and Filters

[n1exceptme]

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:

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

    // allow the grid to interact with the paging scroller by buffering
    buffered: true,
    pageSize: 100,

    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',
            writeAllFields: true,
            encode: true,
            root: 'consumi'
        }
    }
}); 

This is my grid:

var filtersCfg = {
    ftype: 'filters',
    encode: true,
    local: false,
    updateBuffer: 1000
};


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

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

    features: [filtersCfg],
    
    title : 'Consumi',
    store: 'Consumi',
    
    // Use a PagingGridScroller (this is interchangeable with a PagingToolbar)
    verticalScrollerType: 'paginggridscroller',
    verticalScroller: {
        numFromEdge: 0,
        trailingBufferZone: 500,
        leadingBufferZone: 1000
    },
    // do not reset the scrollbar when the view refreshs
    invalidateScrollerOnRefresh: true,
    // infinite scrolling does not support selection
    disableSelection: true,   
    loadMask: true,
    viewConfig: {
        trackOver: false
    },    
    

    width: 600,
    height: 600,    

    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:

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.

[mitchellsimoens]

Looks like your store has remoteFilter turned off. There is a grid-filtering example that comes with Ext JS.