Inheritance

[tim.mcnamara]

Trying to build off Saki's excellent blog on creating reusable classes (linky)

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]

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]

http://www.sencha.com/learn/Tutorial...ew_UI_controls