Home > Ext JS > Hello World “extend”

Hello World “extend”

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


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

    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()


new Ext.Win()

this both will give us the same result.

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

 //creating default config for the 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

        //here we call initConfig to apply default values to the user coufiguration
        //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: , , , ,
  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: