user3106347
user3106347

Reputation: 658

Extjs3.2 Pagination and Filter Issue

I am working on extjs3.2. In my grid i applied fileter and PagingToolbarResizer Plugin.My problem is suppose i have 20 pages each page contain 10 records(Total records=200).Now suppose i am in 6th page and applied filter for some column. I got 5 records which is showing on page 1 ,but my current view still is in 6th page.What i want after filter take view to first page. Below is my code for filter

     var filters = new Ext.ux.grid.GridFilters({
// encode and local configuration options defined previously for easier reuse
 encode: true, // json encode the filter query
local: false,   // defaults to false (remote filtering)
autoReload : true,
filters: [   
{type :'string',  dataIndex: 'name'},
{type: 'string',  dataIndex: 'age'},
],

});

and my grid look like this

var grid = new Ext.grid.GridPanel({
                    store : store,
                    id : "site_grid",
                    columns : [
                            {
                                header : "Name",
                                width : 120,
                                sortable : true,
                                dataIndex : 'name',
                                renderer: function (value, metaData, record, rowIndex, colIndex, store) {

                                     return  getToolTip(value, metaData, record, rowIndex, colIndex, store);
                                    } ,
                            },

                            {
                                header : "Age",
                                width : 400,
                                sortable : true,
                                dataIndex : 'age',
                                renderer: function (value, metaData, record, rowIndex, colIndex, store) {

                                     return  getToolTip(value, metaData, record, rowIndex, colIndex, store);
                                    } ,
                                editor : {
                                    xtype : 'textfield',
                                    allowBlank : true
                                }
                            } ],
                    viewConfig : {
                        forcefit : true,
                    },
                    plugins : [filters,editor],
                    title : 'Title',
                    height : 500,
                    width : 929,
                    frame : false,
                    tbar : new Ext.Toolbar(),
                     bbar: new Ext.PagingToolbar({
                            pageSize: 10,
                            store: store,
                            plugins : [filters],
                            displayInfo: true,
                            displayMsg: 'Displaying topics {0} - {1} of {2}',
                            emptyMsg: "No topics to display",
                            items:[  {
                                 cls: '.icon-user-clear',
                                 text: 'Clear Filter Data',
                                 handler: function () {
                                    grid.filters.clearFilters();
                                }
                            }],
                            plugins : [new Ext.ux.plugin.PagingToolbarResizer( {options : [10, 15, 25, 50 ], appendCombo: true})]
                        })
                    });

store.load({params:{start:0, limit:10}});

Thanks

Upvotes: 1

Views: 378

Answers (1)

user7789076
user7789076

Reputation: 798

Can you please change your plugin like this

  plugins : [new Ext.ux.plugin.PagingToolbarResizer( {options : [10, 15, 25, 50 ], appendCombo: true}),filters]

Basically i am just adding filter in plugin

For more detail you can check it here

http://stackoverflow.com/questions/5030697/extjs-bbar-filter-not-working-as-desired]

Thanks

Upvotes: 2

Related Questions