extjs creating classes that make panel forms

Question

Hi everyone I'm brand new to extjs and new to javascript as well. I'm trying. What I want to do is have a class with a method that makes a panel form with various properties, I want to be able to make clone panel forms whenever I want my calling myclass.makepanel. Why would I want to do that? I'm just learning different things and getting familiar with extjs, i'm not trying accomplish anything specifically this is my code so far

Ext.define('ryan', {

    constructor: function () {

        Ext.create('Ext.form.Panel', {
            bodyStyle: {
                "background-color": "green"
            },
            name: 'mypanel',
            title: 'Animal sanctuary, one animal per location  ',
            width: 300,
            bodyPadding: 10,
            test: 'mycat',
            style: 'background-color: #Fdd;',
            renderTo: Ext.getBody(),

            items: [{
                id: 'button1',
                xtype: 'button',
                text: 'click the button',
                handler: function () {
                    alert('(<^_^>)')
                }
            }, {
                id: 'wildAnimal',
                xtype: 'textfield',
                fieldLabel: 'animal:',
                name: 'myanimal'
            }, { //end text field
                id: 'myCombo',
                xtype: 'combo',
                fieldLabel: 'choose your animal',
                store: animals,
                queryMode: 'local',
                displayField: 'name',
                listeners: {
                    'change': function (field, selectedValue) {
                        Ext.getCmp('wildAnimal').setValue(selectedValue);
                    }
                }
            } // end combo

                   ], //end items



        }); // end .create
    } // end ffunc
}); //end ryan

var animals = Ext.create('Ext.data.Store', {
    fields: ['id', 'name'],
    data: [{
        "id": 'mycat',
        "name": "mycat"
    }, {
        'id': 'mydog',
        "name": "mydog"
    }, {
        'id': 'sbBarGirls',
        "name": "BarGirls-when-drunk"
    }]
}); //end animals.create  // up to here no problems

Ext.onReady(ryan.constructor()); // can't actually display the panel.

My apologies the format doesn't copy directly from my text editor. so if my code is hard to read I can post again. I can put everything in a .onReady instead of trying to define 'ryan' but I don't wanna do that because I want to be able to just make clone forms whenever by calling the class.

Answer 1

You are defining a class, but never create an object from it:

Ext.onReady(function(){
    var a = new ryan();
});

And you don't have to call explicitly the constructor method.

Alternatively with Ext.create:

Ext.onReady(function(){
    var a = Ext.create('ryan');
});