[Ext JS 4] MVC application framework

Preface

Large Client Applications are always difficult to write and are difficult to organize and maintain. As features increase and more developers join the project, project control becomes increasingly difficult. Ext js 4 provides a new application framework to help organize code.

Model-a set of columns and data. Model (use record class in ext JS 3)

View-component type, grids, trees, and panels are both

Controller-used to render the attempt, instance model, and other application logic

File structure

EXT JS4 follows a unified directory structure. Let's look at an example:

The content of index.html is roughly as follows:

Create an application in APP. js


Each ext JS 4 Application Starts from creating an application class instance. In this application instance, some global settings (such as the application name) and models are configured to try and set controllers. An application also contains a startup function.
A simple account management application is used as an example,
First, define a global namespace. All ext JS applications should use a global namespace. All application classes are located under this space. Here we use "am" as an example.

Ext.application({    name: 'AM',     appFolder: 'app',     launch: function() {        Ext.create('Ext.container.Viewport', {            layout: 'fit',            items: [                {                    xtype: 'panel',                    title: 'Users',                    html : 'List of users will go here'                }            ]        });    }});
Define a controller
The Controller is the glue that connects applications together. They listen to events (from the View) and perform some operations. Continue to the example above and create a controller.
app/controller/Users.js

Ext.define('AM.controller.Users', {    extend: 'Ext.app.Controller',     init: function() {        console.log('Initialized Users! This happens before the Application launch function is called');    }});
Then, add the Controller to the application (App. JS)

Ext.application({    ...     controllers: [        'Users'    ],     ...});

When index.html is added to a browser, the users controller is automatically loaded and Its init function is called before the lanch function is executed.
The init function is used to set the Controller to interact with and to associate it with other controllers. The control function can easily listen to events and execute corresponding action processing functions. Improve the above users Controller

Ext.define('AM.controller.Users', {    extend: 'Ext.app.Controller',     init: function() {        this.control({            'viewport > panel': {                render: this.onPanelRendered            }        });    },     onPanelRendered: function() {        console.log('The panel was rendered');    }});
This. Control is used in the init function to listen to view events. The control function uses the latest componentquery engine to quickly find referenced components. For more information about componentquery, see componentquery documentation.
The running result is as follows:

Define a view
The attempt is nothing more than a component. Here we create a users grid definition in the fileapp/view/user/List.jsMedium

Ext.define('AM.view.user.List' ,{    extend: 'Ext.grid.Panel',    alias : 'widget.userlist',     title : 'All Users',     initComponent: function() {        this.store = {            fields: ['name', 'email'],            data  : [                {name: 'Ed',    email: 'ed@sencha.com'},                {name: 'Tommy', email: 'tommy@sencha.com'}            ]        };         this.columns = [            {header: 'Name',  dataIndex: 'name',  flex: 1},            {header: 'Email', dataIndex: 'email', flex: 1}        ];         this.callParent(arguments);    }});
Next, add the view to the users controller.
Ext.define('AM.controller.Users', {    extend: 'Ext.app.Controller',     views: [        'user.List'    ],     init: ...     onPanelRendered: ...});
Then put it in the viewport in APP. js.
Ext.application({    ...     launch: function() {        Ext.create('Ext.container.Viewport', {            layout: 'fit',            items: {                xtype: 'userlist'            }        });    }});
Here, xtype is used to specify the userlist (dynamic import is used). The effect is as follows:

Control Grid

Here, the double-click event of each row is added:

Ext.define('AM.controller.Users', {    extend: 'Ext.app.Controller',     views: [        'user.List'    ],     init: function() {        this.control({            'userlist': {                itemdblclick: this.editUser            }        });    },     editUser: function(grid, record) {        console.log('Double clicked on ' + record.get('name'));    }});
The effect is as follows:

Here, edit is just a simple output log. The following shows a complex editing function, which definesapp/view/user/Edit.js:

Ext.define('AM.view.user.Edit', {    extend: 'Ext.window.Window',    alias : 'widget.useredit',     title : 'Edit User',    layout: 'fit',    autoShow: true,     initComponent: function() {        this.items = [            {                xtype: 'form',                items: [                    {                        xtype: 'textfield',                        name : 'name',                        fieldLabel: 'Name'                    },                    {                        xtype: 'textfield',                        name : 'email',                        fieldLabel: 'Email'                    }                ]            }        ];         this.buttons = [            {                text: 'Save',                action: 'save'            },            {                text: 'Cancel',                scope: this,                handler: this.close            }        ];         this.callParent(arguments);    }});
Next, add the controller:
Ext.define('AM.controller.Users', {    extend: 'Ext.app.Controller',     views: [        'user.List',        'user.Edit'    ],     init: ...     editUser: function(grid, record) {        var view = Ext.widget('useredit');         view.down('form').loadRecord(record);    }});
The implementation result is as follows:

Create model and store



Create APP/store/users. js

Ext.define('AM.store.Users', {    extend: 'Ext.data.Store',    fields: ['name', 'email'],    data: [        {name: 'Ed',    email: 'ed@sencha.com'},        {name: 'Tommy', email: 'tommy@sencha.com'}    ]});
Then let the controller use this store
Ext.define('AM.controller.Users', {    extend: 'Ext.app.Controller',    stores: [        'Users'    ],    ...});
Updateapp/view/user/List.js 
Ext.define('AM.view.user.List' ,{    extend: 'Ext.grid.Panel',    alias : 'widget.userlist',     //we no longer define the Users store in the `initComponent` method    store: 'Users',     ...});