尝试使用 ExtJS 创建自定义面板答案

【问题标题】：Trying to create a custom Panel with ExtJS尝试使用 ExtJS 创建自定义面板
【发布时间】：2017-04-26 10:54:13
【问题描述】：

不知道为什么它不起作用.. 我正在尝试创建一个用于多种用途的自定义面板。是这样吗？还是我完全错了。

我是 ExtJS 的初学者，所以我很乐意解释一下.. 谢谢（我正在尝试在小提琴上运行此代码以查看即时结果 - ）

Ext.application({

    name: 'Fiddle',

    launch: function () {
        var custom = Ext.define('Ext.BET', {
            renderTo: Ext.getBody()
        });

    }
});

Ext.define('Ext.BET', {
    extend: 'Ext.panel.Panel',
    alias: 'widget.bet',
    constructor: function (cnfg) {
        this.callParent(arguments);
        this.initConfig(cnfg);
    },
    config: {
        collapsible: true,
        frame: true,
        bodyStyle: 'background-color: #FFFFFF',
        layout: {
            type: 'hbox'
        },
        items: [{
            xtype: 'textfield',
            textarea: focus,
            id: 'tbx'
        }, {
            xtype: 'button',
            id: 'btn'
        }, {
            xtype: 'button',
            id: 'search'
        }]

    },
    afterRender: function () {
        var btn = Ext.getCmp('btn');
        var tbx = Ext.getCmp('tbx');
        var btn2 = Ext.getCmp('search');
        var totalWidth = btn2.getWidth() + btn.getWidth() + tbx.getWidth();
        this.setWidth(totalWidth);
    },
    onRender: function() {
        this.callParent(arguments);
    }
});

【问题讨论】：

你想在 fiddle 上运行它吗？意味着我们应该更正此代码还是您想要的？
我在fiddle.sencha.com/#view/editor 上运行此代码只是为了看看它是否有效。但我会在其他地方使用它来解释：“名称：'Fiddle'，”
你不应该使用 ext.define 而是使用 ext.create。但是它会在 afterrender 事件中中断..检查这个东西，一旦修复它就会更新小提琴。
非常感谢！我被困在这个很多..
我不能赞成你的回答，因为我是新用户...

标签： extjs panel

【解决方案1】：

您应该使用 Ext.create 而不是 Ext.define。请参阅此fiddle。

【讨论】：