Archive

Posts Tagged ‘ExtJS 4’

Hello World “extend”

July 12, 2011 Leave a comment

Hi there guys and girls today we are going to start the blog today πŸ™‚

The blog is for developers and specially for Ext JS lovers πŸ˜›

When I was new to Ext JS I had Β a lot of headache with extending existing classes like panel, store, window….

so I want to start it with “Extend” feature of Extjs.

let’s make a ExtJS window with built-in close button. For the beginning let’s create a class.

How it’s done? Β it’s simple, in ExtJS

Ext.define('Ext.ux.Win',{})

wow great fantastic!! we got a new class πŸ™‚

what we are going to do now?

we are going to tell ExtJS to make that class child of “Ext.Window” class

Ext.define('Ext.ux.Win',{
    extend:'Ext.Window',
    alternateClassName: ['Ext.Win']

})

here we go πŸ™‚ ‘extend’ parameter tells ExtJS that this guy is a child of “Ext.Window”

and also we added and alternade name to this class. we can now create it’s instance with

new Ext.ux.Win()

and

new Ext.Win()

this both will give us the same result.

ok now let’s make a constructor for our Window.

Ext.define('Ext.ux.Win',{
 //creating default config for the window
    config:{
        height:150,
        width:150
    },
    extend:'Ext.Window',
    alternateClassName: ['Ext.Win'],
    constructor:function(config) {
        //creating config if we have no one
         //config is an configuration object that you pass as a parameter when initiating an instance of this class
        config = config || {};
        //creating buttons array if we have no other buttons
        config.buttons = config.buttons || [];
         //get a reference to our class
         var win = this;
         //we push our close button into the buttons array
            config.buttons.push({
                text:config.closeText||'Close',
                handler:function(prtObj){
                    win.close();
                }

        });
        //here we call initConfig to apply default values to the user coufiguration
       this.initConfig(config);
        //call parent coustructor
       this.superclass.constructor.call(this, config);
       return this;
    }
})

basically that’s all πŸ™‚ thank you for your time and hope u visit us again πŸ™‚

Categories: Ext JS Tags: , , , ,