custom component reuse with extjs4

问题

I have created a custom grid in a javascript file. I want to use it as a xtype on to different panels in seperate js files. If I use it on a single panel, it works fine; but when I use try it use it on different panels at the same time, I get a error in the chrome developer tool console saying:

Uncaught TypeError: Cannot read property 'isComponent' of undefined

My grid definition is as follows:

Ext.define('DataBox.view.FootNotes', {
    extend : 'Ext.grid.Panel',
    alias : 'widget.footNotes',
initComponent : function() {
    this.columns = [ {
        header : 'SL', 
        field : {
            xtype : 'checkbox',
            checked : 'true'
        }
    }, {
        header : 'Symbol',
    }, {
        header : 'Notes', 
    }, ];
    this.callParent(arguments);
}

});

and to include the grid on the panels i use following code

initComponent : function() {
    /*  this.footNotesInfoGrid = Ext.create('DataBox.view.FootNotes', {
        colspan: 2,
        border: false,
        frame: 'false'
    }); even tried this */

    Ext.apply(this,{
        items : [{
            xtype : 'footNotes',
            columnWidth : .50,
            id : 'infoFootNotesGrid',
        }]
    }
   }

I tried many other ways suggested on different forum discussions.. but my problem stil persists. Can somebody point out where I am going wrong?

回答1:

Don't assign created objects within a configuration! Use initComponent for that!

this line

plugins : [ Ext.create('Ext.grid.plugin.CellEditing', {
    clicksToEdit : 1
}) ],

should be placed as

this.plugins = [ Ext.create('Ext.grid.plugin.CellEditing', {
    clicksToEdit : 1
}) ];

anywhere in the initComponent body, but before callParent is called

Edit:

to still allow override do

if(!this.plugins) {
    this.plugins = [ Ext.create('Ext.grid.plugin.CellEditing', {
        clicksToEdit : 1
    }) ];
}

Edit

Avoid using static id properties! The framework handle that part for you. Wrap your head around Ext.ComponentQuery instead. It will help you to find any Component you are looking for.

来源：https://stackoverflow.com/questions/17565787/custom-component-reuse-with-extjs4

标签

extjs

custom-component

reusability