使用extjs4定制组件重用 [英] custom component reuse with extjs4

问题描述

我已经在javascript文件中创建了一个自定义网格。我想把它作为一个xtype在不同的面板分开的js文件。如果我在一个面板上使用它，它可以正常工作但是当我使用它尝试它同时在不同的面板上使用它，我在chrome开发者工具控制台中出现错误：

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 

我的网格定义如下： / p>

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?

推荐答案

不要在配置中分配创建的对象！使用 initComponent

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

这行

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

应该被放置为

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

在 initComponent 正文中的任何位置，但在<$ c之前$ c> callParent 被称为

anywhere in the initComponent body, but before callParent is called

编辑：

仍然允许覆盖

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

编辑

避免使用静态 id 属性！框架为您处理该部分。换成你的头围绕 Ext.ComponentQuery 。它将帮助您找到所需的任何组件。

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.

这篇关于使用extjs4定制组件重用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！