Here is a step by step procedure to get started with a basic extjs application. It covers handling data rendering in gridpanel as well.
1. Download ExtJS and unzip it to your web path.
2. Create an html file (say test_page.html) with these contents. This will be used to render the page.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title> Main Page </title>
<link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css" />
<script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext/ext-all.js"> </script>
<script type="text/javascript" src="javascripts/test_ext_widget.js"> </script>
</head>
<body>
<div id="header">
</div>
</body>
</html>
3. Create php file (extjs.php) with the following contents. This file return a JSON object which will be rendered by extjs.
<?php
$start = @$_REQUEST["start"];
$limit = @$_REQUEST["limit"];
$start = $start ? $start : 0;
$limit = $limit ? $limit : 5;
$data = array(
array("first"=>'Jack', "last"=>'Shephard',"bpay"=>7.75,"cpay"=>8.75,"email"=>'jackx@clemsonx.edu',"uid"=>'jackx', "hiredate"=>'8/1 12:00am'),
array("first"=>'James', "last"=>'Ford',"bpay"=>7.75,"cpay"=>8.75, "email"=>'jamesx@clemson.edu',"uid"=>'jamesx', "hiredate"=>'9/1 12:00am'),
array("first"=>'Kate',"last"=>'Austen', "bpay"=>7.75,"cpay"=>8.75, "email"=>'katex@clemson.edu',"uid"=>'katex', "hiredate"=>'10/1 12:00am'),
array("first"=>'Juliet',"last"=>'Burke',"bpay"=>7.75,"cpay"=>8.75, "email"=>'julietx@clemson.edu',"uid"=>'julietx', "hiredate"=>'9/1 10:00am'),
array("first"=>'Sayid',"last"=>'Jarrah',"bpay"=>7.75,"cpay"=>8.75, "email"=>'sayidx@clemson.edu',"uid"=>'sayidx', "hiredate"=>'9/1 11:00am'),
);
$a = array();
for($i = $start; $i < 5; $i++) {
$a[] = $data[$i];
}
$o = array(
"success"=>true
,"totalCount"=>sizeof($data)
,"rows"=>$a
);
echo json_encode($o);
?>
4. Finally a js file (say test_ext_widget.js) which will contain the javascript to render the page. This would render a page with three panel objects (gridpanel, formpanel, treepanel).
Ext.ns('app_harpreet');
Ext.BLANK_IMAGE_URL = 'ext/resources/images/default/s.gif';
var item_list = [ {xtype : 'textfield', fieldLabel : 'First name'},
{xtype : 'textfield', fieldLabel : 'Last name'},
{xtype : 'textfield', fieldLabel : 'Email'},
{xtype : 'textfield', fieldLabel : 'Student ID'},
{xtype : 'textfield', fieldLabel : 'Current Pay'},
{xtype : 'textfield', fieldLabel : 'Base Pay'},
{xtype : 'datefield', fieldLabel : 'Hire Date'}
];
var final_cbox = new Ext.form.Checkbox( {
name : 'final_question',
id : 'final_question',
inputValue : 1,
fieldLabel : 'Suspended',
checked : true
});
item_list.push(final_cbox);
var btns = [];
btns.push( {text : 'Save', scope : this});
btns.push( {text : 'Cancel', scope : this});
// now the actual form
var uForm = new Ext.form.FormPanel( {
id:'u_form', region:'center', bodyStyle:'padding:30px', items:item_list, buttons:btns});
var window1 = new Ext.Window( {
id : 'user_edit_win',
title : 'Edit',
width : 900,
height : 650,
minWidth : 500,
minHeight : 600,
layout : 'border',
plain : true,
modal : true,
bodyStyle : 'padding:55px;',
items : [ uForm ]
});
// Custom grid pre-configured class
app_harpreet.Grid = Ext.extend(Ext.grid.GridPanel, {
//double click on user row opens a pop up window which can be used for updating record
_user_row_click : function() {window1.show();},
initComponent : function() {
var config = {
store : new Ext.data.JsonStore( {
id : 'members',
totalProperty : 'totalCount',
root : 'rows',
url : 'extjs.php',
fields : [ {name : 'first'},
{name : 'last'},
{name : 'email'},
{name : 'uid'},
{name : 'cpay', type : 'float'},
{name : 'bpay', type : 'float'},
{name : 'hiredate', type : 'date', dateFormat : 'n/j h:ia'}
]
}),
listeners : {
rowdblclick : this._user_row_click,
scope : this
},
columns : [ {
id : 'uid',
header : "UID",
width : 40,
sortable : true,
dataIndex : 'uid'
},{
id : 'first',
header : "First",
width : 40,
sortable : true,
dataIndex : 'first'
},{
id : 'last',
header : "Last",
width : 40,
sortable : true,
dataIndex : 'last'
}, {
id : 'base',
header : "Base Pay",
width : 40,
sortable : true,
renderer: Ext.util.Format.usMoney,
dataIndex : 'bpay'
}, {
id : 'pay',
header : "Current Pay",
width : 40,
sortable : true,
renderer: Ext.util.Format.usMoney,
dataIndex : 'cpay'
},{
id : 'email',
header : "Email",
width : 40,
sortable : true,
dataIndex : 'email'
}, {
header : "Hire Date",
width : 20,
sortable : true,
renderer : Ext.util.Format.dateRenderer('m/d/Y'),
dataIndex : 'hiredate'
},{
id : 'suspend',
header : "Suspend Until",
width : 40,
sortable : true,
dataIndex : 'suspend'
}],
viewConfig : {forceFit : true}
};
// apply config
Ext.apply(this, Ext.apply(this.initialConfig, config));
this.bbar = new Ext.PagingToolbar( {
store : this.store,
displayInfo : true,
pageSize : 10,
items : [ { xtype : 'textfield' } ]
});
// call parent
app_harpreet.Grid.superclass.initComponent.apply(this, arguments);
}
,
onRender : function() {
// call parent
app_harpreet.Grid.superclass.onRender.apply(this, arguments);
// load the store
this.store.load( {params : {start : 0,limit : 10}});
}});
Ext.reg('membergrid', app_harpreet.Grid);
var item_list1 = [ {xtype : 'textfield',fieldLabel : 'First name'},
{xtype : 'textfield',fieldLabel : 'Last name'},
{xtype : 'textfield', fieldLabel : 'Email'},
{xtype : 'textfield', fieldLabel : 'Student ID'} ];
var btns1 = [];
btns1.push( { text : 'Edit' });
Ext.onReady(function() {
var viewport = new Ext.Viewport( {
layout : 'border',
items : [ { //left tree panel
xtype : 'treepanel',
region : 'west',
collapsible : true,
title : 'Navigation',
id : 'tpNavigation',
root : new Ext.tree.AsyncTreeNode( {
expanded : true,
text : 'Home',
children : [ {text : 'User',leaf : true},
{text : 'Manage users',leaf : true},
{text : 'Clients',leaf : true}]
}),
rootVisible : false,
width : 200
// the west region uses a TreePanel with Accordion layout
}, { //bottom panel
region : 'south',
title : 'Search',
collapsible : true,
height : 200,
minHeight : 200,
items : [ {
xtype : 'form',
items : item_list1,
buttons : btns1
} ]
}, { // main panel to dispay records
region : 'center',
layout : 'fit',
title : 'Center',
xtype : 'membergrid'
} ]
});
});
Now you can point your browser to your html page to render the treepanel, formpanel and gridpanel. The page would make a call to extjs.php, to retrieve the data, as a Json object.
You can double click on the rows to open a pop up window, which can be used to update the data in the row.(row update is not accomplished in the above code)
Please let me know of any improvements/corrections.
