海水正蓝

面朝大海,春暖花开
posts - 145, comments - 29, trackbacks - 0, articles - 1
  BlogJava :: 首页 :: 新随笔 :: 联系 :: 聚合  :: 管理

Ext 不分组合计

Posted on 2013-02-21 15:51 小胡子 阅读(922) 评论(0)  编辑  收藏 所属分类: Ext
1.首先看效果
2.需要一个合计插件GridSummary.js GridSummary 插件,下载后将后缀名该为 js
3.页面需要引用的文件
 1     <link rel="stylesheet" type="text/css" href="include/ext-3.4.0/resources/css/ext-all.css" />
 2     <link rel="stylesheet" type="text/css" href="include/ext-3.4.0/ux/css/ux-all.css" />
 3     <script type="text/javascript" src="include/ext-3.4.0/adapter/ext/ext-base.js"></script>
 4     <script type="text/javascript" src="include/ext-3.4.0/ext-all.js"></script>
 5     <script type="text/javascript" src="include/ext-3.4.0/ux/ux-all.js"></script>
 6     <script type="text/javascript" src="include/ext-3.4.0/locale/ext-lang-zh_CN.js"></script>
 7     <script type="text/javascript" src="include/ext-3.4.0/ux/GridSummary.js"></script> <!-- 合计插件 -->
 8     <script type="text/javascript" src="demo.js"></script> <!-- 示例js -->


4.Grid代码
    var url = "RequestAction/AT/Req_CT_SHIPMENTS.aspx?Action=GetDetailAll&S_SHIPMENTS_M_GUID=" + guid;
    
//复选框
    var sm = new Ext.grid.CheckboxSelectionModel();
    
var textFileldVehicle = new Ext.form.TextField
        ({
            allowBlank: 
false,
            blankText: 
"请输入车号",
            maxLength: 
50
        });

        
var numField = new Ext.form.NumberField({
            allowNegative: 
false,
            allowDecimals: 
true,
            allowFormat: 
true,
            decimalPrecision: 
2,
            allowBlank: 
false,
            blankText: '金额必须大于零'

        });
    
//字段集合
    var fields =
            [            
            { name: 'S_VEHICLE_NUMBER' },
            { name: 'N_QUANTITY' },
            { name: 'N_FREIGHT' },
            { name: 'S_GUID' },
            { name: 'S_SHIPMENTS_M_GUID' }
            ];
    
var proxy = new Ext.data.HttpProxy({ url: url });
    
//数据读取器
    var reader = new Ext.data.JsonReader({
        totalProperty: 
"totalPorperty"//数据总条数
        root: "rows",    //将要显示数据的数组
        id: "S_GUID",    //每一行数据的唯一记录
        fields: fields
    });

    
//列集合 其中 summaryType: 'sum' 为求和
    var cm = new Ext.grid.ColumnModel
    ({ columns: [sm,
        new Ext.grid.RowNumberer({ header: 'NO', width: 30, align: 'center' }),
        { header: '车号', dataIndex: 'S_VEHICLE_NUMBER', editor: textFileldVehicle, summaryRenderer: function (v, params, data) { return '合计'; } },
        { header: '重量', dataIndex: 'N_QUANTITY', summaryType: 'sum', renderer: formatNumberDefault, align: 'right', editor: numField },
        { header: '运费', dataIndex: 'N_FREIGHT', summaryType: 'sum', renderer: formatNumberDefault, align: 'right', editor: numField}
    ]
    });

//如果全部列都可排序否则单个设置
    cm.defaultSortable = false;

    
//创建一个store
    var shipmentsDetailstore = new Ext.data.Store({
        proxy: proxy,
        reader: reader,
        autoDestroy: 
true,
        autoLoad: { params: { start: 
0, limit: pageSize} }
    });

    
//插入行按钮
    var btn_Insert = new Ext.Button({ text: '插入行', iconCls: 'insert', handler: function () {
        
//定义一个recode对象  
        var initValue = createShipmentDetailRow();
        grid.stopEditing();
        
var maxRowIndex = grid.getStore().getCount();
        grid.getStore().insert(maxRowIndex, initValue); 
//在第一个位置插入 
        grid.view.refresh();
        grid.getSelectionModel().selectLastRow();
        grid.getView().focusRow(maxRowIndex); 
//焦点标记行
        grid.startEditing(maxRowIndex, 2); //单元格转换成编辑状态
    }
    });
    
//删除行按钮
    var btn_Remove = new Ext.Button({ text: '删除行', iconCls: 'delete', handler: function () {
        grid.stopEditing();
        
var rows = grid.getSelectionModel().getSelections();
        
if (rows == undefined || rows.length == 0) {
            setShipmentStatusBarText('error', '请选择需要删除的行!');
            
return//判断记录集是否为空,为空返回   
        }
        grid.getStore().remove(rows);
        grid.view.refresh();
    }
    });

    
//工具栏
    var tbar = new Ext.Toolbar({
        cls: 'top
-toolbar',
        items: [btn_Insert, '
-', btn_Remove]
    });
    
var summary = new Ext.ux.grid.GridSummary();
    
//创建GRID
    var grid = new Ext.grid.EditorGridPanel
        ({
            id: 'ShipmentsDetailGirdPanel',
            deferredRender: 
false,
            enableColumnHide: 
false,
            enableHdMenu: 
false,
            columnLines: 
true,
            enableColumnMove: 
false,
            store: shipmentsDetailstore,
            sm: sm,
            cm: cm,
            loadMask: 
true,
            
//自适应宽度 参数为列数
            //            autoExpandColumn: 4,
            //超过长度带自动滚动条
            autoScroll: true,
            border: 
false,
            nocache: 
false,
            timeout: 
10,
            clicksToEdit: 
1,
            scripts: 
true,
            loadMask: { msg: '正在加载数据,请稍侯……' },
            tbar: tbar,
            view: 
new Ext.ux.grid.BufferView({
                rowHeight: 
25,
                scrollDelay: 
true,
                forceFit: 
true,
                deferEmptyText: 
true,
                emptyText: 
"无数据"
            }),
            
plugins: summary
        });

5.此时会看到合计行字体偏小
添加样式
.x-grid3-summary-row .x-grid3-cell-inner {
    FONT: 12.5px tahoma,arial,helvetica,sans-serif
}

6.此示例Ext版本为 3.4.0






只有注册用户登录后才能发表评论。


网站导航: