Extjs分组Grid的用法

最新推荐文章于 2023-04-12 22:52:37 发布

Ben_1043556915

最新推荐文章于 2023-04-12 22:52:37 发布

阅读量280

点赞数

分类专栏： Extjs 文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/x1043556915/article/details/127191025

版权

Extjs 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

var xg = Ext.grid;
//================================列表============================
   var store = new Ext.data.GroupingStore({
          proxy: new Ext.data.HttpProxy({url:'getList'}),
          reader:new Ext.data.JsonReader({
                totalProperty: 'totalProperty',
                root: 'root'},
                [
                 {name: 'pmat_id'},
                 {name: 'pmat_name'},
                 {name: 'supp_lot_no'},
                 {name: 'gv_lot_no'},
                 {name: 'whse_id'},
                 {name: 'whse_id'},
                 {name: 'last_qty'},
                 {name: 'prepare_qty'}
                ]),
                 listeners:{
                     beforeload:function(){
                        //msgTip.show();
                      },
                      load:function(){
                        msgTip.hide();
                      }
                 },
                 groupField: 'pmat_name'
        });
    var cm=new xg.ColumnModel([
    	//new Ext.grid.RowNumberer({width:30}),
    	new Ext.grid.RowNumberer({
    	    header : '序號',
    	    width : 50,  
    	    align:'center',
    	    css:'background-image:none;background-color:#EDEEF0;',     
    	    renderer: function (value, metadata, record, rowIndex) {  
    	      if (store.lastOptions.params != null) {
    	              var pageindex = store.lastOptions.params.start;
    	              return pageindex + rowIndex + 1;
    	      } else {
    	              return rowIndex + 1;
    	      }
    	 }
    	}),{
        header:'物料編號',
        dataIndex:'pmat_id',
        menuDisabled:true,
        sortable:true,
        width:100,
        summaryRenderer: function(v, params, data){
        	return ((v === 0 || v > 1) ? '(總共：' + v +' 筆數据)' : '(總共：1 筆記錄)');
        	},
        summaryType: 'count'
    },{
        header:'物料名稱',
        dataIndex:'pmat_name',
        menuDisabled:true,
        sortable:true,
        width:220
    },{
        header:'來料批號',
        dataIndex:'supp_lot_no',
        menuDisabled:true,
        sortable:true,
        width:70
    },{
        header:'好景批號',
        dataIndex:'gv_lot_no',
        menuDisabled:true,
        sortable:true,
        width:70
    },{
        header:'貨架編號',
        dataIndex:'whse_id',
        menuDisabled:true,
        sortable:true,
        width:70
    },{
        header:'庫存數量',
        dataIndex:'last_qty',
        menuDisabled:true,
        sortable:true,
        width:60,
        summaryType: 'sum',
		summaryRenderer: function(value, summaryData, dataIndex) {
			return  '<span style="font-weight:bold">' + Ext.util.Format.number(value,'00.00') +  '</span>';
		}

    },{
        header:'已備數量',
        dataIndex:'prepare_qty',
        menuDisabled:true,
        sortable:true,
        width:60,
        summaryType: 'sum'
    }
]);
    var summary = new Ext.ux.grid.GroupSummary();
    var grid = new xg.GridPanel({
        store: store,
        width: fwidth-20,
        //height:500,   
        region:'center',
        //autoHeight:true,
        clicksToEdit:1,
        id:'main_grid',
        scrollOffset: 0,
        cm:cm,
        loadMask: true,
        view: new Ext.grid.GroupingView({
	        forceFit: true,
	        showGroupName: false,
	        enableNoGroups: false,
	        enableGroupingMenu: false,
	        hideGroupedColumn: true
        }),
        plugins: summary,
        sm:new Ext.grid.RowSelectionModel({singleSelect:true}),            
        bbar:new Ext.PagingToolbar({
            pageSize:5000,
            id:'pagetools',
            displayInfo:true,
            store:store,
            displayMsg:' {0} 到 {1} 條記錄,共 {2} 條',
            emptyMsg:'請先查詢 '
         })
    });