var  arr = [ [ 1 ,  ' 本 ' ,  ' 拉登 ' ], [ 2 ,  ' 笨 ' ,  ' 拉登 ' ],[ 3 ,  ' 笨 ' ,  ' 拉灯 ' ] ];

     var  reader  =   new  Ext.data.ArrayReader(

    {id: 0} ,

   [

     {name: 'name', mapping: 1} ,        

     {name: 'occupation', mapping: 2}    

    ]);

   

     var  store = new  Ext.data.GroupingStore( {

      reader:reader,

      groupField:'name',

      groupOnSort:true,

      sortInfo:{field: 'occupation', direction: "ASC"} //使用GroupingStore时必须指定sortInfo信息

   } );

   store.loadData(arr);

  

    // GridPanel以后会讨论,这儿使用它是为了直观的表现GroupingStore

    var  grid  =   new  Ext.grid.GridPanel( {

    ds: store,

    columns: [

        {header: "name", width: 20, sortable: true,dataIndex: 'name'},

        {header: "occupation", width: 20,sortable: true, dataIndex: 'occupation'}

    ],

    view: new Ext.grid.GroupingView({

        forceFit:true,

        groupTextTpl: '{text} ({[values.rs.length]} {[values.rs.length > 1 ? "Items" : "Item"]})'

    }),

    frame:true,

    width: 700,

    height: 450,

    collapsible: true,

    animCollapse: false,

    title: 'Grouping Example',

    renderTo: 'Div_GridPanel'

    } );

/*

这是使用远程对象,返回内容与下面本地对象的data一致

var store=new Ext.data.JsonStore({

        url:'jsoncallback.js',

        root:'rows',

        fields:['id','name','occupation']

    });

    store.load();

*/

     var  store = new  Ext.data.JsonStore( {

        data:{ 'results': 2, 'rows': [

        { 'id': 1, 'name': 'Bill', occupation: 'Gardener' },

        { 'id': 2, 'name': 'Ben', occupation: 'Horticulturalist' }

        ]},

    autoLoad:true,

    root:'rows',

    fields:['id','name','occupation']

    } )

     // 目前请先略过gridpanel,以后再说

     var  grid  =   new  Ext.grid.GridPanel( {

    ds: store,

    columns: [

        {header: "id", width: 200, sortable: true,dataIndex: 'id'},

        {header: "name", width: 200, sortable: true,dataIndex: 'name'},

        {header: "occupation", width: 200,sortable: true, dataIndex: 'occupation'}

    ],height:350,

      width:620,

      title:'Array Grid',

      renderTo: 'Div_GridPanel'

    } );

var store = new  Ext.data.JsonStore( {

        data:[

           [1, 'Bill', 'Gardener'], [2, 'Ben', 'Horticulturalist']

            ],

        autoLoad:true,

        fields:[{name: 'name', mapping: 1},{name:'occupation',mapping:2}]

    } )

    var grid  =   new  Ext.grid.GridPanel( {

    ds: store,

    columns: [

        {header: "name", width: 200, sortable: true,dataIndex: 'name'},

        {header: "occupation", width: 200,sortable: true, dataIndex: 'occupation'}

    ],height:350,

      width:620,

      renderTo: 'Div_GridPanel'

    } );