Saturday, November 5, 2011

How to organize ExtJS 4 in huge projects

My first blog post ... yehaaa.
Ok back to topic.

Background

In my recent project I use ExtJS 4.0.2a to obtain a unify clean user interface.
The structure of ExJS should be conform to the PHP backend which is structured in different modules. This is necessary to provide a consistent ACL.

Getting started with ExtJS 4

Javascript always excited me with the freedom to script functional and object oriented with different inheritance approaches, so I know how to debug JS.
I'm not real beginner with ExtJS but far from being experienced. I was using a few components at version 2.
Sooo for getting started it was the best to take a closer look at the tutorials on sencha.com.
The MVC tutorial was the best entry point for getting some know how.
After that set up the project wasn't very difficult.

In this tutorial ExtJS pretends to use the following folder structure:
project/app/
controller
model
store
view

This doesn't fit with the requirement to use modules.
Then I did a little research how to organize ExtJS with modules and didn't got the right solutions.

So I did a little debugging session at the ExtJS autoloader and found out that if I use absolute Class Names the autoloader will find my classes also if i put them into module folders...

Example

Let's say we have the following folders:


We have three modules each contains controller, model, store and view folders.
The project folder contains the extjs bootstrap file app.js with the following code:


Ext.application({
    name: 'Project',

    appFolder: '/project/app',

    controllers: [
        'Poject.blog.controller.Index',
        'Poject.forum.controller.Index',
        'Poject.administration.controller.Index'
    ],

    launch: function()
    {
        Ext.create('Project.blog.view.Viewport');
    }
});

As you can see I'm using absolute names starting with the project name (which is imaginative "Project" in this case).

And this should do the trick. When you keep this convention through all classes within your project all files could be loaded by ExtJS autoloader.

Easy isn't it?
Enough for my first post ... hopefully :)

Class example:


Ext.define('Project.blog.view.Viewport', {
    extend: 'Ext.container.Viewport',
    ...
    ...
    ...
});

Controller Example:


Ext.define('Project.blog.controller.Index', {
    extend: 'Ext.app.Controller',

    models: ['Project.blog.model.SomeModel'],

    stores: ['Project.blog.store.SomeStore'],

    views: ['Project.blog.view.Viewport'],

    init: function() { ... }
});

3 comments:

  1. As far as I understand, you do not use MVC Application that was introduces in ExtJS 4. Am I right?

    ReplyDelete
    Replies
    1. Well, the code is taken from a project which is build with extJS 4.
      There is an Ext.application file, a controller example and a folder screen where you can see all parts of the MVC including stores.

      Delete