PDA

View Full Version : clear filter grid in MVC



faliqulamin
7 Oct 2012, 9:24 AM
how to clear filter grid from controller in MVC
i've tried this code, but still error

this is my controller :


Ext.define('App.controller.User', {
extend: 'Ext.app.Controller',
stores: ['User'],
views: [
'user.List'
],

init: function() {
this.control({
'userList button[action=Clear]': {
click: this.clearfil
},
});
},
// This is MY clearFilter function
clearfil: function () {
var xx = Ext.widget('userList');
xx.filters.clearFilters();
}
});




this is my grid panel


Ext.define('App.view.user.List' ,{
extend: 'Ext.grid.Panel',
alias : 'widget.userList',
id:'userID',
store: 'User',
title : 'Users',
layout: 'fit',
initComponent: function() {
this.dockedItems= [{
xtype: 'toolbar',
items: [{
iconCls: 'user_add',
text: 'Add',
action: 'addUser'

},{
iconCls: 'user_delete',
text: 'Delete',
disabled: true,
itemId: 'deleteUser',
action: 'delete'
},{
iconCls: 'clear_filter',
text: 'Clear Filters',
action: 'Clear'
}]
},{
xtype: 'pagingtoolbar',
store: 'User',
dock: 'bottom',
displayInfo: true
}];
//My filters
var filters = [{ftype:'filters', encode:false, local:true}];
this.features = filters;
this.columns = [
{header: 'ID', dataIndex: 'userID', flex: 1, filter: {type: 'numeric'}},
{header: 'Name', dataIndex: 'name', flex: 1, filter: {type: 'string'}},
{header: 'Last Name', dataIndex: 'lastname', flex: 1, filter: {type: 'string'}},
{header: 'Age', dataIndex: 'age', flex: 1, filter: {type: 'numeric'}}
];

this.callParent(arguments);
}
});



and this and this is the error
Uncaught TypeError: Cannot call method 'clearFilters' of undefined

vietits
7 Oct 2012, 4:35 PM
The reason maybe because you do the clearing filters with new userList instead of with existing userList. With your code, creating new userList instance with Ext.widget() will not render it so filters property will not be assigned to grid component yet. This assigning will only happen after userList component has been rendered.

Try to fix your code as below:


Ext.define('App.controller.User', {
extend: 'Ext.app.Controller',
stores: ['User'],
views: [
'user.List'
],
refs: [{
ref: 'userList',
selector: 'userList'
}],
init: function() {
this.control({
'userList button[action=Clear]': {
click: this.clearfil
},
});
},
// This is MY clearFilter function
clearfil: function (button) {
//var xx = Ext.widget('userList'); <- this will create a new userList
var xx = this.getUserList(); // get existing userList
xx.filters.clearFilters();
}
});

faliqulamin
7 Oct 2012, 9:30 PM
The reason maybe because you do the clearing filters with new userList instead of with existing userList. With your code, creating new userList instance with Ext.widget() will not render it so filters property will not be assigned to grid component yet. This assigning will only happen after userList component has been rendered.

Try to fix your code as below:


Ext.define('App.controller.User', {
extend: 'Ext.app.Controller',
stores: ['User'],
views: [
'user.List'
],
refs: [{
ref: 'userList',
selector: 'userList'
}],
init: function() {
this.control({
'userList button[action=Clear]': {
click: this.clearfil
},
});
},
// This is MY clearFilter function
clearfil: function (button) {
//var xx = Ext.widget('userList'); <- this will create a new userList
var xx = this.getUserList(); // get existing userList
xx.filters.clearFilters();
}
});


thanks vietits (http://www.sencha.com/forum/member.php?362966-vietits), this work