Five Tips to Improve Your Ext JS Application

@jonathanjulian

1. Define your own components

Be explicit

reusablemodular

maintainable

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

UI Logic

Event

Event Manager

Secondary Event(s)

MyApp.eventManager = new Ext.util.Observable();MyApp.eventManager.addEvents('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.loadNodeData.createDelegate(grid));

consolidate codesimplify adding features

3. Override the framework properly

Do not edit the library files

DO NOT EDIT THE LIBRARY FILES

DO NOT EDIT THE LIBRARY

FILES!

Ext.override

Ext.override(Ext.data.Store, { getByName: function(name) { this.getAt(this.findExact('name', name)); }});

overrides.js

directory structure

+-ext-3.1.0 +-ext-base.js +-ext-all.js +-resources +-css +-ext-all.css +-images +-default+-ux (User eXtensions) +-Ext.ux.tree.TreeFilterX.js+-project-name +-overrides.js +-application.js +-MoviesGrid.js

4. Remember, it’s still a web app

JSLint

Speedor

Perception of Speed

Content delivery:combineminimize

gzip

browser cache with Expires header

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

var grid = { id: <%= @article.id %>, border: <%= @article.size > 50 ? ‘true’ : ‘false’ %> xtype: ‘grid’, items: [ <%= generate_items(@article) %> ]};

var grid = { id: <%= @article.id %>, border: <%= @article.size > 50 ? ‘true’ : false %> xtype: ‘grid’, items: [ <%= generate_items(@article) %> ]};

AVOID

ServerRails, PHP, JSP, ASP.NET,ColdFusion, Perl

UI - Ext JSJSON

"Don't buy a cow and then milk the goat."

"Don't buy a cow and then milk the goat."

jonathanjulian.com