Grid分组特性

  Ext.onReady(function () {
               Ext.define('personInfo', {
                   extend: 'Ext.data.Model',
                   fields: ['name', 'salary','country']
               });
               var datas = [//memory类型的Proxy中有一个配置项data，对应的值是可选的纪录的数组，用数组定义一条纪录中的各个item
                   ['刘一', 2500,'China'],//因此就是利用了二维数组来定义。JS中定义数组有两种方式，利用Array定义和字面值定义，字面值
                   ['黄小珠', 1500,'China'],//即是利用[]来定义数组变量值与Object变量的定义方式利用{}来定义是不同的。
                   ['李凡达', 2000, 'USA'],
                  ['柳小刀',3000,'India'],//
                ['杨宇',2000,'French']//


               ];
               var firstStore = Ext.create('Ext.data.Store', {
                   storeId: 'store1',
                   groupField:'country',
                   model: 'personInfo',
                   proxy: {
                       type: 'memory',
                       data: datas,
                       reader: 'array'
                   },
                   autoLoad: true
               });
               var grid = Ext.create('Ext.grid.Panel', {
                   renderTo: Ext.getBody(),
                   width: 400,
                   height: 400,
                   title: '表格分组特性',
                   frame: true,
                   store: Ext.data.StoreManager.lookup("store1"),
                   // selModel: { selType: 'checkboxmodel' },
                   //multiSelect: true,
                   tbar: [
                       {
                           text: '表格分组特性',
                           handler: function () {
                               var msg = '';
                               var msg1 = { hobby: "fish" };
                               var rows = grid.getSelectionModel().getSelection();//返回值是Ext.data.Model[]
                               for (var i = 0; i < rows.length; i++) {
                                   msg = msg + rows[i].get('name') + '\n';//rows[i]是某条记录,利用Model的get函数取出记录中
                               }//指定字段的值。
                               //alert(msg);
                           }
                       }],
                   features: [Ext.create('Ext.grid.feature.Grouping', {
                       groupByText: '用本字段分组', showGroupsText: '显示分组',
                       groupHeaderTpl: '国籍:{name} ({rows.length})', startCollapsed: true//设置初始渲染页面时收缩分组
                       //groupHeaderTpl中[name}即是分组根据字段名。rows.length就是每个分组中记录个数
                   })],














                   columns: [
                     {
                         header: '姓名', dataIndex: 'name', width: 100, sortable: true


                     },
                    {
                        header: '薪资', dataIndex: 'salary', flex: 1


                    },
                    {header:'国籍',dataIndex:'country',flex:1}
                   ]
               });


           });