var BankOrderstore = new Ext.data.JsonStore //数据源 ({ url: "../Handler/TxnRefund.ashx", totalProperty: 'ToTalRecord', root: "ResultData", listeners: { beforeload: function () { this.baseParams = { "method": "QUERYCMBCREFUND", "BGWTXNID": Ext.getCmp("txtBgwTxnID").getValue(), "STATUS": Ext.getCmp("Refundstatus").getValue(), "STDATE": Ext.getCmp("txtSTDate").getValue("Y-m-d").format("Y-m-d"), "EDDATE": Ext.getCmp("txtEDDate").getValue("Y-m-d").format("Y-m-d"), start: 0, limit: m_pageSize }; } }, fields: ["BGWTXNID", "APPCODE", "BANKREFNUM", "REFUNDAMOUNT", "NAME", "STATUS", "NOTIFYRESULT", "APPLYDATE", "PROCESSDATE", "RECEIPTDATE", "BANKTXNAMOUNT","REFUNDTXNID"] }); var check = new Ext.grid.CheckboxSelectionModel({ //checkbox singleSelect:false, //false为可以多选 sortable:true }); var gvResult = new Ext.grid.GridPanel ({ id: "gvResult", renderTo: "dvBankRefund", title: '<% = GetLocalResourceObject("ResultsText") %>', height: 380, store: BankOrderstore, width: m_pageWidth, stripeRows: true, //斑马线 trackMouseOver: true, loadMask: { msg: '<% = GetLocalResourceObject("LoadingText") %>' }, frame: true, columns: [ new Ext.grid.RowNumberer(), //行号 check, { header: '<% = GetLocalResourceObject("BgwTxnIDText") %>', dataIndex: "BGWTXNID", width: 150, sortable: true }, { header: '<% = GetLocalResourceObject("AppCodeText") %>', dataIndex: "APPCODE", width: 100, sortable: true, renderer: ConvertAppCode }, { header: '<% = GetLocalResourceObject("BankRefundText") %>', dataIndex: "BANKREFNUM", width: 180, sortable: true }, { header: '<% = GetLocalResourceObject("RefundAmountText") %>', dataIndex: "REFUNDAMOUNT", width: 80, sortable: true, renderer: function (v) { return v.toFixed(2); } }, { header: '<% = GetLocalResourceObject("RefundStatusText") %>', dataIndex: "STATUS", width: 80, sortable: true, renderer: ConvertStatus }, { header: '<% = GetLocalResourceObject("ApplyDateText") %>', dataIndex: "APPLYDATE", width: 150, sortable: true, renderer: function (v) { return getFormatDate(v, "yyyy-MM-dd HH:mm:ss"); } }, { header: '<% = GetLocalResourceObject("ProcessDateText") %>', dataIndex: "PROCESSDATE", width: 150, sortable: true, renderer: function (v) { return getFormatDate(v, "yyyy-MM-dd HH:mm:ss"); } }, { header: '<% = GetLocalResourceObject("ReceiptDateText") %>', dataIndex: "RECEIPTDATE", width: 120, sortable: true, renderer: function (v) { return getFormatDate(v, "yyyy-MM-dd HH:mm:ss"); } }, { header: '<% = GetLocalResourceObject("BankTxnAmountText") %>', dataIndex: "BANKTXNAMOUNT", width: 100, sortable: true, renderer: function (v) { return v.toFixed(2); } } ], bbar: new Ext.PagingToolbar //分页 ({ pageSize: m_pageSize, store: BankOrderstore, displayInfo: true, //非要为true,不然不会显示下面的分页按钮 items: [ '-', { text: "确认退款", iconCls:"recheck", handler: DoRefund_Click } //就是这个底部按钮调用的 ] }), ds: BankOrderstore, sm:check, //selModel这样checkbox才能选 store: BankOrderstore }); gvResult.render(); //呈现 //自动判断是否全选并选中或不选中表头的checkbox Ext.override(Ext.grid.CheckboxSelectionModel, { onMouseDown: function (e, t) { if (e.button === 0 && t.className == 'x-grid3-row-checker') { // Only fire if left-click e.stopEvent(); var row = e.getTarget('.x-grid3-row'); // mouseHandled flag check for a duplicate selection (handleMouseDown) call if (!this.mouseHandled && row) { //alert(this.grid.store.getCount()); var gridEl = this.grid.getEl(); //得到表格的EL对象 var hd = gridEl.select('div.x-grid3-hd-checker'); //得到表格头部的全选CheckBox框 var index = row.rowIndex; if (this.isSelected(index)) { this.deselectRow(index); var isChecked = hd.hasClass('x-grid3-hd-checker-on'); //判断头部的全选CheckBox框是否选中,如果是,则删除 if (isChecked) { hd.removeClass('x-grid3-hd-checker-on'); } } else { this.selectRow(index, true); //判断选中当前行时,是否所有的行都已经选中,如果是,则把头部的全选CheckBox框选中 if (gridEl.select('div.x-grid3-row-selected').elements.length == gridEl.select('div.x-grid3-row').elements.length) { hd.addClass('x-grid3-hd-checker-on'); }; } } } this.mouseHandled = false; }, onHdMouseDown: function (e, t) { /** *大家觉得上面重写的代码应该已经实现了这个功能了,可是又发现下面这行也重写了 *由原来的t.className修改为t.className.split(' ')[0] *为什么呢?这个是我在快速点击头部全选CheckBox时, *操作过程发现,有的时候x-grid3-hd-checker-on这个样式还没有删除或者多一个空格,结果导致下面这个判断不成立 *去全选或者全选不能实现 */ if (t.className.split(' ')[0] == 'x-grid3-hd-checker') { e.stopEvent(); var hd = Ext.fly(t.parentNode); var isChecked = hd.hasClass('x-grid3-hd-checker-on'); if (isChecked) { hd.removeClass('x-grid3-hd-checker-on'); this.clearSelections(); } else { hd.addClass('x-grid3-hd-checker-on'); this.selectAll(); } } } }); var getBgw = function () { if (gvResult.getSelectionModel().hasSelection()) { var record = gvResult.getSelectionModel().getSelections(); var mycars = new Array(); for (var i = 0; i < record.length; i++) { mycars[i] = record[i].data.REFUNDTXNID; } return mycars; } else { alert("请选择要操作的记录!"); } } function DoRefund_Click() { var values = getBgw(); if (!values) return false; //判断 Ext.MessageBox.confirm("请确认", "是否要删除选中的信息", function (button, text) { if (button == "yes") { Ext.Ajax.request({ url: "../Handler/TxnRefund.ashx", method: "post", params: { "method": "DOREFUND", "REFUNDTXNIDS": values }, success: function (response, option) { var result = Ext.util.JSON.decode(response.responseText); if (result.Flag == true) { Ext.MessageBox.alert("提示", "删除成功"); gvResult.render(); } else { Ext.MessageBox.alert("提示", result.RespMessage); } }, failure: function () { } }); } else { return; } }); }
下面是上面说到的不太成熟的判断是否全选并选中或不选中表头的checkbox
//自动判断是否全选并选中或不选中表头的checkbox // function autoCheckGridHead() { // var hd_checker = gvResult.getEl().select('div.x-grid3-hd-checker'); // var hd = hd_checker.first(); // if (hd != null) { // if (gvResult.getSelectionModel().getSelections().length != // gvResult.getStore().getCount()) { // //清空表格头的checkBox // if (hd.hasClass('x-grid3-hd-checker-on')) { // hd.removeClass('x-grid3-hd-checker-on'); //x-grid3-hd-checker-on // //gvResult.getSelectionModel().clearSelections(); // } // } else { // if (gvResult.getStore().getCount() == 0) { //没有记录的话清空; // return; // } // hd.addClass('x-grid3-hd-checker-on'); // gvResult.getSelectionModel().selectAll(); // } // } // }