Trying to create a custom Panel with ExtJS

Question

Can't find out why its isn't working.. I'm trying create a custom panel for multiple uses. Is it the way? Or am i totally wrong.

I'm a beginner in ExtJS, so i'll be happy to a little explain.. thanks (i'm trying to run this code on the fiddle to see the immediate result - )

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);
    }
});

You want to run this on fiddle ? Means should we correct this code or what you want ? — Tejas
i'm running this code on: fiddle.sencha.com/#view/editor just to see if its work. but i gonna use it elsewhere just to explain the : "name: 'Fiddle'," — mendy
You should not use ext.define instead use ext.create.But then its breaking in afterrender event ..checking this thing , will update fiddle once it fix it. — Tejas

Tejas Tejas · Accepted Answer · 2017-04-26T11:09:54

2

votes

You should use Ext.create instead of Ext.define.Refer this fiddle.

Trying to create a custom Panel with ExtJS

1 Answers