extjs - 需要将 ExtJs 示例应用程序转换为 MVC 应用程序

Question

我对这个示例有疑问，请参阅此链接 http://dev.sencha.com/deploy/ext-4.0.0/examples/grid/buffer-grid.html

我想在 MVC 应用程序中进行转换。所以任何人请帮助我。

Answer 1

首先你的模型在你的 app/model 文件夹中

Ext.define('AppName.model.Employee', {
    extend: 'Ext.data.Model',
    fields: [
       {name: 'rating', type: 'int'},
       {name: 'salary', type: 'float'},
       {name: 'name'}
    ]
});

并存储在您的应用程序/商店文件夹中

Ext.define('AppName.store.Employee', {
    extend:'Ext.data.Store', 
    buffered: true,
    pageSize: 5000, 
    model: 'Employee',
    proxy: { type: 'memory' }
});

以及您的 app/view 文件夹中的网格视图

Ext.define('AppName.view.EmployeeGrid', {
    alias:'employeegrid',
    extend:'Ext.grid.Panel', 
    width: 700,
    height: 500,
    title: 'Bufffered Grid of 5,000 random records',
    store: 'Employee',
    loadMask: true,
    disableSelection: true,
    viewConfig: { trackOver: false }, 
    columns:[{
        xtype: 'rownumberer',
        width: 40,
        sortable: false
    },{
        text: 'Name',
        flex:1 ,
        sortable: true,
        dataIndex: 'name'
    },{
        text: 'Rating',
        width: 125,
        sortable: true,
        dataIndex: 'rating'
    },{
        text: 'Salary',
        width: 125,
        sortable: true,
        dataIndex: 'salary',
        align: 'right',
        renderer: Ext.util.Format.usMoney
    }]
}); 

你的控制器在你的 app/controller 文件夹中

Ext.define('AppName.controller.Employee',{
    extend:'Ext.app.Controller',
    stores:['Employee'],
    views:['EmployeeGrid'],
    refs:[
        {ref:'employeeGrid',selector:'employeegrid'}        
    ],
    init:function(){
        var me = this;
        me.getEmployeeStore().loadData(me.createFakeData(5000));        
    },
    createFakeData:function(count) {
        var firstNames   = ['Ed', 'Tommy', 'Aaron', 'Abe', 'Jamie', 'Adam', 'Dave', 'David', 'Jay', 'Nicolas', 'Nige'],
            lastNames    = ['Spencer', 'Maintz', 'Conran', 'Elias', 'Avins', 'Mishcon', 'Kaneda', 'Davis', 'Robinson', 'Ferrero', 'White'],
            ratings      = [1, 2, 3, 4, 5],
            salaries     = [100, 400, 900, 1500, 1000000];

        var data = [];
        for (var i = 0; i < (count || 25); i++) {
            var ratingId    = Math.floor(Math.random() * ratings.length),
                salaryId    = Math.floor(Math.random() * salaries.length),
                firstNameId = Math.floor(Math.random() * firstNames.length),
                lastNameId  = Math.floor(Math.random() * lastNames.length),

                rating      = ratings[ratingId],
                salary      = salaries[salaryId],
                name        = Ext.String.format("{0} {1}", firstNames[firstNameId], lastNames[lastNameId]);

            data.push({
                rating: rating,
                salary: salary,
                name: name
            });
        }
        return data;
    }         
});

Funally你必须在你的应用程序文件夹中创建应用程序

Ext.application({
    requires:[
        'Ext.grid.*',
        'Ext.data.*',
        'Ext.util.*',
        'Ext.grid.PagingScroller',
        'AppName.view.EmployeeGrid'
    ],
    name:'AppName', 
    models:['Employee'], 
    stores:['Employee'],
    controllers:['Employee'],
    launch:function () {
        Ext.onReady(function(){
              Ext.create('Ext.Viewport', {
                  layout: 'fit',
                  items:[{xtype:'emplyeegrid'}]
              });
        });    
    }
 });