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}

                   ]

               });





           });