What ExtJS 3 pitfalls should I avoid?

Question

I am about to write a relative small data entry application using ExtJS 3+ for the front end, what pitfalls should I avoid when using ExtJS 3+?

• One pitfall that comes to mind is not truly understanding JavaScript (e.g.closures)

• Trying to use MVC pattern on the client side.

Answer 1

Keep an eye out for executing things in your object (JSON) definition.

function MyPanel() {
}

function createParam() {
  return {param: 'value'};
}

Ext.extend(MyPanel, ext.Panel, {
  someParam = createParam();
});

In the above example the stuff inside Ext.Extend will get executed once when Javascript is loaded. This means that all instances of MyPanel will share the same instance of someParam. In this scenario such initialization needs to go in the constructor:

function MyPanel() {
  this.someParam = createParam();
}

Answer 2

Choose your design deliberately: keep a clear separation between the Ext JS UI (front-end) and the web service (back-end). Do not use a back-end scripting language to render your JavaScript - write Ext JS code purely in *.js files and communicate to RESTful JSON web services as needed.

Answer 3

Use proper namespaces so you don't pollute the global namespace, Ext.ns() is your friend here:

Ext.ns("AlexanderN.Application");

AlexanderN.Application.MainWindow = Ext.extend(Ext.Window,{
  ...
});

etc.