PDA

View Full Version : Inheritance



tim.mcnamara
10 Sep 2010, 12:15 PM
Trying to build off Saki's excellent blog on creating reusable classes (linky (http://blog.extjs.eu/know-how/factory-functions-in-ext-extensions/))

The Panel is rendered but not the grid. Inspecting the DOM, the columns and store properties of the grid appear to be set correctly. Also, the 'onAdd' and 'onRemove' functions get fired during initialization, but not when the panel is rendered.

Any help for a newb is appreciated.


// Base grid to reuse Add/Remove grid row
Ext.ncrb.AbstractGridPanel = Ext.extend(Ext.form.FormPanel, {
initComponent:function() {
// create config object
var config = {};

// build config
this.buildConfig(config);

// apply config
Ext.apply(this, Ext.apply(this.initialConfig, config));

// call parent
Ext.ncrb.AbstractGridPanel.superclass.initComponent.call(this);

} // eo function initComponent

,buildConfig:function(config) {
this.buildColumns(config);
this.buildTbar(config);
this.buildBbar(config);
} // eo function buildConfig

,buildColumns:function(config) {
config.columns = undefined;
} // eo function buildItems


,buildTbar:function(config) {
config.tbar = undefined;
} // eo function buildTbar

,buildBbar:function(config) {
config.bbar = [ {
xtype : 'tbbutton',
cls : 'x-btn-icon',
icon : 'img/add.png',
tooltip : 'Add',
handler : this.onAdd()
}, {
xtype : 'tbbutton',
cls : 'x-btn-icon',
icon : 'img/delete.png',
tooltip : 'Remove',
handler : this.onRemove()
} ];
} // eo function buildBbar

,onAdd: function() {
alert('add');
}
,onRemove: function() {
;
}

}); // eo extend

// Application Grid
var eirGrid = new Ext.ncrb.AbstractGridPanel({
store: eirGridStore,
autoExpandColumn : 'appName',
height : 150,
renderTo : 'eirTable',
title : 'Nothing happening here',
buildColumns: function(config) {
config.columns = [{
header : "EIR",
width : 60,
sortable : true,
id : 'eir'
}, {
header : "Application Name",
width : 150,
sortable : true,
id : 'appName'
}, {
header : "ISSO",
width : 100,
sortable : true,
id: 'isso'
}];
}
});

Condor
10 Sep 2010, 11:31 PM
You can't just override onAdd and onRemove! If you do, then you need to call the superclass, e.g.

onAdd: function() {
Ext.ncrb.AbstractGridPanel.superclass.onAdd.apply(this, arguments);
alert('add');
},
onRemove: function() {
Ext.ncrb.AbstractGridPanel.superclass.onRemove.apply(this, arguments);
alert('remove');
}

Animal
10 Sep 2010, 11:40 PM
http://www.sencha.com/learn/Tutorial:Creating_new_UI_controls