GridPanel分组聚合

1.首先引用聚合js,css文件

    <script src="http://www.cnblogs.com/js/ux/GroupSummary.js" type="text/javascript"></script>

    <link href="http://www.cnblogs.com/js/ux/css/GroupSummary.css" rel="stylesheet" type="text/css" />

2.分组聚合代码如下

            var rowNum = new Ext.grid.RowNumberer({ hidden: false, name: '序号' });

            var Billcol1 = new Ext.grid.ColumnModel([rowNum,

                { header: 'FENZU', dataIndex: 'FENZU', hidden: true },

                { header: '品号', dataIndex: 'ITEMNO', sortable: true, width: 100, renderer: SetDisableColumn },

                { header: '品名', dataIndex: 'ITEMNAME', sortable: true, width: 100, renderer: SetDisableColumn },

                { header: '数量', dataIndex: 'QTY', sortable: true, width: 100, renderer: SetDisableColumn ,summaryType: 'sum',summaryRenderer:function(value, summaryData, dataIndex){

                   return parseFloat(value).toFixed(4);

                }},

                { header: '外币币种', dataIndex: 'CURRENCY', sortable: true, width: 100, renderer: SetDisableColumn },

                { header: '外币采购单价', dataIndex: 'UNITPRICE', sortable: true, width: 100, renderer: SetDisableColumn },

                { header: '外币采购金额', dataIndex: 'AMOUNT', sortable: true, width: 100, renderer: SetDisableColumn,summaryType: 'sum',summaryRenderer:function(value, summaryData, dataIndex){

                  return parseFloat(value).toFixed(4);

                } }                

            ]);



            //GridPanel用到的store

            var Billstore1 = new Ext.data.GroupingStore({

                proxy: new Ext.data.HttpProxy({ url: 'WsQTGBD02.asmx/SelectDOCNOALL', method: "post", async: false }),

                reader: new Ext.data.XmlReader(

                {

                    totalProperty: 'totalRecords',

                    record: 'row'

                },

                [

                    { name: 'DOCNO' },

                    { name: 'INVNO' },

                    { name: 'WAREHOUSE' },

                    { name: 'WAREHOUSEADDRESS' },

                    { name: 'EXCHANGERATE' },

                    { name: 'CURRENCY' },

                    { name: 'DEPTCD' },

                    { name: 'ITEMNO' },

                    { name: 'ITEMNAME' },

                    { name: 'QTY' ,type:'float'},

                    { name: 'FENZU' },

                    { name: 'CHECKFLAG' },      //数量

                    { name: 'UNITPRICE' },

                    { name: 'AMOUNT' ,type:'float'}

                ]

                ),

               // sortInfo: { field: 'LINENO', direction: "DESC" },

                groupField: 'FENZU'

            });





    var BillgridArray1 = new Ext.grid.GridPanel({

        title: '单据信息',

        cm: Billcol1,

        store: Billstore1,

        autoScroll: true,

       view: new Ext.grid.GroupingView({   //添加分组视图

                forceFit: true,

                showGroupName: false,

                enableNoGroups: false,

                enableGroupingMenu: false,

                hideGroupedColumn: true,

                startCollapsed:true

                }),

       plugins: new Ext.ux.grid.GroupSummary(), //添加分组插件                     

        viewConfig: {

            forceFit: true,

            columnsText: '显示的列',

            scrollOffset: 20,

            sortAscText: '升序',

            sortDescText: '降序'

        }

      

    });

 

你可能感兴趣的:(gridPanel)