extjs FormPanel+JsonStore+GridPanel+PagingToolbar
1 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="MerProfitDetails.aspx.cs" Inherits="Backend.NewReport.MerProfitDetails" %> 2 3 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 4 5 <html xmlns="http://www.w3.org/1999/xhtml"> 6 <head runat="server"> 7 <title></title> 8 <link href="../Scripts/ExtJS/resources/css/ext-all.css" rel="stylesheet" type="text/css" /> 9 <script src="../Scripts/ExtJS/adapter/ext/ext-base.js" type="text/javascript"></script> 10 <script src="../Scripts/ExtJS/ext-all.js" type="text/javascript"></script> 11 <script src="../Scripts/common.js" type="text/javascript"></script> 12 <script src="ext-ui-combo-pagesize.js" type="text/javascript"></script> 13 <script src="../Scripts/Currency.js" type="text/javascript"></script> 14 <script type="text/javascript"> 15 var m_pageSize = <%=10 %>; 16 var m_SortList =""; 17 function btnQuery_OnClick() { 18 var FileItype=rQuery.getForm().findField('FeeSequence'); 19 m_SortList =""; 20 for(var i=0; i<FileItype.items.length; i++){ 21 if (FileItype.items.itemAt(i).checked) 22 { 23 if(i>0) 24 m_SortList +=","; 25 m_SortList += FileItype.items.itemAt(i).name; 26 i++; 27 } 28 } 29 if (!Ext.getCmp("txtStrTime").isValid() && !Ext.getCmp("txtEndTime").isValid() && !Ext.getCmp("txtMerchantID").isValid()) { 30 return; 31 } 32 storeReport.load({ 33 callback: function (r, options, success) { 34 if (success) { 35 total = r.length; 36 } 37 else { 38 total = 0; 39 } 40 } 41 }); 42 }; 43 function change_Amount(v){ 44 if(v != "" || v!=null){ 45 return (Number(v)).toFixed(2); 46 } 47 else{ 48 return "0.00"; 49 } 50 }; 51 52 function change_Cl(v){ 53 if(v == "" || v ==null){ 54 gvReport.getColumnModel().setHidden(2,false); 55 } 56 } 57 </script> 58 </head> 59 <body> 60 <div id="merQuery"></div> 61 <div id="dvResult"></div> 62 </body> 63 <script type="text/javascript"> 64 var rQuery = new Ext.FormPanel({ 65 renderTo: "merQuery", //容器渲染的那个节点的id 66 title: "报表统计", 67 id: "rQuery", 68 width: 1350, 69 layout: "table", //此容器所使用的布局类型 70 layoutConfig: { columns: 4 }, //选定好layout布局后，其相应的配置属性就在这个对象上进行设置 71 defaults: { labelAlign: 'right' }, //应用在全体组件上的配置项对象 72 frame: true, 73 buttonAlign: "center", 74 items: [{ 75 layout: "form", 76 labelWidth: 80, 77 items: [{ 78 xtype: "datefield", 79 width: 150, 80 id: "txtStrTime", 81 fieldLabel: " 起始日期", 82 format: "Y-m-d", //用以覆盖本地化的默认日期格式化字串 83 value: getDate(new Date().getFirstDateOfMonth()), 84 allowBlank: false, 85 blankText: "必填" 86 }] 87 }, { 88 layout: "form", 89 labelWidth: 80, 90 items: [{ 91 xtype: "datefield", 92 width: 150, 93 id: "txtEndTime", 94 fieldLabel: " 结束日期", 95 format: "Y-m-d", 96 value: getDate(new Date().getFirstDateOfMonth()), 97 allowBlank: false, 98 blankText: "必填" 99 }] 100 }, { 101 layout: "form", 102 labelWidth: 80, 103 items: [{ 104 xtype: "textfield", 105 width: 150, 106 id: "txtMerchantID", 107 fieldLabel: " 商户号", 108 value: '' 109 }] 110 }, { 111 buttons: [{ 112 text: "查询", 113 id: "btnQuery", 114 name: "btnQuery", 115 handler: btnQuery_OnClick 116 }] 117 }, { 118 layout: "form", 119 labelWidth: 80, 120 colspan: 2, 121 items: [{ 122 xtype: 'checkboxgroup', 123 name: 'FeeSequence', 124 id: 'FeeSequence', 125 fieldLabel: ' 金额排序', 126 width: 500, 127 items: [{ 128 boxLabel: '交易金额', 129 name: 'TRANS_AMOUNT', 130 inputValue: 'TRANS_AMOUNT', 131 checked: true 132 }, { 133 boxLabel: '交易手续费', 134 name: 'TRANSFEE', 135 inputValue: 'TRANSFEE' 136 }, { 137 boxLabel: '汇差收益', 138 name: 'EXCHANGEFEE', 139 inputValue: 'EXCHANGEFEE' 140 }] 141 }] 142 }] 143 }); 144 145 var storeReport = new Ext.data.JsonStore({ 146 url: "../Handler/MerProfitDetails.ashx", 147 root: "datajson", //对应数据集的JSON KEY 148 totalProperty: "totalProperty", 149 listeners: 150 { 151 beforeload: function () 152 { 153 this.baseParams= 154 { 155 TXTSTRTIME: Ext.get("txtStrTime").dom.value, 156 TXTENDTIME: Ext.get("txtEndTime").dom.value, 157 TXTMERCHANTID: Ext.get("txtMerchantID").dom.value, 158 start: 0, 159 limit: m_pageSize, 160 SORTLIST: m_SortList 161 } 162 } 163 }, 164 fields: ["MERCHANTID", "TRANS_DATE", "TRANS_AMOUNT", "TRANSFEE", "TRANSCOUNT", "BANKCOST", "BANKCOST", "REFUNDFEE", "REFUNDCOUNT", "WITHDRAWALFEE", "WITHDRAWALCOUNT", "CHARGEBACKFEE", "CHARGBACKCOUNT", "EXCHANGEFEE", "EXCHANGECBRTNFEE", "EXCHANGERFRTNFEE", "OPENFEE", "AUNUALFEE", "RISKFEE", "RISKCOUNT", "RISKCOST"] 165 }); 166 storeReport.load({ callback: function (r, options, success) { if (success) { total = r.length; } else total = 0; } }); 167 168 var gvReport = new Ext.grid.GridPanel({ 169 title: "报表统计", 170 id: "gvReport", 171 renderTo: "dvResult", 172 height: 350, 173 width: 1350, 174 stripeRows: true, //True表示为显示行的分隔符 175 trackMouseOver: true, //True表示为鼠标移动时高亮显示 176 //viewConfig: { autoFill: true }, //grid's UI试图上的配置项对象 177 frame: true, //True表示为面板的边框外框可自定义的，false表示为边框可1px的点线 178 store: storeReport, 179 columns: [ 180 new Ext.grid.RowNumberer(), 181 { header: "商户号", dataIndex: "MERCHANTID", sortable: true, width: 180, align: "left" }, //sortable:设为排序 182 //{header: "交易时间", dataIndex: "TRANS_DATE", sortable: true, align: "left", renderer: change_Cl }, 183 { header: "交易金额", dataIndex: "TRANS_AMOUNT", sortable: true, width: 80, align: "right", renderer: change_Amount }, 184 { header: "交易手续费", dataIndex: "TRANSFEE", sortable: true, width: 100, align: "right", renderer: change_Amount }, 185 { header: "汇差收益", dataIndex: "EXCHANGEFEE", sortable: true, width: 80, align: "right", renderer: change_Amount }, 186 { header: "拒付手续费", dataIndex: "CHARGEBACKFEE", sortable: true, width: 100, align: "right", renderer: change_Amount }, 187 { header: "拒款笔数", dataIndex: "CHARGBACKCOUNT", width: 80, align: "left" }, 188 { header: "拒付汇差返还", dataIndex: "EXCHANGECBRTNFEE", sortable: true, width: 100, align: "right", renderer: change_Amount }, 189 { header: "提款手续费", dataIndex: "WITHDRAWALFEE", sortable: true, width: 100, align: "right", renderer: change_Amount }, 190 { header: "提款笔数", dataIndex: "WITHDRAWALCOUNT", width: 80, align: "left" }, 191 { header: "退款汇差返还", dataIndex: "EXCHANGERFRTNFEE", sortable: true, width: 100, align: "right", renderer: change_Amount }, 192 { header: "风控笔数", dataIndex: "RISKCOUNT", width: 80, align: "left" }, 193 { header: "风控成本", dataIndex: "RISKCOST", sortable: true, width: 100, align: "right", renderer: change_Amount } 194 //{ header: "交易笔数", dataIndex: "TRANSCOUNT", width: 180 }, 195 //{ header: "银行成本", dataIndex: "BANKCOST", sortable: true, width: 180 }, 196 //{ header: "退款手续费", dataIndex: "REFUNDFEE", sortable: true, width: 180 }, 197 //{ header: "退款笔数", dataIndex: "REFUNDCOUNT", width: 180 }, 198 //{ header: "开户费", dataIndex: "OPENFEE", sortable: true, width: 180 }, 199 //{ header: "年费", dataIndex: "AUNUALFEE", sortable: true, width: 180 }, 200 //{ header: "风控费", dataIndex: "RISKFEE", sortable: true, width: 180 }, 201 ], 202 bbar: new Ext.PagingToolbar //分页 203 ({ 204 plugins: [new Ext.ui.plugins.ComboPageSize({ prefixText: '每页', postfixText: '条' })], 205 pageSize: m_pageSize, 206 store: storeReport, 207 displayInfo: true, //非要为true，不然不会显示下面的分页按钮 208 displayMsg: '<font size=2>第 {0} 条到 {1} 条，一共 {2} 条记录</font>', 209 emptyMsg: "没有记录" 210 }) 211 }); 212 </script> 213 </html>
这段代码是我在刚开始学习extjs做的一个例子，例子里用了FormPanel条件查询，JsonStore请求和返回json数据， GridPanel展现数据 PagingToolbar 分页，分页部分还用了一个下拉框分页插件
Ext.namespace('Ext.ui.plugins');
Ext.ui.plugins.ComboPageSize = function(config) {
Ext.apply(this, config);
};
Ext.extend(Ext.ui.plugins.ComboPageSize, Ext.util.Observable, {
pageSizes: [10, 20, 50, 100],
prefixText: 'Showing ',
postfixText: 'records per page.',
addToItem: true, //true添加到items中去，配合index；false则直接添加到最后
index: 10, //在items中的位置
init: function (pagingToolbar) {
var ps = this.pageSizes;
var combo = new Ext.form.ComboBox({
typeAhead: true,
triggerAction: 'all',
lazyRender: true,
mode: 'local',
width: 45,
store: ps,
enableKeyEvents: true,
editable: true,
loadPages: function () {
var rowIndex = 0;
var gp = pagingToolbar.findParentBy(
function (ct, cmp) { return (ct instanceof Ext.grid.GridPanel) ? true : false; }
);
var sm = gp.getSelectionModel();
if (undefined != sm && sm.hasSelection()) {
if (sm instanceof Ext.grid.RowSelectionModel) {
rowIndex = gp.store.indexOf(sm.getSelected());
} else if (sm instanceof Ext.grid.CellSelectionModel) {
rowIndex = sm.getSelectedCell()[0];
}
}
rowIndex += 0; //pagingToolbar.cursor;
pagingToolbar.doLoad(Math.floor(rowIndex / pagingToolbar.pageSize) * pagingToolbar.pageSize);
},
listeners: {
select: function (c, r, i) {
pagingToolbar.pageSize = ps[i];
this.loadPages();
},
blur: function () {
var pagesizeTemp = Number(this.getValue());
if (isNaN(pagesizeTemp)) {
this.setValue(pagingToolbar.pageSize);
return;
}
pagingToolbar.pageSize = Number(this.getValue());
this.loadPages();
}
}
});
if (this.addToItem) {
var inputIndex = this.index;
if (inputIndex > pagingToolbar.items.length) inputIndex = pagingToolbar.items.length;
pagingToolbar.insert(++inputIndex, '-');
pagingToolbar.insert(++inputIndex, this.prefixText);
pagingToolbar.insert(++inputIndex, combo);
pagingToolbar.insert(++inputIndex, this.postfixText);
}
else {
pagingToolbar.add('-');
pagingToolbar.add(this.prefixText);
pagingToolbar.add(combo);
pagingToolbar.add(this.postfixText);
}
pagingToolbar.on({
beforedestroy: function () {
combo.destroy();
},
change: function () {
combo.setValue(pagingToolbar.pageSize);
}
});
}
})
浙公网安备 33010602011771号