PDA

View Full Version : Issue with Extending Components & ID



vivitron
12 Oct 2009, 4:30 AM
Greetings,

I'm new at this and attempting to extend the GridPanel to provide a custom component.

I've created a base class called Application.Controls.Grid that inherits from Ext.grid.GridPanel. Application.Controls.Grid will be the based for all my grids throughout the application. It is pretty empty, but here is Application.Controls.Grid:


Ext.namespace('Application.Controls');

Application.Controls.Grid = Ext.extend(Ext.grid.GridPanel, {
autoEl: {
cls: 'x-form'
},
cls: 'x-form',
initComponent: function(){

Ext.apply(this, {
autoHeight: true,
stripeRows: true,
sm: new Ext.grid.RowSelectionModel({singleSelect: true}),
loadMask: new Ext.LoadMask(Ext.getBody(), {msg:"Data Loading... Please wait..."}),
viewConfig: {
forceFit: true
}

});

Application.Controls.Grid.superclass.initComponent.apply(this, arguments);
}
});


Here is the BrandSearch component that inherits from Application.Controls.Grid:


Ext.namespace('Application.Forms');
Application.Forms.BrandSearch = function(config) {

this.mdlGrid = new Ext.grid.ColumnModel([
new Ext.grid.RowNumberer(),
{header: "ID", width: 30, sortable: true, dataIndex: 'BrandID'},
{header: "Brand Name", width: 75, sortable: true, dataIndex: 'BrandName'},
{header: "Description", width: 75, sortable: true, dataIndex: 'BrandDesc'}
]);

this.Refresh = function() {
Ext.Ajax.request({
params: {
service: 'Brand',
action: 'FetchList',
limit: '10'
},
scope: this,
url: Application.Config.DataService,
success: this.processSuccessResponse,
failure: function() {
alert("Error loading form");
}
});
};

// Try and load up the brand data
this.processSuccessResponse = function(response) {
var data = "";

try {
data = Ext.decode(response.responseText);
}

catch(err) {
alert("error loading data");
return;
}

var dataStore = new Ext.data.JsonStore({
fields: data.metaData.fields,
data: data.Data
});

// var mdlBrand = ;

this.reconfigure(dataStore, this.mdlGrid);
};

this.initialConfig = {
autoEl: {
cls: 'x-search-brand'
},
cls: 'x-search-brand',
id: 'BrandSearch',
title: 'Manage Brands'
};

Ext.apply(this, {
id: "BrandSearch",
cm: this.mdlGrid,
ds: new Ext.data.SimpleStore({fields:[]}),
tbar:[
{
text:'New',
tooltip:'New brand',
iconCls:'add',
scope: this,
handler: function() {
var editBrand = new Application.Forms.BrandForm();
Application.Workspace.RegisterWindow(editBrand, 'New Brand', true, true);
}
},
{
text:'Edit',
tooltip:'Edit brand',
iconCls:'edit',
scope: this,
handler: function() {
var row = this.selModel.getSelected();
if ( row == undefined) { return; }

var editBrand = new Application.Forms.BrandForm({BrandID: row.data.BrandID});
Application.Workspace.RegisterWindow(editBrand, 'Brand: ' + row.data.BrandName, true, true);
}
},
{
text:'Refresh',
tooltip:'Refresh Brands',
iconCls:'refresh',
scope: this,
handler: bind(this, function() {
var cmp = Ext.getCmp("BrandSearch");
alert(cmp);

this.Refresh();
})
}
]
});

Application.Forms.BrandSearch.superclass.initComponent.apply(this, config);

this.Refresh();
};

Ext.extend(Application.Forms.BrandSearch, Application.Controls.Grid);


Now, I've used a different method for extending because the Aptana IDE outlines the code properly using this method. It works great, except I cannot seem to set the ID of the component. I've tried many ways, but it is always auto computed.

Code to try and get the BrandSearch form:

var cmp = Ext.getCmp("BrandSearch");
alert(cmp);

It always returns "undefined."

Things I've tried:


Setting it in the Ext.Extend call:

Ext.extend(Application.Forms.BrandSearch, Application.Controls.Grid,{ Ext.apply(this, {
id: "BrandSearch",
});
});
Setting it in the Ext.apply method above (shown in code)
Setting it in this.initialConfig
Setting Application.Forms.BrandSearch.superclass.id = "BrandSearch" - This seemed crazy, but I tried anyways.

All to no avail... I've tried to read, but I've come up with nothing. Like I said, it works / functions very well, but I cannot set id. I'm confident I'm not understanding class inheritance here. Thanks for any assistance.

Thanks again,
Dustin

vivitron
12 Oct 2009, 5:08 AM
Just as another note, I can extend like this and have the id set to BrandSearch as expected... It's only using the other method of extending the class that I have the issue.



Application.Forms.BrandSearch = Ext.extend(Application.Controls.Grid, {
service: 'Brand',
action: 'FetchList',
id: "BrandSearch",
initComponent: function()
{....

But, code outlining does not work as I'd like in editors...

Thanks again,
Dustin

Animal
12 Oct 2009, 6:05 AM
The id is assigned BEFORE initComponent is called.

YAEM:

Yet Another Extend-to-configure Mess.

vivitron
12 Oct 2009, 6:16 AM
The id is assigned BEFORE initComponent is called.

YAEM:

Yet Another Extend-to-configure Mess.

So in my first example where I set the ID before I call the superclass constructor... When is initComponent called?

vivitron
12 Oct 2009, 5:41 PM
I've been trying for hours... I don't seem to get it. I'm setting ID before I call the initComponent function.. right?