PDA

View Full Version : How to get the parent "this" to set the scope of the plugins listener?



SebTardif
8 Mar 2011, 10:40 AM
How can I get a reusable syntax to get the this of the instance of Ext.ux.EmployeeGrid when setting up the scope of the plugins below?

Ext.ux.EmployeeGrid = Ext.extend(Ext.grid.GridPanel, {
plugins: [new Ext.ux.grid.FilterRow({
listeners: {
change: {
fn: function (data) {
ds.load(...);
},
scope: thisOfEmployeeGrid???

brittongr
8 Mar 2011, 12:47 PM
I don't sure if you can do that but maybe you could use the standard GridPanel (at least if you are adding more custom stuff that can't be done with Ext.grid.GridPanel or maybe if you are planning to reuse that grid many times) or even if you are extending the grid you can create just an instance of FilterRow without the listener and in the plugin init function you can access the store by using the parent that should be the instance of the grid panel where you are adding the plugin.

code:



var employeGrid = new Ext.GridPanel({
plugins: new Ext.ux.grid.FilterRow({})
});

Ext.ux.grid.FilterRow = (function(){
return {
init: function(grid)
{
this.on('change', function()
{
grid.store.load();//And you can pass the parameters to the server setting the baseParams of the store in function called by store.on('beforeload', setFilterParams);
}


Hope it helps!

johnathanhebert
8 Mar 2011, 1:01 PM
Set up your plugin in the initComponent method...


Ext.ux.EmployeeGrid = Ext.extend(Ext.grid.GridPanel, {
initComponent:function() {
this.plugins = [new Ext.ux.grid.FilterRow({
listeners: {
change: {
fn: function (data) {
ds.load(...);
},
scope: this
...
]
Ext.ux.EmployeeGrid.superclass.initComponent.call(this);
}

mitchellsimoens
8 Mar 2011, 5:19 PM
Every plugins gets instantiated by using the init method in the plugin and gets passed the parent component.


...
init: function(cmp) {
this.cmp = cmp;
}
...

SebTardif
11 Mar 2011, 2:43 PM
When testing the fix proposed by johnathanhebert, it's working but strangely, even if I have everything I could think of in initComponent, if I have 2 instances of my grid class, and put filter condition on the first grid, it's the second grid that get filtered!

It's very hard to write reusable class in Ext JS. I should go back to C++, that was lot easier...