ExtJS:如何创建自己的类与其他ExtJS组件

ExtJS: How to create own Class with other ExtJS components?

本文关键字：ExtJS 自己的 组件 其他 创建 何创建      更新时间：2023-09-26

我正在尝试创建具有不同项目的Panel类对象。基本上它与ExtJS中的桌面应用程序有关。 DetailView.js 

Ext.define("App.view.DetailView", {
   extend : 'Ext.panel.Panel',
   alias : 'widget.asset-panel',
   itemId : 'Detail-view',
   region : 'center',
   initComponent : function() {
      this.items = [ comboboxes, customPanel ];
      this.callParent(arguments);
   }
});

我试图以两种方式创建items组件，即使用xtype和使用Ext.create()方式。我不确定哪一个是正确的，我应该如何得到它…下面是DetailView.js

中的comboboxes变量
var comboboxes = {
xtype : 'form',
border : false,
padding : '5 5 5 5',
items : [ {
    layout : 'column',
    border : false,
    width : 600,
    items : [ {
        xtype : 'combobox',
        columnWidth : .15,
        itemId : 'filter-1',
        store : [ 'Employee', 'Manager', 'TeamLead' ]
    }, {
        xtype : 'combobox',
        columnWidth : .15,
        margin : '0, 0, 0, 15',
        store : [ 'Keywords', 'Names' ]
    }, {
        xtype : 'combobox',
        columnWidth : .15,
        margin : '0, 0, 0, 15',
        store : [ 'Some Data here' ]
    }]
} ]
};

到目前为止还好，如果我保持this.items = [comboboxes]在DetailView类它的工作没有任何问题。但当我试图添加其他组件，如customPanel内的DetailView.js

var custom = Ext.create('Ext.panel.Panel', {
itemId : 'panel_1',
height : 300,
border : false,
layout : 'card',
items : [ {
    xtype : 'container',
    itemId : 'listCt',
    layout : {
        type : 'vbox',
        align : 'stretch'
    },
    defaults : {
        margin : 2
    },
    items : []
}, {
    xtype : 'container',
    itemId : 'fitCt',
    layout : 'fit'
} ]
});

我尝试了两种方式来初始化面板，如上所述，并通过使用initComponent()，但每次它给出错误:

Uncaught TypeError: Cannot set property 'component' of null ext-all.js:22
Ext.cmd.derive.privates.finishRender ext-all.js:22
Ext.cmd.derive.finishRenderItems ext-all.js:22
Ext.cmd.derive.finishRender ext-all.js:22
Ext.cmd.derive.privates.finishRenderChildren ext-all.js:22
Ext.cmd.derive.afterRender ext-all.js:22
Ext.cmd.derive.privates.finishRender ext-all.js:22
Ext.cmd.derive.finishRenderItems ext-all.js:22
Ext.cmd.derive.finishRender ext-all.js:22
Ext.cmd.derive.privates.finishRenderChildren ext-all.js:22
Ext.cmd.derive.afterRender ext-all.js:22
Ext.cmd.derive.privates.finishRender ext-all.js:22
Ext.cmd.derive.finishRenderItems ext-all.js:22
Ext.cmd.derive.finishRender ext-all.js:22
Ext.cmd.derive.privates.finishRenderChildren ext-all.js:22
Ext.cmd.derive.afterRender ext-all.js:22
Ext.cmd.derive.afterRender ext-all.js:22
Ext.cmd.derive.privates.finishRender ext-all.js:22
Ext.cmd.derive.render ext-all.js:22
Ext.cmd.derive.privates.doAutoRender ext-all.js:22
Ext.cmd.derive.show ext-all.js:22
Ext.define.restoreWindow Desktop.js?_dc=1406637300888:388
Ext.define.onShortcutItemClick Desktop.js?_dc=1406637300888:199
fire ext-all.js:22
doFireEvent ext-all.js:22
a.doFireEvent ext-all.js:22
fireEventArgs ext-all.js:22
fireEvent ext-all.js:22
Ext.cmd.derive.processUIEvent ext-all.js:22
Ext.cmd.derive.handleEvent ext-all.js:22
Ext.cmd.derive.doFire ext-all.js:22
Ext.cmd.derive.fire ext-all.js:22
Ext.cmd.derive.doDispatchEvent ext-all.js:22
Ext.cmd.derive.dispatch ext-all.js:22
Ext.cmd.derive.dispatch ext-all.js:22
Ext.cmd.derive.doPublish ext-all.js:22
Ext.cmd.derive.publish ext-all.js:22
Ext.cmd.derive.onDelegatedEvent ext-all.js:22
(anonymous function)

当重新初始化窗口时给出错误。也就是说，它只在第一次执行时有效，但在第二次执行时无效。我怀疑组件是否被正确渲染和销毁。可能的原因是什么?

你似乎在组件被销毁后重用它们:

initComponent : function() {
    // comboboxes & customPanel will be the same instances 
    // for every App.view.DetailView you create
    this.items = [ comboboxes, customPanel ];
    this.callParent(arguments);
}

这里也一样:

items : [{
    xtype : 'container',
    itemId : 'listCt',
    // ...
    // The component in this items variable will be destroyed when their
    // parent is destroyed, and won't be usable again after that
    items : items
    // ...
}]

您有两种可靠的方法来定义带有预设项的自定义类。

首先，您可以使用内联(xtype)配置。这具有延迟初始化的优点;此外，每次您创建自定义组件的实例时，Ext都会为这些项创建单独的实例。

例如:

Ext.define('My.Panel', {
    extend: 'Ext.panel.Panel'
    ,items: [{
        xtype: 'textfield'
        ,fieldLabel: "My field"
    },{
        xtype: 'component'
        ,html: "Bla bla bla"
    }]
});
var myFirstPanel = new My.Panel({
    renderTo: Ext.getBody()
    ,title: "First Panel"
});
var mySecondPanel = new My.Panel({
    renderTo: Ext.getBody()
    ,title: "Second Panel"
});

如果您需要更复杂的处理，请挂钩initComponent方法，但请确保在其中创建子项目的新实例。

Ext.define('My.InitComponentPanel', {
    extend: 'Ext.panel.Panel'
    ,customFieldLabel: "Example field"
    ,initComponent: function() {
        // initComponent will be called each time a InitComponentPanel
        // is created, and a new textfield will be created for each
        this.items = [
            new Ext.form.field.Text({
                fieldLabel: this.customFieldLabel
            });
        ];
        this.callParent(arguments);
    }
});
var panel1 = new My.InitComponentPanel({
    renderTo: Ext.getBody()
    ,customFieldLabel: "First field"
});
// will destroy panel1's items, but no problem
panel1.destroy();
var panel2 = new My.InitComponentPanel({
    renderTo: Ext.getBody()
    ,customFieldLabel: "Second field"
});

如果你直接使用Ext组件(不扩展它们)，情况也是如此;不要在多个地方使用已有的组件。

// Inline (uninstantiated) items are always fine
var panel = new Ext.panel.Panel({
    renderTo: Ext.getBody()
    ,items: [{
        xtype: 'checkbox'
        ,boxLabel: "My checkbox"
    }]
});
// You can also create children beforehand
var checkbox = new Ext.form.field.Checkbox;
var panel2 = new Ext.panel.Panel({
    renderTo: Ext.getBody()
    ,items: [checkbox]
});
// But don't reuse the checkbox for another panel
var panel3 = new Ext.panel.Panel({
    renderTo: Ext.getBody()
    // this will remove the unique checkbox instance from panel2
    // and if panel2 has been destroyed meanwhile, it will crash
    ,items: [checkbox]
});

不要忘记，您还可以从已经创建的容器中添加/删除项目，这些容器使用add, insert, remove等方法(但不要直接触摸items属性)。

相关文章：