需要ExtJS的示例應用程序轉換爲MVC應用程序

Question

我有這個例子的一個問題看到此鏈接 http://dev.sencha.com/deploy/ext-4.0.0/examples/grid/buffer-grid.html

我想在MVC應用程序轉換。所以有人請幫助我。

Answer 1

首先您在您的應用程序/ 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' } 
}); 

模型以及應用中的網格視圖/視圖文件夾

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

而你的控制器在你的應用/控制器文件夾中

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 u必須在你的應用程序文件夾中創建應用程序

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