CODEWITHSUNDEEP
javascriptcustom-attributesextendextjs
James
James

Reputation: 1780

Using custom attributes in ExtJS Component

My application has been growing for the last year or so and I have finally started to split out common components by extending existing ones. I've found this to be really helpful - increasing speed of development and maintenance. My problem is that I haven't grasped the concept of using custom parameters on my components and was hoping that someone could offer some assistance in the following example. Specifically I don't seem to be able to access the custom parameter (myCustomParam) inside the proxy declared in the initComponent function:

MyEmployeeGrid = Ext.extend(Ext.grid.GridPanel, {
 myCustomParam: "CompanyX",
 initComponent:function() {
    //Store Reader
    var myReader = new Ext.data.JsonReader({
        root : 'objectsToConvertToRecords',
        idProperty: 'id',
        fields : [
            {name: 'id'},
            {name: 'employee', allowBlank:false},
            {name: 'department', allowBlank:false}
        ]
    });

    //Store Proxy
    var dwrProxy = new Ext.ux.data.DwrProxy({
            apiActionToHandlerMap : {
            read : {
                dwrFunction : EmployeeService.readCompanyEmployees,
                getDwrArgsFunction: function(request, recordDataArray, oldRecordDataArray) {
                    return [myCustomParam];
                }
            }
        }
    });

    //Setup Params for the grid
    Ext.apply(this, {
        store: new Ext.data.Store({
             proxy: dwrProxy,
            reader: myReader,
            autoLoad : true,
            autoSave: true
        }),
        columns: [{header: "Employee", dataIndex: 'employee'},
                    {header: "Department", dataIndex: 'department'}]
    });

    MyEmployeeGrid.superclass.initComponent.apply(this, arguments);
} // eo function initComponent

,onRender:function() {
    MyEmployeeGrid.superclass.onRender.apply(this, arguments);
} // eo function onRender

});

Ext.reg('myemployeegrid', MyEmployeeGrid);

Upvotes: 0

Views: 7444

Answers (3)

Rob Boerman
Rob Boerman

Reputation: 2168

The proxy cannot access the variable because it is not defined in the scope of the proxy itself. I have been struggling with things like this in the past, I thought that components would act like closures and keep track of the variable, but they dont.

You can solve your problem by handing the scope of the grid to the handler function explicitly by making it a delegate, what you do have to change for that is making the variable you would like to access an instance variable instead of just a local variable.

Changes:

MyEmployeeGrid = Ext.extend(Ext.grid.GridPanel, {
    myCustomParam: "defaultValue",
    initComponent:function() {
    ...
    //Store Proxy
    var dwrProxy = new Ext.ux.data.DwrProxy({
            apiActionToHandlerMap : {
            read : {
                dwrFunction : EmployeeService.readCompanyEmployees,
                getDwrArgsFunction: function(request, recordDataArray, oldRecordDataArray) {
                    return [this.myCustomParam];
                }.createDelegate(this)
            }
        }
    });

var myGridInstance = new MyEmployeeGrid({ myCustomParam: 'ValueForThisInstance' });

Hope this helps you, good luck

Upvotes: 0

wombleton
wombleton

Reputation: 8376

myCustomParam is a property of the object in question. It is never declared as a variable in its own right. You can see this by running the code through jslint.

You want this.myCustomParam.

If you're trying to pass in parameters, however, you might want to try this way instead:

MyGrid = Ext.extend(Ext.grid.GridPanel, {
  constructor: function(cfg) {
    cfg = cfg || {};

    // ... do stuff ...

    MyGrid.superclass.constructor.call(this, cfg);
  }
});

Upvotes: 1

ndtreviv
ndtreviv

Reputation: 3624

I have a strong feeling this is to do with scope around the point at which getDwrArgsFunction is called. It possibly doesn't know what myCustomParam is (despite the fact this should possibly be this.myCustomParam, and that you'd want to set this after you'd applied any config) because it's not declared in the DwrProxy object and has no reference back to its owning MyEmployeeGrid object.

I'd debug/attempt to fix in the following way:

  1. Rename myCustomParam to this.myCustomParam and test
  2. Set scope and test
  3. Create getDwrArgsFunction using createDelegate (http://dev.sencha.com/deploy/dev/docs/source/Function.html#method-Ext.util.Functions-createDelegate) and test

DISCLAIMER: Some of those will be no good depending on your DwrProxy etc (which we can't see the code for)

Upvotes: 0

Related Questions