Superdit.com » Extjs

Extjs : Form Submit With Enter Key Event

aditia rahman — Fri, 04 Jun 2010 13:44:08 +0000

This is the short post that I want to share, cause last year I had created form in Extjs and submitted using ENTER key event so I want to share that here the simple code in Extjs form to enabling ENTER key event, but using this code your mouse cursor should be focused on one of the field inside the form, this is very simple so I don’t think I need to provide the downloadable source code, here it goes:

Ext.onReady(function(){
    var formLogin = new Ext.FormPanel({
        frame: false, border: false, buttonAlign: 'center',
        url: BASE_URL + 'user/extjs_login', method: 'POST',
        id: 'frmLogin',
        items: [{
            xtype: 'textfield',
            fieldLabel: 'Username',
            id:'fldusername',
            name: 'username',
            allowBlank: false
        }, {
            xtype: 'textfield',
            fieldLabel: 'Password',
            id:'fldpassword',
            name: 'password',
            allowBlank: false,
            inputType: 'password'
        }],
        buttons: [
            { text: 'Login' },
            { text: 'Reset', handler: function() {
                    formLogin.getForm().reset();
                }
            }
        ],
        keys: [
            { key: [Ext.EventObject.ENTER], handler: function() {
                    Ext.Msg.alert("Alert","Enter Key Event !");
                }
            }
        ]
    });

    var winLogin = new Ext.Window({
        title: 'Extjs Enter Key Event', layout: 'fit',
        width: 340, height: 140, resizable: false,
        closable: false, items: [formLogin]
    });

    winLogin.show();
});

As you can see on the code above just add the config "keys" property and use the event key "Ext.EventObject.ENTER", that's all.

Creating Register and Login Form Using EXTJS and CodeIgniter

aditia rahman — Wed, 02 Jun 2010 06:07:41 +0000

Like another tutorial this post will create the basic form login and register using Extjs and Codeigniter, and I want to mix my previous post about Codeigniter Session Library, Extjs Unique Field Validation and using Statusbar in Extjs Window.

1. Setting up the database

Using phpmyadmin in XAMPP I create the database named “ci_extjs_login”, and create simple “users” table, here below is the sql code that I generated from phpmyadmin, for more advance database modelling you can use mysql workbench.

CREATE TABLE  `ci_extjs_login`.`users` (
`id` INT NOT NULL AUTO_INCREMENT PRIMARY KEY ,
`username` VARCHAR( 100 ) NOT NULL ,
`password` VARCHAR( 100 ) NOT NULL ,
`email` VARCHAR( 100 ) NOT NULL
) ENGINE = MYISAM ;

2. Setting up the Codeigniter

If you not have the copy of codeigniter you can download the latest from its official site here, then copy the extracted file in your server folder, (here I’m using the default XAMPP htdocs), first setting the databse connection, open the file “system/application/config/database.php”, set the hostname, username, password, and database name (for username & password I’m using the XAMPP default)

$db['default']['hostname'] = "localhost";
$db['default']['username'] = "root";
$db['default']['password'] = "";
$db['default']['database'] = "ci_extjs_login";

Setting the config file, open file “system/application/config/config.php”, my base_url setting is like this (set the value to “http://localhost/ci_extjs_login/”)

$config['base_url'] = "http://localhost/ci_extjs_login/";

Setting the autoload file, open file “system/application/config/autoload.php”, in this file set the default loaded helpers and libraries to be loaded by the application

$autoload['libraries'] = array('database', 'session', 'my_usession');

As you can see above, the “database” and “session”, are the default codeigniter library, for “my_usession” i’m using my own library it’s pretty simple to implement, to see more you can read my previous post, next to load the url codeigniter helper, this will help when you linking a page to the server in Extjs.

$autoload['helper'] = array('url');

Setting the route file, open file “system/application/config/routes.php”, change the default controller to “user” even though in this step we haven’t create the file yet

$route['default_controller'] = "user";

3. Adding the Extjs file to in Codeigniter

I usually create the separated folder from system in Codeigniter, create “assets” folder to put all images, css and javascript file, so you can put all the Extjs file in the js folder, as you can see on the image in the right. All Extjs file placed in the “ext” folder and the “ext_plugins” folder is the where I usually placed the plugins. You can see “nbproject” folder, this is the auto generated folder when you are developing project using netbeans, you can remove it if you are in the production state. The next is to include the Extjs file in every html header, now create view file in codeigniter here “system/application/views/header.php” and my code is like this




    

    
    
    

    
    <?php echo $title; ?>

As you can see above I’m using the Codeigniter url helper, base_url() to locate the Extjs file, the defined variable in javascript “BASE_URL” and “BASE_PATH” is useful when requesting server location, you can see on the next step. Now create file for login screen in “system/application/views/user/login.php” and add this code

load->view('header'); ?>






load->view('footer'); ?>

The status bar plugin you can copied from Extjs default example located in “assets/js/ext/examples/ux/statusbar” copy all the files inside this folder, actually you can directly link to that folder, but for me it easier to read the plugin that I used in the folder hierarchy. We have not create the two javascript file “form_validation.js” and “form_login.js” yet, we’ll create it on the next step, but I always wanted a footer file on the view so create file “system/application/views/footer.php” and the code is as simple as this (for this project just to closing the html and body tag)

Now create the javascript file, in this file we will create two from in the same file, which mean one page, two Extjs windows and two Extjs forms (login and register). Create file in “assets/js/form_login.js” insert this code

Ext.onReady(function() {

    /* 01. Start The Form Register Component */

    // 01. Form Register
	var formRegister = new Ext.FormPanel({
		frame: false, border: false, buttonAlign: 'center',
		url: BASE_URL + 'user/ext_register', method: 'POST', id: 'frmRegister',
		bodyStyle: 'padding:10px 10px 15px 15px;background:#dfe8f6;',
		width: 300, labelWidth: 150,
		items: [{
			xtype: 'textfield',
			fieldLabel: 'Username',
			name: 'username',
			id: 'regUsername',
			allowBlank: false,
            vtype: 'uniqueusername'
		}, {
			xtype: 'textfield',
			fieldLabel: 'Password',
			name: 'password',
			allowBlank: false,
			inputType: 'password',
            vtype: 'passwordlength',
            id: 'pass1'
		}, {
			xtype: 'textfield',
			fieldLabel: 'Confirm Password',
			name: 'cpassword',
			allowBlank: false,
			inputType: 'password',
            id: 'pass2',
            initialPassField: 'pass1',
            vtype: 'password'
		}, {
			xtype: 'textfield',
			fieldLabel: 'Email',
            id: 'regEmail',
			name: 'email',
			vtype:'uniqueemail',
			allowBlank: false,
            validationEvent: ''
		}
		],
		buttons: [
			{ text: 'Register', handler: fnRegister },
			{ text: 'Reset', handler: function() {
					formRegister.getForm().reset();
				}
			}
		]
	});

    function fnRegister() {
        Ext.getCmp('frmRegister').on({
            beforeaction: function() {
                if (formRegister.getForm().isValid()) {
                    Ext.getCmp('winRegister').body.mask();
                    Ext.getCmp('winLogin').body.mask();
                    Ext.getCmp('sbWinRegister').showBusy();
                }
            }
        });
        formRegister.getForm().submit({
            success: function() {
                formRegister.getForm().reset();
                Ext.getCmp('sbWinRegister').setStatus({
                    text: 'Registration Success',
                    iconCls: 'x-status-saved'
                });
                Ext.getCmp('winRegister').body.unmask();
                Ext.getCmp('winLogin').body.unmask();
            }
        });
    }

    // 01. Window Register
	var winRegister = new Ext.Window({
		title: 'CI Extjs — User Register',
        id: 'winRegister',
		layout: 'fit',
		width: 350,
		height: 210,
		y: 120,
		resizable: false,
		closable: false,
		items: [formRegister],
        bbar: new Ext.ux.StatusBar({
            text: 'Ready',
            id: 'sbWinRegister'
        })
	});

	winRegister.show();

    /* 02. Start The Form Login Component */

    // 02. Form Login
    var formLogin = new Ext.FormPanel({
		frame: false, border: false, buttonAlign: 'center',
		url: BASE_URL + 'user/ext_login', method: 'POST', id: 'frmLogin',
		bodyStyle: 'padding:10px 10px 15px 15px;background:#dfe8f6;',
		width: 300, labelWidth: 150,
		items: [{
			xtype: 'textfield',
			fieldLabel: 'Username',
			name: 'username',
			id: 'logUsername',
			allowBlank: false
		}, {
			xtype: 'textfield',
			fieldLabel: 'Password',
			name: 'password',
            id: 'logPassword',
			allowBlank: false,
			inputType: 'password'
		}
		],
		buttons: [
			{ text: 'Login', handler: fnLogin },
			{ text: 'Reset', handler: function() {
					formLogin.getForm().reset();
				}
			}
		]
	});

    function fnLogin() {
        Ext.getCmp('frmLogin').on({
            beforeaction: function() {
                if (formLogin.getForm().isValid()) {
                    Ext.getCmp('winRegister').body.mask();
                    Ext.getCmp('winLogin').body.mask();
                    Ext.getCmp('sbWinLogin').showBusy();
                }
            }
        });
        formLogin.getForm().submit({
           success: function() {
               window.location = BASE_URL;
           },
           failure: function(form, action) {
               Ext.getCmp('winRegister').body.unmask();
               Ext.getCmp('winLogin').body.unmask();
               if (action.failureType == 'server') {
                    obj = Ext.util.JSON.decode(action.response.responseText);
                    Ext.getCmp('sbWinLogin').setStatus({
                        text: obj.errors.reason,
                        iconCls: 'x-status-error'
                    });
                } else {
                    if (formLogin.getForm().isValid()) {
                        Ext.getCmp('sbWinLogin').setStatus({
                            text: 'Authentication server is unreachable',
                            iconCls: 'x-status-error'
                        });
                    } else {
                        Ext.getCmp('sbWinLogin').setStatus({
                            text: 'Something error in form !',
                            iconCls: 'x-status-error'
                        });
                    }
                }
           }
        });
    }

    // 02. Window Login
	var winLogin = new Ext.Window({
		title: 'CI Extjs — User Login',
        id: 'winLogin',
		layout: 'fit',
		width: 350,
		height: 160,
		y: 340,
		resizable: false,
		closable: false,
		items: [formLogin],
        bbar: new Ext.ux.StatusBar({
            text: 'Ready',
            id: 'sbWinLogin'
        })
	});

	winLogin.show();
});

Now for the custom validation file I’m using the unique field validation from my previous post and modified a little bit, although is not perfect but still can used in here, so create file “assets/js/form_validation.js” and the code is

/* Custom Unique Username Validation
 * Used in 01. Form Register */

var usernameErrLength = 'Username minimum 4 character !';
var usernameErrUnique = 'Username already in use !';
var usernameSuccess = 'Username avaliable';
var emailErrFormat = 'Email not valid !';
var emailErrUnique = 'Email already in use !';
var emailSuccess = 'Email valid & avaliable';

Ext.apply(Ext.form.VTypes, {
    uniqueusernameMask : /[a-z0-9_\.\-@\+]/i,
	uniqueusername : function(val) {
        if (val.length < 4) {
            Ext.apply(Ext.form.VTypes, {
                uniqueusernameText: usernameErrLength
            });
            return false;
        } else {
            Ext.Ajax.request({
                url: BASE_URL + 'user/ext_is_unique_username',
                method: 'POST',
                params: 'username=' + val,
                success: function(o) {
                    if (o.responseText == 0) {
                        resetUsernameValidator(false);
                        Ext.apply(Ext.form.VTypes, {
                            uniqueusernameText: usernameErrUnique
                        });
                        return false;
                    } else {
                        resetUsernameValidator(true);
                    }
                }
            });
            return true;
        }
	},
	uniqueusernameText : usernameErrUnique,

    uniqueemailMask : /[a-z0-9_\.\-@\+]/i,
    uniqueemail : function(val) {
        var uniqueemail = /^(\w+)([\-+.][\w]+)*@(\w[\-\w]*\.){1,5}([A-Za-z]){2,6}$/;
        if (uniqueemail.test(val)) {
            Ext.Ajax.request({
                url: BASE_URL + 'user/ext_is_unique_email',
                method: 'POST',
                params: 'email=' + val,
                success: function(o) {
                    if (o.responseText == 0) {
                        resetEmailValidator(false);
                        Ext.apply(Ext.form.VTypes, {
                            uniqueemailText: emailErrUnique
                        });
                    } else {
                        resetEmailValidator(true);
                    }
                }
            });
            return true;
        } else {
            return false;
        }

    },
    uniqueemailText : emailErrFormat,

    password : function(val, field) {
        if (field.initialPassField) {
            var pwd = Ext.getCmp(field.initialPassField);
            return (val == pwd.getValue());
        }
        return true;
    },
    passwordText : 'Passwords do not match',

    passwordlength : function(val) {
        if (val.length < 5) {
            return false;
        } else {
            return true;
        }
    },
    passwordlengthText : 'Password minimum 5 character'
});

function resetUsernameValidator(is_error) {
	Ext.apply(Ext.form.VTypes, {
		uniqueusername : function(val) {
            if (val.length < 4) {
                Ext.apply(Ext.form.VTypes, {
                    uniqueusernameText: usernameErrLength
                });
                return false;
            } else {
                Ext.Ajax.request({
                    url: BASE_URL + 'user/ext_is_unique_username',
                    method: 'POST',
                    params: 'username=' + val,
                    success: function(o) {
                        if (o.responseText == 0) {
                            resetUsernameValidator(false);
                        } else {
                            resetUsernameValidator(true);
                        }
                    }
                });
                return is_error;
            }
		}
	});
}

function resetEmailValidator(value) {
    Ext.apply(Ext.form.VTypes, {
        uniqueemail : function(val) {
            var uniqueemail = /^(\w+)([\-+.][\w]+)*@(\w[\-\w]*\.){1,5}([A-Za-z]){2,6}$/;
            if (uniqueemail.test(val)) {
                Ext.Ajax.request({
                    url: BASE_URL + 'user/ext_is_unique_email',
                    method: 'POST',
                    params: 'email=' + val,
                    success: function(o) {
                        if (o.responseText == 0) {
                            resetEmailValidator(false);
                            Ext.apply(Ext.form.VTypes, {
                                uniqueemailText: emailErrUnique
                            });
                        } else {
                            resetEmailValidator(true);
                        }
                    }
                });
            } else {
                return false;
            }
            return (value);
        }
    });
}

The last file in views is index which is called when user is authenticated in “system/application/views/user/index.php”, here I’m using my last project layout using Extjs and I can’t explain more about this, if you want simple layout just html and php that would be fine, or if you want follow my step you can separate the javascript file from the php file like the way from previous step

load->view('header'); ?>



load->view('footer'); ?>

4. Create controller

Create the controller file user.php in “system/application/controllers/user.php”

my_usession->logged_in)
        {
            $data['title'] = 'User Index';
            $this->load->view('user/index', $data);
        }
        else
        {
            redirect('user/login');
        }
    }

    public function login()
    {
        if ($this->my_usession->logged_in)
        {
            redirect('user/index');
        }
        else
        {
            $data['title'] = 'User Login';
            $this->load->view('user/login', $data);
        }
    }

    public function ext_is_unique_username()
    {
        $cond = array('username' => $_POST['username']);
        $query = $this->db->get_where('users', $cond);
        if ($query->num_rows() != 0)
        {
            echo 0;
        }
        else
        {
            echo 1;
        }
    }

    public function ext_is_unique_email()
    {
        $cond = array('email' => $_POST['email']);
        $query = $this->db->get_where('users', $cond);
        if ($query->num_rows() != 0)
        {
            echo 0;
        }
        else
        {
            echo 1;
        }
    }

    public function ext_logout()
    {
        $this->my_usession->unset_userdata("user_id");
        echo "{success:true}";
    }

    public function ext_login()
    {
        $cond = array(
            'username' => $_POST['username'],
            'password' => $_POST['password']
        );
        $query = $this->db->get_where('users', $cond);
        if ($query->num_rows() != 0)
        {
            $row = $query->row();
            $this->my_usession->set_userdata('user_id', $row->id);
            $this->my_usession->set_userdata('username', $row->username);
            echo "{success:true}";
        }
        else
        {
            echo "{success:false, errors: { reason: 'User not found !' }}";
        }
    }

    public function ext_register()
    {
        $data = array(
            'username' => $_POST['username'],
            'password' => $_POST['password'],
            'email' => $_POST['email']
        );
        $this->db->insert('users', $data);

        echo "{success:true}";
    }

}

The final result should look like this

default login and register form in “http://localhost/ci_extjs_login/index.php/user/login”

default index layout in “http://localhost/ci_extjs_login/index.php/”

Like always I provide the source to be downloaded but, not included the Extjs file, you have to download yourself from the official site here.

DOWNLOAD SOURCE

EXTJS: Window Form Masking With Statusbar

aditia rahman — Mon, 24 May 2010 03:20:32 +0000

In this tutorial i want to show you how to masking a form when user enter a submit button, statusbar that used in this tutorial is from the Extjs ux example, so I borrow this cause it is useable plugin, like always on the server side process I use simple PHP scripting. I created this post because when I used a form in Extjs and the user make a request it seem not really responsive, the system should interact the user, inform what is going on in the system and most user is not advance user. Let’s get started:

1. Setting the StatusBar

Copy the StatusBar css file and icon from the default examples to your desired folder, first the css file you can find it in “extjs/examples/ux/statusbar/css/statusbar.css”, I copy it to another folder called “css” and next the statusbar icon is in “/extjs/examples/ux/statusbar/images” and I copy all the icon files to another folder called “img” most the file structure you can see it on the image on the right, this is how it look in Netbeans project. You can see the “form_masking.html” and “server_response.php” file, this is the main file that we have to create, and it will be mentioned on the next step, but before that we have to edit the StatusBar.css file that we have copied so the icon can be loaded, by changing the “background-image” properties. So find this all code like this

background-image: url(../images/loading.gif);

Change the background-image to to this code, and do this to all background-image but you only need to change the url path not the image file

background-image: url(../img/loading.gif);

2. Create the main file

Like usual include EXTJS file in your html header, but this time you need to include the StatusBar.css that you have modified and the StatusBar.js (I don’t modified this file, this file directly linked from the Extjs ux examples, you can found it bundled on the examples)

3. Create the Form, Function Handler and the Window

I Create a file named “form_masking.html”, the form is similar to the form from the previous post, but in this code I added the key EventObject on the form, so when user press enter on the form, it will submit the form like the traditional html form

4. The Function Handler

The function handler name is “fnLogin” as you can see on the code above (on the step 3), when the form submitted the event on beforeaction is called an it masking the window, why not mask the form? because when I try mask the form it will only masked the fieldLabel and the textField but not the button, so just mask the window and it will mask everything inside it. The beforeaction event have to be defined before the form submit function, or it wil not work.

5. Create The Server Response

I Create a file named “server_response.php”, the php code is the same as the previous post, it just checking username from the hardcoded array.

The expected screen should be like the image below, the form when in the default condition, loading, give the error message, and when the success is achieved.

If you want another form load masking example there a sample by Saki here (I think it is more advanced), or if you like to add more advance StatusBar validation you can learn the official samples here. Finally like always I provide the code the be downloaded but I’m not included the Extjs file, you can download it from the official website, here.

DOWNLOAD SOURCE

EXTJS: Getting each row value from the grid

aditia rahman — Fri, 14 May 2010 02:44:12 +0000

When I write this post, a friend of mine asking me how to get the value from all the row in EXTJS grid, she use EditorGridPanel to make the grid editable by it’s user, and submit all edited value in each row to the server i’m using php to take all the server side process). Actually the idea is very simple, the grid need to have sm config options it is a shorthand for selModel and this config that make the grid can be selected per row, and you can added the checkboxselection model to choose the row that you desired, so trid to make it simple tutorial, and at the of the post you can download the source from this post.

1. Setting the main page
Include the EXTJS file (javascript and css) in html header file, then create single div with an id to where the grid to put on, and i’m using inline css style to centering the div the on the page









/* This should be fill with the EXTJS script code
 * It explain on the next step
 */

// on the body section

2. Create the data in array for store inside the grid
To make it simple I using data for grid from an array, for more expert use, maybe using Json data reader will be fit

var myData = [
	[1, 'Luffy', 'Monkey D Luffy', 'monkeyd@luffy.com', 'East Blue'],
	[2, 'Zoro', 'Roronoa Zoro', 'roronoa@zoro.com', 'East Blue'],
	[3, 'Sanji', 'Leg Sanji', 'sanji@baratie.net', 'East Blue'],
	[4, 'Usop', 'Soge King', 'usap@sogevillage.com', 'East Blue'],
	[5, 'Franky', 'Franky Cyborg', 'franky@water7.com', 'East Blue'],
	[6, 'Chopper', 'Tony Chopper', 'chopper@drum.com', 'East Blue']
];

3. Create the data store for editable grid, in this case i’m using Form.ComboBox

// main store for grid
var store_mbti = new Ext.data.ArrayStore({
	fields: [
		{ name: 'id' }, { name: 'username' }, { name: 'full_name' },
		{ name: 'email' }, { name: 'village' }
	]
});

// store including the data for editable grid, using Form.ComboBox
var strVillage = new Ext.data.SimpleStore({
	fields: ['village'],
	data : [['Baratie'], ['Drum Island'],
		['Soge Island'],['Swordmen Land']]
});

4. Create the checkboxselectionmodel
This component have to be created and included in grid config options named sm, the selModel, this is to make the entire single row selectable

var cb_select = new Ext.grid.CheckboxSelectionModel();

5. Create the main grid component
If you want the grid to be manually selectable by the user you need to add cb_select in the grid column header

var grid_mbti = new Ext.grid.EditorGridPanel({
	store: store_mbti,  frame: true, border: true, autoHeight: true,
	resizable: true, loadMask: true, stripeRows: true,
	title:'Grid Select All', sm: cb_select,
	columns: [
		// cb_select, // uncomment, if using checkboxselectionmodel
		{ header: "Username", dataIndex: 'username', },
		{ header: "Full Name", dataIndex: 'full_name', width: 150 },
		{ header: "Email", dataIndex: 'email', width: 150 },
		{ header: "Village", dataIndex: 'village', width: 120,
			editor: new Ext.form.ComboBox({
				allowBlank: false,
				mode: 'local',
				store: strVillage,
				valueField: 'village',
				displayField: 'village',
				triggerAction: 'all',
				editable: false
			})
		}],
	tbar: [{
		text: 'Submit',
		handler: function() {
			// the implementation is in the next step
		}
	}]
});

6. Load the store and render the grid

store_mbti.loadData(myData);
grid_mbti.render('grid-example1');

The alternative way from using render grid is, to add config option on grid named renderTo and fill it with html id that you desire

7. Function handling on the toolbar, using ajax or not it’is up to you
Creating function handler should be in handler config in toolbar button, when I try my self it got some error on firebug

// this implementation is inside button handler on step 5
handler: function() {
	grid_mbti.getSelectionModel().selectAll();
	var sm = grid_mbti.getSelectionModel().getSelections();
	var temp = '';
	for (i=0; i<=sm.length-1; i++) {
		temp = temp + '|' + sm[i].get('village')
	}
	Ext.Ajax.request({
		url: 'process_data.php',
		method: 'POST',
		params: 'village=' + temp,
		success: function(obj) {
			var resp = obj.responseText;
			if (resp != 0) {
				Ext.MessageBox.alert('Success', resp + ' Processed');
			} else {
				Ext.MessageBox.alert('Failed', 'No Processed');
			}
		}
	});
}

8. Handling the server side process
Like the previous step, the php file I called is process_data.php, the php script convert the variable received to an array, and then you can loop through the array

The result screen should be like this, first before submit with the last one column editable

And after click the submit button on the top left of the grid toolbar, all the row in the grid should be selected

Yup that’s all, you can download all the code from the link below but once again i’m not included the EXTJS file, you just can download it by your self on the official site. In the downloaded code I provide 2 grid with different use of selection model so you can clearly see the different, and I welcome for any suggestion from you thanks.

DOWNLOAD SOURCE

Unique Field Form Validation Using PHP and EXTJS

aditia rahman — Fri, 07 May 2010 10:10:41 +0000

In this post I try to share my code about form validation in EXTJS, so why another EXTJS form validation tutorial? well, the EXTJS default form validation is quite great, but most sample that I’ve found it just using client side validation and the only server side validation is when the user press submit button. So in this post the I modified a bit code about custom form validation in EXTJS, and here I’m not using database. The expected result should be like this

Let’s start :

1. Include EXTJS file in html header

2. Create The EXTJS form

3. Code for modified custom validation
The idea is overiding the custom validation everytime it called

4. The simple php file validation
For more advanced usage you can use some database connection, and I call it check_username.php

You can download all files following the download link below, but i’m included EXTJS file you can download from the official site here.

DOWNLOAD SOURCE

Simple steps to understanding ExtJS

aditia rahman — Fri, 21 Aug 2009 02:39:40 +0000

ExtJS is one of the most popular javascript user interface framework, it offer a bunch of great user interface component, if you are a Java Programmer it better you use the Ext-GWT, but if you are a web programmer who always using web scripting language such as PHP, it may be painless if you learn the new web interface beside the traditional HTML, but i did it and mix it with Codeigniter in purpose to create and maintain better PHP code, and it’s not really bad and here some advice I have for you :

1. Follow the examples

ExtJS come with a bunch of great sample use of using widget, this provide the basic use of the component, creating plugin, etc. This is the best way to know what you can do with the component and how to implement the component by viewing the source code, if you somehow don’t understand what the code means, simply you can consult the API documentation first. Just download it first and run on your local server or you can view it online.

2. Read the ExtJS tutorial

So, you are ready to get your hand wet ? but don’t know what to do to digging depper to understanding ExtJS, I suggest you start with tutorial from the ExtJS official site. It’s cover about the getting started guide, dom query helper, combobox, form, grids, drag & drop, menus, tree, etc, even the basic of the application design and some of them provide the downloadable example source code. Although the tutorial is useing version 1.x and 2.x, yes it is compatible if you are using version 3.

3. Don’t fear to read the API

The ExtJS API documentation come with the bundle when you’re downloading ExtJS. So how this gonna be useful ? well for me it provide very useful information about the Ext core and default config options, properties, events, method for each component, it’s a good reference when you are trying to manipulating the component. Some component given the basic example of usage. Just download the ExtJS bundle and you can find it in examples folder or you can view it online

4. Consult the spesific question to the forum

When I get some trouble I always use Google first, type your spesific question on Google and most of the solution found in the ExtJS official forum and i always found the solution is very handy and easy to understand. Even some of the expert member provide advance source about ExtJS like quick search plugin, grid paging row numberer and custom themes and you can download it for free.

5. Use the good IDE

Since you use ExtJS in javascript language, the you must code all the ExtJS component by hand, and you need the good IDE to help you browse the all avaliable API. I’m personally using Netbeans PHP IDE for my project, you can set the project and include the ExtJS style, ExtJS basic and ExtJS all. The IDE will scan all the project including the ExtJS file and when you code the ExtJS component or ExtJS core, you can type shift + space on your keyboard and the IDE will give an autocomplete feature, and it helping me a lot, maybe not all the method shown in the autocomplete feature but you still can browse on the API documentation. If your not the fan of Netbeans, you can use other great IDE like Eclipse or Aptana.

6. You may need to know a bit about Javascript Language

My experience is when i code the event handler of the component, sometimes need like client side validation, like is defined object, sel length etc. When you found this trouble just googling about spesific javascript question and it’is not really hard.

more ExtJS Resource and tutorial

Video tutorial from EXTJS.TV bunch of ExtJS Tutorial

http://defafe.com a blog about ExtJS tutorial

Example ExtJS in Action some of link not working but the ExtPlorer is good.

TuturTinular a blog who have some ExtJS tutorial

ExtJS and WordPress wordpress themes usign extjs and it’s free to download

Using ExtJS grid in WordPress Admin

Integrating CakePHP and ExtJS

http://blog.extjs.eu/