ext mvc

ext mvc 

首先创建application : 显示主页面，配置Controller

Ext.application({
    requires: ['Ext.container.Viewport'],
    name: 'AM',

    appFolder: 'app',
    
    controllers: [
                  'UserController'
    ],

    launch: function() {
        Ext.create('Ext.container.Viewport', {
            layout: 'fit',
            items: {
            	xtype: 'userlist'
            }
        });
    }
});

创建Controller：配置Models,views,stores,control

Ext.define('AM.controller.UserController', {
    extend: 'Ext.app.Controller',
    
    views: [
            'user.List',
            'user.Edit'
    ],
    
    stores: ['Users'],
     
     models: ['User'],


    init: function() {
    	this.control({
            'userlist': {
                itemdblclick: this.editUser
            },
            'useredit button[action=save]': {
                click: this.updateUser
            }
        });
    },


    editUser: function(grid, record) {
    	var view = Ext.widget('useredit');
        view.down('form').loadRecord(record);
    },
    updateUser: function(button) {
    	var win    = button.up('window'),
        form   = win.down('form'),
        record = form.getRecord(),
        values = form.getValues();
	    record.set(values);
	    win.close();
	    this.getUsersStore().sync();
    }
});

创建Model

Ext.define('AM.model.User', {

    extend: 'Ext.data.Model',
    fields: ['name', 'email']
});

创建View:配置store

Ext.define('AM.view.user.List' ,{
    extend: 'Ext.grid.Panel',
    alias: 'widget.userlist',

    title: 'All Users',
    store: 'Users',

    initComponent: function() {
        this.columns = [
            {header: 'Name',  dataIndex: 'name',  flex: 1},
            {header: 'Email', dataIndex: 'email', flex: 1}
        ];

        this.callParent(arguments);
    }
});

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);
    }
});

创建store:配置model,proxy

Ext.define('AM.store.Users', {
    extend: 'Ext.data.Store',
    model: 'AM.model.User',
    autoLoad: true,
    proxy: {
        type: 'ajax',
        api: {
            read: 'data/users.json',
            update: 'data/updateUsers.json'
        },
        reader: {
            type: 'json',
            root: 'users',
            successProperty: 'success'
        }
    }
});