扩展 Ext.panel.Panel 的正确方法？

Posted 2023-02-26

【中文标题】扩展 Ext.panel.Panel 的正确方法？

【英文标题】：Proper way to extend Ext.panel.Panel?

【发布时间】：2012-10-03 11:16:31

【问题描述】：

我正在使用 Ext JS 4.1.1 为网页创建 GUI。我试图创建一个组件（下面的'GeneSearchComponent'），我可以在更复杂的布局中使用它。但由于某种原因，我无法将 'GeneSearchComponent' 的实例插入 hpanel。在扩展预定义的 'Ext.panel.Panel' 类（以及创建我自己的“小部件”）时，我缺少什么？

如果我删除对“Ext.create('gene-search-component', ...”的调用，一切正常；如果我把它放回去，一切都会破裂。我想知道为什么。

（我没有包含“基因组合框”的定义。我很确信这不是我的问题的根本原因。）

感谢您的宝贵时间！

托马斯

Ext.define('GeneSearchComponent', 
    extend: 'Ext.panel.Panel',
    alias: ['gene-search-component'],
    constructor: function(cnfg) 
        this.callParent(arguments);
        this.initConfig(cnfg);
    ,
    config: 
        collapsible: true,
        frame: true,
        title: 'Search',
        bodyPadding: '15 15 15 15',
        width: 350,
        layout: 
            type: 'vbox', 
            align: 'left'
        ,
        items: [
            Ext.widget('gene-combobox', 
                id: 'comboboxid'
            ),
            Ext.create('Ext.Button', 
                text: 'Search',
                handler: function() 
                    dosomething();
        )]
    ,
    onRender: function() 
        this.callParent(arguments);
    
);

Ext.application(
    name: 'FW',
    launch: function() 
        var bd = Ext.getBody();
        var div = Ext.get("search_form");

        var hpanel = Ext.create('Ext.panel.Panel', 
            id: 'horizontal-panel',
            title: "HBoxLayout Panel",
            layout: 
                type: 'hbox',
                align: 'middle'
            ,
            items: [
                Ext.create('Ext.container.Container', 
                    id: 'another-panel',
                    title: "VBoxLayout Panel",
                    width: 250,
                    layout: 
                        type: 'vbox',
                        align: 'left'
                    ,
                    items: [
                        xtype: 'panel',
                        width: 250,
                        title: ' Panel One',
                        flex: 2
                    ,
                        xtype: 'panel',
                        width: 250,
                        title: ' Panel Two',
                        flex: 1
                    ,
                        xtype: 'panel',
                        width: 250,
                        title: ' Panel Three',
                        flex: 1
                ]),
                Ext.create('gene-search-component', 
                    id: 'searchPanel',
            )],
            renderTo: div,
        );
    
);

【问题讨论】：

为什么要为GeneSearchComponent 定义一个自定义constructor？另外，既然可以使用xtype，为什么还要使用Ext.widget 和Ext.create？虽然不确定，但这些可能是您问题的根源。

lzhaki，如果我删除构造函数，javascript 引擎不再抱怨“Uncaught TypeError: Object #

您能否详细说明将构造函数排除在外的影响？此外，使用Ext.create 或使用xtype 的“惰性实例化”可能很重要，但其背后的解释很复杂，我建议您从阅读this 开始。

另外，你为什么要定义config: 而不仅仅是提供配置作为配置（即，在config: 块之外）？

lzhaki，如果我不使用构造函数，GeneSearchComponent 的宽度几乎会变成页面的 100%，并且带有“搜索”文本的蓝色“标题”会消失。我会阅读您链接到的页面。就配置而言，我主要是抄袭我在这里和那里在线阅读的内容。不是一个完全有意识的选择。 :-)

【参考方案1】：

问题是你在配置别名时没有给gene-search-componentwidget命名空间。

alias: 'widget.gene-search-component'

此外，为了在您的 OP 上呼应 cmets，您正在做很多不必要的打字，以您的方式创建组件。您应该使用 xtype 字段而不是到处使用 Ext.Create。我已经修改了您的代码，以向您展示它可以变得多么简单。

http://jsfiddle.net/hzXx8/

【讨论】：

非常感谢！我能够让它工作。我很欣赏你的代码的简单性。 lzhaki 和 Jamie，感谢您抽出宝贵时间。希望有一天我能回报这个人情。