1.

Define YOur Own Component

MyApp.MyPanel = function(config) {
MyApp.MyPanel.superclass.constructor.call(this,
Ext.applyIf(config, {
title: 'default title'
}));
};
Ext.extend(MyApp.Mypanel, Ext.Panel, {
//override methods go here
});
Ext.reg('mypanel', MyApp.MyPanel);
var p = new MyApp.MyPanel({
title: 'My title'
});
var config ={
xtype: 'mypanel',
title: 'My title'
}
********************************************
2. Use An Event Manager
(separate UI | Logic)
MyApp.eventManager = new Ext.util.Observable();
MyApp.eventManager.addEvent('selectnode');
//in a tree click listener
MyApp.eventManager.fireEvent('selectnode', node);
//after a grid is defined - wire it up to the tree;
MyApp.eventManager.on('selectnode', grid.loadModeData.createDelegate(grid);
********************************************
3. Override The Framework Properly
Ext.override(Ext.data.Store, {
getByName: function(name) {
this.getAt(this.findEXact('name', name));
}
}); >> overrides.js
4. Remember, Its Still A Web App

5. Prefer an Ext JS SPA to a classic "web app"

*************************************************
Pratical Ext JS Debugging
Events & Callbacks
myComp.on('myevent', this.myHandler, this)
listeners: {
myevent:{
fn: this.myHandler,
scope: this
}
}

***************************************************
Base Classes
***************************************************
Ext.Namespace('Meetup.form');
Meetup.form.MYBaseClasses = Ext.extend(Ext.form.FormPanel, {
defaultItem : 'textfield',
initComponent: function() {
this.items = this.items || [];
this items.concat(this.buildFields());
this.buttons = this.buildbuttons();
Meetup.form.MYBaseClasses.superclass.initComponent.call(this);
this.addEvents({
save: true
});
},
buildFields; function () {
return [
{
fieldLabel: 'First Name',
name: 'firstName'
},
{
fieldLabel: 'Last Name',
name: 'lastName'
}
];
},
buildButtons; function () {
return [
{
text: 'Reset',
scope: this,
handler: this.onResetBtn
},
{
text: 'Save',
scope: this,
handler: this.onSaveBtn
}
];
},
onResetBtn: function() {
this.getForm().reset();
},
onSaveBtn: function() {
this.fireEvent('save', this.getForms().getValues());
}
});
Ext.reg('mybaseclass', Meetup.form.MYBaseClasses)
new Ext.Window({
width: 400,
height: 300,
layout: 'fit',
items: {
xtype: 'mybaseclass',
items: [
{
xtype: "textfield",
fieldLabel: 'my new field'
}
]
}
}).show();
**********************************************************
Data Stores and Grid Panels
**********************************************************
Ext.onReady(function(){
var myArray = [
['Jay'], ['Sam'], ['Peter']
];
var proxy = new Ext.data.MemoryProxy(myArray);
var record = Ext.data.Record.create(['name']);
var myReader = new Ext.data.ArrayReader({}, record);
var store = new Ext.data.Store({
reader: myReader,
proxy: proxy,
autoLoad: true,
listeners: {
load: function(obj, records) {
Ext.each(records, function(rec){
console.info('Hi ' + rec.get('name'));
});
}
}
});
});
*********************************************
Array Store
*********************************************
Ext.onReady(function(){
var myArray = [
['Jay'], ['Sam'], ['Peter']
];
var store = new Ext.data.ArrayStore({
data: myArray,
//url: 'http://localhost...'
 fields : ['name'],
autoLoad: true,
listeners: {
load: function(obj, records) {
Ext.each(records, function(rec){
console.info('Hi ' + rec.get('name'));
});
}
}
});

});
*********************************************
Json Store
*********************************************
Ext.onReady(function(){
var fields = [
{
name: 'lastName',
mapping: 'lastname'
},
{
name: 'firstName',
mapping: 'firstname'
}
];
var proxy = new Ext.data.ScriptTagProxy({
url: 'http://extjsinaction.com/dataQuery.php',
baseParams: {
limit: 50
}
});
var store = new Ext.data.JsonStore({
proxy: proxy,
fields: fields,
root: 'records',
autoLoad: true,
listeners: {
load: function(obj, records) {
Ext.each(records, function(rec){
console.info('Hi ' + rec.get('firstName'
) + ' ' + rec.get('lastName'));
});
}
}
});
************************************
Grid Panel config
************************************
var columns = [
{
header: 'First Name',
dataIndex: 'firstName'
},
 {
header: 'Last Name',
dataIndex: 'lastName'
},
{
header: 'Full Name',
dataIndex: 'firstName'
renderer: function(value, metaData, record){
metaData.style += 'color: #f00; font-weight: bol
d;';
//return '<a href="#" onclick="javascript:jhjh">
' + value + '</a>'
//return '<span style="color: #f00; font-weight:
bold;">' + value + '</span>'
return record.get('lastName') + ', ' + value;
}
}
];
var grid = new Ext.grid.GridPanel({
title : 'My Grid Panel',
frame: true,
renderTo: Ext.getBody(),
height: 300,
width: 500,
store: store,
loadMask: true,
columns: columns,
viewConfig: {
forceFit: true
}
});
});

********************************************************
Abstract Classes
********************************************************
AbstractFormPanel.js
********************************************************
Ext.ns('MyApp');
MyApp.AbstractFormPanel = Ext.extend(Ext.form.FormPanel, {
defaultType: 'textfield',
frame: true,
width: 300,
height: 200,
labelWidth: 75,
submitUrl: null,
initComponent: function() {
Ext.apply(this, {
items: this.buildItems(),
buttons: this,buildButtons(),
default: {
anchor: '-10'
}
});
 MyApp.AbstractFormPanel.superclass.initComponent.call(this);
},
buildItems: function(){
return [];
},
buildButtons: function(){
return [
{
text: 'Submit',
scope: this,
handler: this.onSubmit
},
{
text: 'Cancel',
scope: this,
handler: this.onCancel
}
];
},
onSubmit: function(){
Ext.MessageBox.alert('Submit', this.submitUrl);
},
onCancel: function(){
this.el.mask('This form is canceled');
}
});

********************************************************
index.html
********************************************************
<script type="text/javascript" src="MyApp/AbstractFormPanel.js"></script>
<script type="text/javascript" src="MyApp/NameFormPanel.js"></script>
<script type="text/javascript" src="MyApp/AddressFormPanel.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
new MyApp.NameFormPanel({
renderTo: Ext.getBody()
});
new MyApp.AddressFormPanel({
renderTo: Ext.getBody()
});
});
</script>
********************************************************

********************************************************
NameFormPanel.js
********************************************************
Ext.ns('MyApp');
MyApp.NameFormPanel = Ext.extend(MyApp.AbstractFormPanel, {
title: 'Edit name data',
submitUrl: 'nameAction.asp',
 buildItems: function(){
return [
{
name: 'firstName',
fieldLabel: 'First Name'
},
{
name: 'lastName',
fieldLabel: 'Last Name'
},
{
name: 'middleName',
fieldLabel: 'Middle Name'
},
{
xtype: 'dateField',
name: 'dob',
fieldLabel: 'DOB'
}
];
},
//Extension
buildButtons: function(){
var btns = MyApp.NameFormPanel.superclass.buildButtons.call(this
);
btns[0].text = "OK";
btns[0].handler = this.onOkBtn;
return btns;
},
//Override
onOKBtn: function(){
console.info('Ok btn pressed');
}
});
********************************************************

********************************************************
AddressFormPanel.js
********************************************************
Ext.ns('MyApp');
MyApp.AddressFormPanel = Ext.extend(MyApp.AbstractFormPanel, {
title: 'Edit address data',
submitUrl: 'addressAction.asp',
buildItems: function(){
return [
{
name: 'address1',
fieldLabel: 'Address 1'
},
{
name: 'address2',
fieldLabel: 'Address 2'
},
{
name: 'city',
fieldLabel: 'City'
},
 {
xtype: 'combo',
name: 'state',
fieldLabel: 'State',
store: ['MD','VA','DC']
},
{
xtype: 'numberField',
name: 'zip',
fieldLabel: 'Zip Code'
},
];
}
});
********************************************************
app.extjsinaction.com
********************************************************
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Ext JS in Action Chapter 16</title>
<link rel="stylesheet" type="text/css" href="resources/js/ext-3.1.1/resource
s/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="resources/css/icons.css" />
<link rel="stylesheet" type="text/css" href="resources/css/ext-overrides.css
" />
<script type="text/javascript" src="resources/js/ext-3.1.1/adapter/ext/ext-b
ase-debug.js"></script>
<script type="text/javascript" src="resources/js/ext-3.1.1/ext-all-debug.js"
></script>
<script type="text/javascript" src="resources/js/overrides/form/ComboBox.js"
></script>
<script type="text/javascript" src="resources/js/overrides/chart/FlashCompon
ent.js"></script>
<script type="text/javascript" src="resources/js/overrides/chart/Chart.js"><
/script>
<!-- TKE Sub-framework JavaScript -->
<script type="text/javascript" src="resources/js/TKE/chartpanel/ChartPanelBa
seCls.js"></script>
<script type="text/javascript" src="resources/js/TKE/chartpanel/DepartmentBr
eakdown.js"></script>
<script type="text/javascript" src="resources/js/TKE/chartpanel/CompanySnaps
hot.js"></script>
<script type="text/javascript" src="resources/js/TKE/form/FormPanelBaseCls.j
s"></script>
<script type="text/javascript" src="resources/js/TKE/form/DepartmentForm.js"
></script>
<script type="text/javascript" src="resources/js/TKE/form/EmployeeForm.js"><
/script>
<script type="text/javascript" src="resources/js/TKE/listpanel/ListPanelBase
Cls.js"></script>
<script type="text/javascript" src="resources/js/TKE/listpanel/DepartmentLis
t.js"></script>
<script type="text/javascript" src="resources/js/TKE/listpanel/EmployeeList.
js"></script>
<script type="text/javascript" src="resources/js/TKE/grid/EmployeeGridPanel.
js"></script>
<script type="text/javascript" src="resources/js/TKE/window/EmployeeAssociat
ionWindow.js"></script>
<script type="text/javascript" src="resources/js/TKE/window/UserLoginWindow.
js"></script>
<!-- Application JavaScript -->
<script type="text/javascript" src="resources/js/CompanyManager/workspace.js
"></script>
<script type="text/javascript" src="resources/js/CompanyManager/Dashboard.js
"></script>
<script type="text/javascript" src="resources/js/CompanyManager/DepartmentMa
nager.js"></script>
<script type="text/javascript" src="resources/js/CompanyManager/EmployeeMana
ger.js"></script>
<script type="text/javascript" src="resources/js/CompanyManager/EmployeeEdit
orWindow.js"></script>

</head>
<body>
</body>
******************************************************