PDA

View Full Version : How does a filter function get assigned as a handler in a grid panel?



denisputnam
6 Mar 2013, 3:20 PM
Can someone tell me how the filterUsersByDepartment() function gets assigned as a handler to a grid when the user clicks on a row in the grid? I am looking at the sample code that I downloaded from a book that I am reading online and I don't see how the handler gets assigned to the click event for the grid.

Perhaps it is because of inheritance and overloading?

The view:


Ext.define('AM.view.user.List', { extend: 'Ext.grid.Panel',
alias: 'widget.userlist',


title: 'All Users',
store: 'Users',


columns: [
{header: 'Name', dataIndex: 'name', flex: 1},
{header: 'Email', dataIndex: 'email', flex: 1}
],


tools: [
{
type: 'refresh',
tooltip: 'Refresh',
handler: function () {
var pnl = this.up('userlist');
pnl.getStore().refresh();
pnl.setTitle('All Users');
}
}
],


filterUsersByDepartment: function (deptCode) {
this.getStore().filterUsersByDepartment(deptCode);
}
});

The controller:


Ext.define('AM.controller.Users', { extend: 'Ext.app.Controller',


config: {
stores: ['Users'],


models: ['User'],


views: ['user.Edit', 'user.List'],


refs: [
{
ref: 'usersList',
selector: 'userlist'
}
]
},


init: function (app) {
this.control({
'userlist dataview': {
itemdblclick: this.editUser
},
'useredit button[action=save]': {
click: this.updateUser
},
'useredit button[action=cancel]': {
click: this.cancelEditUser
}
});


app.on('departmentselected', function (app, model) {
this.getUsersStore().filterUsersByDepartment(model.get('code'));
this.getUsersList().setTitle(model.get('name') + ' Users');
}, this);
},


editUser: function (grid, record) {
var edit = Ext.create('AM.view.user.Edit').show();


edit.down('form').loadRecord(record);
},


updateUser: function (button) {
var win = button.up('window'),
form = win.down('form'),
record = form.getRecord(),
values = form.getValues();


record.set(values);
win.close();
},
cancelEditUser: function (button) {
var win = button.up('window');
win.close();
}
});




The store:


Ext.define('AM.store.Users', { extend: 'Ext.data.Store',
model: 'AM.model.User',
autoLoad: true,


proxy: {
type: 'ajax',
api: {
read: 'data/users.json'
},
reader: {
type: 'json',
root: 'users',
successProperty: 'success'
}
},


filterUsersByDepartment: function (deptCode) {
this.clearFilter();
this.filter([
{
property: 'department',
value: deptCode
}
]);
},


refresh: function () {
this.clearFilter();
}
});

evant
6 Mar 2013, 6:40 PM
It's not clear from what you posted. The app fires some "departmentselected" event, however that it's demonstrated anywhere.

denisputnam
6 Mar 2013, 9:01 PM
My apologizes, I should have included the departments controller.


Ext.define('AM.controller.Departments', { extend: 'Ext.app.Controller',


config: {
stores: ['Departments'],


models: ['Department'],


views: ['department.List']
},


init: function () {
this.control({
'departmentlist': {
itemclick: this.showDepartmentUser
}
});
},


showDepartmentUser: function (grid, model, itemEl, idx, e, eOpts) {
var app = this.application;
app.fireEvent('departmentselected', app, model);
}
});

evant
7 Mar 2013, 12:41 PM
Ok, so that's quite clear, the application fires an event. What is the question here?

denisputnam
7 Mar 2013, 1:20 PM
When the app.fireEvent() gets called to fire the event in the departments controller, how does sencha know to associate/call the view.user.List
filterUsersByDepartment? This relationship is not clear to me.

The filterUsersByDepartment is defined in the store.Users.js and in the view.user.List.js class. Can you explain to me how this works?

evant
7 Mar 2013, 2:27 PM
It doesn't, that logic is coded into the app:



app.on('departmentselected', function (app, model) {
this.getUsersStore().filterUsersByDepartment(model.get('code'));
this.getUsersList().setTitle(model.get('name') + ' Users');
}, this);

denisputnam
7 Mar 2013, 2:31 PM
I see how that calls the one in the store.Users.js, but how does that end up calling the one in view.user.list.js?

evant
7 Mar 2013, 2:58 PM
It doesn't, as far as I can see.