[Ext JS 4] MVC application framework

Source: Internet
Author: User

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.


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'    ],    ...});


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',     ...});

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.