|
Posted on 2013-02-21 15:51 小胡子 閱讀(933) 評論(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
|