extjs4后台模板

// Model
Ext.define('MyApp.model.User', {
    extend: 'Ext.data.Model',
    fields: ['name', 'email']
});

// Store
Ext.define('MyApp.store.Users', {
    extend: 'Ext.data.Store',
    model: 'MyApp.model.User',
    data: [
        { name: 'John Doe', email: 'john@example.com' },
        { name: 'Jane Smith', email: 'jane@example.com' }
    ]
});

// View
Ext.define('MyApp.view.UserList', {
    extend: 'Ext.grid.Panel',
    alias: 'widget.userlist',
    store: 'Users',
    columns: [
        { header: 'Name', dataIndex: 'name' },
        { header: 'Email', dataIndex: 'email' }
    ]
});

// Controller
Ext.define('MyApp.controller.Users', {
    extend: 'Ext.app.Controller',
    stores: ['Users'],
    views: ['UserList'],
    init: function() {
        this.control({
            'userlist': {
                itemclick: this.onUserClick
            }
        });
    },
    onUserClick: function(view, record) {
        Ext.Msg.alert('Info', 'You clicked on ' + record.get('name'));
    }
});

// Application
Ext.application({
    name: 'MyApp',
    appFolder: 'app',
    controllers: ['Users'],
    launch: function() {
        Ext.create('Ext.container.Viewport', {
            layout: 'fit',
            items: [
                { xtype: 'userlist' }
            ]
        });
    }
});