ExtJs Grid Remote Sorting and Remote filtering

Question

I have a grid in ExtJs 4.2. I need to apply remote sorting, remort filtering and pagination. So my store look like this:

    storeId: 'mainStore',

    pageSize: 10,
    autoLoad: {
        start: 0,
        limit: 10
    },
    autoSync: true,

    remoteSort: 'true', //For Remote Sorting

    sorters: [{
        property: 'COM_KOP_Vertriebsprojektnummer'
        direction: 'ASC'
    }],

    remoteFilter: true, //For Remote Filtering 

    proxy: {
        type: 'rest',
        filterParam: 'filter',
        url: PfalzkomApp.Utilities.urlGetData(),
        headers: {
            'Content-Type': "application/xml"
        },
        reader: {
            type: 'xml',
            record: 'record',
            rootProperty: 'xmlData'
        }

   } 

I do not want to set buffered = true case that will load my pages in advance and I have 1000 pages and I don't want to do that.

Remote filtering, Pagination, sorting is working fine But when I try to filter some thing, a seprate request for sorting is going as well. How can I stop it?

two requests when I try to filter some thing:

http://127.0.0.1/projektierungen/?_dc=1437058620730&page=1&start=0&limit=10&sort=[{"property":"COM_KOP_Vertriebsprojektnummer","direction":"DESC"}]

http://127.0.0.1/projektierungen/?_dc=1437058620734&page=1&start=0&limit=10&sort=[{"property":"COM_KOP_Vertriebsprojektnummer","direction":"DESC"}]&filter=[{"property":"COM_KOP_Vertriebsprojektnummer","value":"2882"}]

How can I stop the first request?

My code for filtering column is this:

{
                text: 'Vertriebsprojektnr',
                dataIndex: 'COM_KOP_Vertriebsprojektnummer',
                flex: 1,            
                items    : {
                    xtype:'textfield',
                    flex : 1,
                    margin: 2,
                    enableKeyEvents: true,
                    listeners: {
                        keyup: function() {
                            var store = Ext.getStore('mainStore');
                            store.clearFilter();
                            if (this.value) {
                                //debugger;
                                //debugger;
                                store.filter({
                                    property     : 'COM_KOP_Vertriebsprojektnummer',
                                    value         : this.value,
                                    anyMatch      : true,
                                    caseSensitive : false
                                });

                            }

                        },
                        buffer: 1000,

                    }
                }
            }

Due to this auto genrated request, my view is not working fine. As the result after filtering are replaced by this sorting request. Kindly help.

Answer 1

Why are you clearing you filters when the value is empty? Why not filter on an empty value? I almost got the same situation, but I think my solution works well without clearing anything. Besides that I don't want to know which store to filter or have the property name hardcoded. Here is my filterfield:

Ext.define('Fiddle.form.TextField', {
    extend: 'Ext.form.field.Text',
    alias: 'widget.filterfield',

    emptyText: 'Filter',
    width: '100%',
    cls: 'filter',
    enableKeyEvents: true,
    listeners: {
        keyup: {
            fn: function(field, event, eOpts) {
                this.up('grid').getStore().filter(new Ext.util.Filter({
                    anyMatch: true,
                    disableOnEmpty: true,
                    property: field.up('gridcolumn').dataIndex,
                    value   : field.getValue()
                }));
            },
            buffer: 250
        }
    }
});

And here is the view declaration:

dataIndex: 'company',
text: 'Company',
flex: 1,
items: [{
    xtype: 'filterfield'
}]

Answer 2

The extra request is not there because of sorting but because of the call to store.clearFilter(). Try to call store.clearFilter(true) that suppresses the event what could prevent that extra request.