1. #1
    Sencha User
    Join Date
    Sep 2010
    Posts
    4
    Vote Rating
    0
    tim.mcnamara is on a distinguished road

      0  

    Default Inheritance

    Inheritance


    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.

    Code:
    // 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'
    			}];
    	    }
    	});

  2. #2
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    82
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      1  

    Default


    You can't just override onAdd and onRemove! If you do, then you need to call the superclass, e.g.
    Code:
    onAdd: function() {
      Ext.ncrb.AbstractGridPanel.superclass.onAdd.apply(this, arguments);
      alert('add');
    },
    onRemove: function() {
      Ext.ncrb.AbstractGridPanel.superclass.onRemove.apply(this, arguments);
      alert('remove');
    }

  3. #3

Similar Threads

  1. [2.2] TimeField inheritance
    By pgioseffi in forum Ext 2.x: Bugs
    Replies: 0
    Last Post: 27 Mar 2009, 8:56 AM
  2. prototype in inheritance
    By nthamizhan in forum Ext 2.x: Help & Discussion
    Replies: 1
    Last Post: 8 Nov 2008, 12:53 AM
  3. Class inheritance
    By adolfojunior in forum Community Discussion
    Replies: 1
    Last Post: 28 Jul 2008, 5:55 PM

Thread Participants: 2