Hi. I have one big problem.
My grid filter stops working when I trying to use stateful in my grid. here is the code:

Code:
Ext.define('Ext.app.TransmittalsContainer', {

    extend: 'Ext.panel.Panel',   
    
    initComponent: function(){
    
        var Store = Ext.create('Ext.data.Store', {
            pageSize: transPerPage,
            remoteSort: true,
            remoteFilter: true,
            fields:[
                'number', 
                {name: 'date', mapping: 'date', type: 'date'}, 
                {name: 'take_date', mapping: 'date', type: 'date'}, 
                'from',
                'to',
                'docs_count'
            ],
            idProperty: 'id',
            autoLoad: false,
            proxy: {
                type: 'ajax',
                url: '/?c=transmittals&m=gettransmittals',
                reader: {
                    root: 'items',
                    totalProperty: 'totalCount'
                },
                simpleSortMode: true
            },
            sorters: [{
                property: 'id',
                direction: 'DESC'
            }]
        });
        
        var transmittalsCombo = new Ext.form.ComboBox({
            name : 'transperpage',
            width: 40,
            store: new Ext.data.ArrayStore({
                fields: ['id'],
                data  : [
                  [5],
                  [10],
                  [15],
                  [25],
                  [50]
                ]
            }),
            mode : 'local',
            value: transPerPage,

            listWidth     : 20,
            triggerAction : 'all',
            displayField  : 'id',
            valueField    : 'id',
            editable      : false,
            forceSelection: true,
            listeners: {
                select: {
                    fn:function(combo, value) {
                        Store.pageSize = value[0].get('id');
                        Store.loadPage(1);
                        setSimpleCookie('trans_per_page',value[0].get('id'),1,'','','');
                    }
                }
            }
        });
        
        var transmittalsPagesbar = Ext.create('Ext.PagingToolbar', {
            store: Store,
            displayInfo: true,
            displayMsg: 'Displaying {0} - {1} of {2}',
            emptyMsg: "Nothing to show",
            items:[
                '-',
                'Per page: ',
                transmittalsCombo,
                '-',
                {
                    text: 'Clear Filters',
                    handler: function () {
                        grid.transmittalsFilters.clearFilters();
                    } 
                }
            ]
        });
        
        var transmittalsGrid = Ext.create('Ext.grid.Panel', {
            region: 'center',
            store: Store,
            /*stateful: true,
            stateId: 'transmittalsGrid',*/
            columnLines: true,
            viewConfig: {
                trackOver: false,
                stripeRows: true
            },
            columns:[{
                text: "Number",
                dataIndex: 'number',
                width: 200,
                filter: true,
                sortable: true,
                flex: 1
            },{
                text: "From",
                dataIndex: 'from',
                width: 50,
                filter: true,
                sortable: true
            },{
                text: "To",
                dataIndex: 'to',
                width: 50,
                filter: true,
                sortable: true
            },{
                text: "Date",
                dataIndex: 'date',
                width: 80,
                align: 'right',
                renderer: Ext.util.Format.dateRenderer('d.m.Y'),
                filter: {
                    type: 'date'
                },
                sortable: true
            },{
                text: "Take Date",
                dataIndex: 'take_date',
                width: 80,
                align: 'right',
                renderer: Ext.util.Format.dateRenderer('d.m.Y'),
                filter: {
                    type: 'date'
                },
                sortable: true
            },{
                text: "Docs count",
                dataIndex: 'docs_count',
                sortable: true,
                filter: {
                    type: 'numeric'
                },
                tdCls: 'finger'
            }],
            bbar: transmittalsPagesbar,
            features: [{
                ftype: 'filters',
                encode: true,
                local: false
            }],
            frame: true,
            title: 'Transmittals',
            iconCls: 'icon-grid',
        });
        
        Ext.apply(this, {
            region: 'center',
            layout: 'border',
            title:'Transmittals',
            items: [transmittalsGrid],
            listeners: {
                activate: function(self,options){
                    Store.load()
                }
            }
        });
        this.callParent(arguments);
    }
});
And, when I uncomment this:
Code:
stateful: true,
stateId: 'transmittalsGrid',
my filters are not working.
here is code for Ext.ready:
Code:
Ext.onReady(function(){
    Ext.state.Manager.setProvider(Ext.create('Ext.state.CookieProvider'));
    Ext.tip.QuickTipManager.init();
    
    Ext.create('Ext.container.Viewport', {
        layout: 'border',
        padding: '5',
        items: [
            {
                xtype: 'container',
                region: 'north',
                height: 50
            },
            {
                xtype: 'tabpanel',
                activeTab: 0,
                region: 'center',
                items: [
                    Ext.create('Ext.app.TransmittalsContainer')
                ]
            }
        ],
    });
    Ext.get('loading').fadeOut({ duration: 0.2, remove: true });
    Ext.get('loading-mask').fadeOut({ duration: 0.2, remove: true });
});