Ext.grid.Panel使用

/**
 * 1、Ext.data.Store用来装载本地的数据(就是自定义的数组数据)
 * 2、Ext.data.Store用来从服务端加载数据
 */
  Ext.onReady(function(){
if(Ext.BLANK_IMAGE_URL.substr(0,4)!="data"){
Ext.BLANK_IMAGE_URL="./images/s.gif";
}

   //定义显示Model
    var myModel="userModel";
Ext.define("userModel",{
       extend:"Ext.data.Model", 
       idProperty : 'id',// 实体主键 
       fields:[ 
           {name: "id"},
           {name:"name"},
           {name:"desc"}
       ]
});
 
var dataArray = [["1", "张三","学生" ],
                 ["2", "李四","网民"]
                ];
//从本地加载数据
var LocalStore = Ext.create("Ext.data.ArrayStore",{
        model: userModel,
        data: dataArray,
        autoLoad: true
  });
  //myStore.load(); 等同于  autoLoad: true
  
  //当然我们也可以不适用model，而直接在store里面定以fields，如下所示
  var otherLocalStore = new Ext.data.ArrayStore({
    //这个是用来代替model，在这里定义了这个fields之后，就会自动创建一个匿名的model来使用的
       idProperty : 'id',// 实体主键 
     fields: [
         { name: "id", type: "int" }, 
         { name: "name", type: "string"},
         { name: "desc"}
     ],
     data: dataArray,
     autoLoad: true
});

//从服务端加载数据
var RemoteStore = Ext.create("Ext.data.Store", 
                { model: "userModel", 
                  proxy: {type: "ajax",
                        url: "userList.do", 
                        reader: {
                          type: "json", 
                          root: 'data', 
                          idProperty:'id', 
                          totalProperty:'total'
                         } 
                      } //在使用ajax的时候最好不要使用自动加载， 
              //因为我们有的时候需要自己手动加载 
              //这样就可以真正地操作我们需要的数据，否则会加载两次,autoLoad:true 
              }); 
              //RemoteStore。load();
              
   // create the grid
   var grid = Ext.create("Ext.grid.Panel", {
    title: "MyGrid",
       //store: LocalStore,   //本地加载数据,显式定会以Model
       store: otherLocalStore,//本地加载数据，隐式定义Model
       //store: RemoteStore,  //从服务端舰载数据
       columns: [
           {text: "代码", width:120, dataIndex: "id",   sortable: true},
           {text: "名称", width:200, dataIndex: "name", sortable: true},
           {text: "描述", flex:1,    dataIndex: "desc", sortable: true} 
       ],
       forceFit:true,
       height:600,
       split: true,
       region:"north"
   });
         
  var allPanel= Ext.create("Ext.Panel", {
      //renderTo:Ext.getBody(),
       frame: true,
       title: "MyGridPanel",
       width: 580,
       height: 600,
       layout: "border",
       items: [grid]
   });
  
  var myViewPort=new Ext.Viewport({
layout:"fit",
items:[grid]
});
  
 });