看这二级表头、三级联动表格多帅
/**
* aporro产品统计报表
*/
Ext.define("PSI.Report.AporroProductReportForm", {
extend: "PSI.AFX.BaseMainExForm",
initComponent: function () {
var me = this;
Ext.apply(me, {
tbar: [{
text: "关闭",
iconCls: "PSI-button-exit",
handler: function () {
me.closeWindow();
}
}],
items: [{
region: "north",
height: 60,
border: 0,
layout: "fit",
border: 1,
title: "查询条件",
collapsible: true,
layout: {
type: "table",
columns: 4
},
items: [
{
id: "editQuerySku",
labelWidth: 40,
labelAlign: "right",
labelSeparator: "",
fieldLabel: "sku",
margin: "5, 0, 0, 0",
xtype: "textfield",
listeners: {
specialkey: {
fn: me.onQueryEditSpecialKey,
scope: me
}
},
width: 160
},
{
id: "editQueryFromDT",
xtype: "datefield",
margin: "5, 0, 0, 0",
format: "Y-m-d",
labelAlign: "right",
labelSeparator: "",
fieldLabel: "从",
value: new Date()
}, {
id: "editQueryToDT",
xtype: "datefield",
margin: "5, 0, 0, 0",
format: "Y-m-d",
labelAlign: "right",
labelSeparator: "",
fieldLabel: "到",
value: new Date()
}, {
xtype: "container",
items: [{
xtype: "button",
text: "查询",
width: 100,
margin: "5 0 0 10",
iconCls: "PSI-button-refresh",
handler: me.onQuery,
scope: me
}, {
xtype: "button",
text: "重置查询条件",
width: 100,
margin: "5, 0, 0, 10",
handler: me.onClearQuery,
scope: me
}]
}]
}, {
region: "center",
layout: "border",
border: 0,
items: [{
region: "center",
layout: "fit",
border: 0,
items: [me.getSKUGrid()]
}, {
region: "east",
layout: "border",
width: "50%",
split: true,
border: 0,
items: [
{
region: "center",
layout: "fit",
border: 0,
height: "50%",
items: [me.getCountryGrid()]
},
{
region: "south",
layout: "fit",
height: "50%",
split: true,
items: [me.getStateGrid()]
}
]
}]
}]
});
me.callParent(arguments);
},
/**
* 生成SKU统计表格
* @returns {Ext.grid.Panel|*}
*/
getSKUGrid: function () {
var me = this;
if (me.__SKUGrid) {
return me.__SKUGrid;
}
var modelName = "PSIReportAporroProductReportSKU";
Ext.define(modelName, {
extend: "Ext.data.Model",
fields: [
{name: "sku", type: 'string'},
{name: "pay_num", type: 'number'},
{name: "pay_sum", type: 'number'},
{name: "pay_ratio", type: 'number'},
{name: "no_pay_num", type: 'number'},
{name: "no_pay_sum", type: 'number'},
{name: "no_pay_ratio", type: 'number'},
{name: "pay_fail_num", type: 'number'},
{name: "pay_fail_sum", type: 'number'},
{name: "pay_fail_ratio", type: 'number'}
]
});
var store = Ext.create("Ext.data.Store", {
autoLoad: false,
model: modelName,
data: [],
pageSize: 1000,
proxy: {
type: "ajax",
actionMethods: {
read: "POST"
},
url: PSI.Const.BASE_URL
+ "Home/Report/aporroProductReportBySku",
reader: {
root: 'dataList',
totalProperty: 'totalCount'
}
}
});
store.on("beforeload", function () {
store.proxy.extraParams = me.getSkuQueryParam();
});
me.__SKUGrid = Ext.create("Ext.grid.Panel", {
viewConfig: {
enableTextSelection: true
},
border: 0,
columnLines: true,
features: [{
ftype: 'summary'
}],
columns: [{
xtype: "rownumberer",
width: 40
}, {
header: "SKU",
dataIndex: "sku",
menuDisabled: true,
sortable: true,
width: 140,
summaryType: 'count',
summaryRenderer: function (value, summaryData, dataIndex) {
if (value > 0) {
return '合计:' + value;
}
}
},
{
text: "<span style='color:green'>已支付</span>",
columns: [
{
text: "数量",
align: "right",
width: 60,
dataIndex: 'pay_num',
sortable: true,
summaryType: 'sum'
},
{
text: "金额",
align: "right",
width: 90,
dataIndex: 'pay_sum',
sortable: true,
summaryType: 'sum',
renderer: function (v, m) {
return ' <span style="color:green;">' + Ext.util.Format.usMoney(v) + '</span>';
},
},
{
text: "占比",
align: "right",
width: 60,
format: '0,0',
dataIndex: 'pay_ratio',
sortable: true,
summaryType: 'average',
summaryRenderer: function (value, summaryData, dataIndex) {
return value.toFixed();
},
}]
},
{
text: "<span style='color:blue'>未支付</span>",
columns: [
{
header: "数量",
dataIndex: "no_pay_num",
menuDisabled: true,
align: "right",
format: '0,0',
sortable: true,
summaryType: 'sum',
width: 60
}, {
header: "金额",
dataIndex: "no_pay_sum",
menuDisabled: true,
align: "right",
sortable: true,
renderer: function (v, m) {
return ' <span style="color:blue;">' + Ext.util.Format.usMoney(v) + '</span>';
},
summaryType: 'sum',
width: 90
}, {
header: "占比",
dataIndex: "no_pay_ratio",
menuDisabled: true,
sortable: true,
format: '0,0',
align: "right",
summaryType: 'average',
summaryRenderer: function (value, summaryData, dataIndex) {
return ' <span style="color:blue;">' + value.toFixed() + '</span>';
},
width: 60
}]
},
{
text: "<span style='color:red'>支付失败</span>",
columns: [
{
header: "数量",
dataIndex: "pay_fail_num",
menuDisabled: true,
sortable: true,
format: '0,0',
align: "right",
summaryType: 'sum',
width: 60
}, {
header: "金额",
dataIndex: "pay_fail_sum",
menuDisabled: true,
sortable: true,
renderer: function (v, m) {
return ' <span style="color:red;">' + Ext.util.Format.usMoney(v) + '</span>';
},
format: '0,0.00',
align: 'right',
summaryType: 'sum',
width: 90
}, {
header: "占比",
dataIndex: "pay_fail_ratio",
menuDisabled: true,
sortable: true,
format: '0,0',
align: "right",
summaryType: 'average',
summaryRenderer: function (value, summaryData, dataIndex) {
return ' <span style="color:red;">' + value.toFixed() + '</span>';
},
width: 60
}]
}
],
store: store,
listeners: {
select: function () {
//根据选中的国家查询州的数据
me.freshCountryGrid()
}
},
bbar: [{
id: "skuPagingToolbar",
xtype: "pagingtoolbar",
border: 0,
store: store
}, "-", {
xtype: "displayfield",
value: "每页显示"
}, {
id: "comboCountPerPage",
xtype: "combobox",
editable: false,
width: 60,
store: Ext.create("Ext.data.ArrayStore", {
fields: ["text"],
data: [["20"], ["50"], ["100"],
["300"], ["1000"]]
}),
value: 1000,
listeners: {
change: {
fn: function () {
store.pageSize = Ext
.getCmp("comboCountPerPage")
.getValue();
store.currentPage = 1;
Ext.getCmp("skuPagingToolbar")
.doRefresh();
},
scope: me
}
}
}, {
xtype: "displayfield",
value: "条记录"
}]
});
return me.__SKUGrid;
},
/**
* 根据选中的sku进行按国家的统计
*/
freshCountryGrid: function () {
var me = this;
var item = me.getSKUGrid().getSelectionModel().getSelection();
if (item == null || item.length != 1) {
return;
}
var row = item[0];
me.__curSku = row.get('sku');
Ext.getCmp("countryPagingToolbar")
.doRefresh();
},
/**
* 根据选中的sku和国家进行按州的统计
*/
freshStateGrid: function () {
var me = this;
var item = me.getCountryGrid().getSelectionModel().getSelection();
if (item == null || item.length != 1) {
return;
}
var row = item[0];
me.__curCountry = row.get('country');
Ext.getCmp("statePagingToolbar")
.doRefresh();
},
/**
* 生成国家统计表格
* @returns {Ext.grid.Panel|*}
*/
getCountryGrid: function () {
var me = this;
if (me.__CountryGrid) {
return me.__CountryGrid;
}
var modelName = "PSIReportAporroProductReportCountry";
Ext.define(modelName, {
extend: "Ext.data.Model",
fields: [
{name: "country", type: 'string'},
{name: "pay_num", type: 'number'},
{name: "pay_sum", type: 'number'},
{name: "pay_ratio", type: 'number'},
{name: "no_pay_num", type: 'number'},
{name: "no_pay_sum", type: 'number'},
{name: "no_pay_ratio", type: 'number'},
{name: "pay_fail_num", type: 'number'},
{name: "pay_fail_sum", type: 'number'},
{name: "pay_fail_ratio", type: 'number'}
]
});
var store = Ext.create("Ext.data.Store", {
autoLoad: false,
model: modelName,
data: [],
pageSize: 1000,
proxy: {
type: "ajax",
actionMethods: {
read: "POST"
},
url: PSI.Const.BASE_URL
+ "Home/Report/aporroProductReportBySkuCountry",
reader: {
root: 'dataList',
totalProperty: 'totalCount'
}
}
});
store.on("beforeload", function () {
store.proxy.extraParams = me.getCountryQueryParam();
});
me.__CountryGrid = Ext.create("Ext.grid.Panel", {
viewConfig: {
enableTextSelection: true
},
border: 0,
columnLines: true,
features: [{
ftype: 'summary'
}],
columns: [{
xtype: "rownumberer",
width: 40
}, {
header: "国家",
dataIndex: "country",
menuDisabled: true,
sortable: true,
width: 140,
summaryType: 'count',
summaryRenderer: function (value, summaryData, dataIndex) {
if (value > 0) {
return '合计:' + value;
}
}
},
{
text: "<span style='color:green'>已支付</span>",
columns: [
{
text: "数量",
align: "right",
width: 60,
dataIndex: 'pay_num',
sortable: true,
summaryType: 'sum'
},
{
text: "金额",
align: "right",
width: 90,
dataIndex: 'pay_sum',
sortable: true,
summaryType: 'sum',
renderer: function (v, m) {
return ' <span style="color:green;">' + Ext.util.Format.usMoney(v) + '</span>';
},
},
{
text: "占比",
align: "right",
width: 60,
format: '0,0',
dataIndex: 'pay_ratio',
sortable: true,
summaryType: 'average',
summaryRenderer: function (value, summaryData, dataIndex) {
return value.toFixed();
},
}]
},
{
text: "<span style='color:blue'>未支付</span>",
columns: [
{
header: "数量",
dataIndex: "no_pay_num",
menuDisabled: true,
align: "right",
format: '0,0',
sortable: true,
summaryType: 'sum',
width: 60
}, {
header: "金额",
dataIndex: "no_pay_sum",
menuDisabled: true,
align: "right",
sortable: true,
renderer: function (v, m) {
return ' <span style="color:blue;">' + Ext.util.Format.usMoney(v) + '</span>';
},
summaryType: 'sum',
width: 90
}, {
header: "占比",
dataIndex: "no_pay_ratio",
menuDisabled: true,
sortable: true,
format: '0,0',
align: "right",
summaryType: 'average',
summaryRenderer: function (value, summaryData, dataIndex) {
return ' <span style="color:blue;">' + value.toFixed() + '</span>';
},
width: 60
}]
},
{
text: "<span style='color:red'>支付失败</span>",
columns: [
{
header: "数量",
dataIndex: "pay_fail_num",
menuDisabled: true,
sortable: true,
format: '0,0',
align: "right",
summaryType: 'sum',
width: 60
}, {
header: "金额",
dataIndex: "pay_fail_sum",
menuDisabled: true,
sortable: true,
renderer: function (v, m) {
return ' <span style="color:red;">' + Ext.util.Format.usMoney(v) + '</span>';
},
format: '0,0.00',
align: 'right',
summaryType: 'sum',
width: 90
}, {
header: "占比",
dataIndex: "pay_fail_ratio",
menuDisabled: true,
sortable: true,
format: '0,0',
align: "right",
summaryType: 'average',
summaryRenderer: function (value, summaryData, dataIndex) {
return ' <span style="color:red;">' + value.toFixed() + '</span>';
},
width: 60
}]
}
],
store: store,
bbar: [{
id: "countryPagingToolbar",
xtype: "pagingtoolbar",
border: 0,
store: store
}, "-", {
xtype: "displayfield",
value: "每页显示"
}, {
id: "countryComboCountPerPage",
xtype: "combobox",
editable: false,
width: 60,
store: Ext.create("Ext.data.ArrayStore", {
fields: ["text"],
data: [["20"], ["50"], ["100"],
["300"], ["1000"]]
}),
value: 1000,
listeners: {
change: {
fn: function () {
store.pageSize = Ext
.getCmp("countryComboCountPerPage")
.getValue();
store.currentPage = 1;
Ext.getCmp("countryPagingToolbar")
.doRefresh();
},
scope: me
}
}
}, {
xtype: "displayfield",
value: "条记录"
}],
listeners: {
select: function () {
//根据选中的国家查询州的数据
me.freshStateGrid()
}
}
});
return me.__CountryGrid;
},
/**
* 获取国家统计查询条件
* @returns {{}}
*/
getCountryQueryParam: function () {
var me = this;
var result = {};
if (!me.__curSku) {
alert("请先选中sku");
return result;
}
result.sku = me.__curSku;
var dt = Ext.getCmp("editQueryFromDT").getValue();
if (dt) {
result.fromDT = Ext.Date.format(dt, "Y-m-d");
}
var dt = Ext.getCmp("editQueryToDT").getValue();
if (dt) {
result.toDT = Ext.Date.format(dt, "Y-m-d");
}
return result;
},
/**
* 获取州统计查询条件
* @returns {{}}
*/
getStateQueryParam: function () {
var me = this;
var result = {};
if (!me.__curSku) {
alert("请先选中sku");
return result;
}
if (!me.__curCountry) {
alert("请先选中国家");
return result;
}
result.sku = me.__curSku;
result.country = me.__curCountry;
var dt = Ext.getCmp("editQueryFromDT").getValue();
if (dt) {
result.fromDT = Ext.Date.format(dt, "Y-m-d");
}
var dt = Ext.getCmp("editQueryToDT").getValue();
if (dt) {
result.toDT = Ext.Date.format(dt, "Y-m-d");
}
return result;
},
/**
* 生成州省统计表格
* @returns {Ext.grid.Panel|*}
*/
getStateGrid: function () {
var me = this;
if (me.__StateGrid) {
return me.__StateGrid;
}
var modelName = "PSIReportAporroProductReportState";
Ext.define(modelName, {
extend: "Ext.data.Model",
fields: [
{name: "state", type: 'string'},
{name: "pay_num", type: 'number'},
{name: "pay_sum", type: 'number'},
{name: "pay_ratio", type: 'number'},
{name: "no_pay_num", type: 'number'},
{name: "no_pay_sum", type: 'number'},
{name: "no_pay_ratio", type: 'number'},
{name: "pay_fail_num", type: 'number'},
{name: "pay_fail_sum", type: 'number'},
{name: "pay_fail_ratio", type: 'number'}
]
});
var store = Ext.create("Ext.data.Store", {
autoLoad: false,
model: modelName,
data: [],
pageSize: 1000,
proxy: {
type: "ajax",
actionMethods: {
read: "POST"
},
url: PSI.Const.BASE_URL
+ "Home/Report/aporroProductReportBySkuState",
reader: {
root: 'dataList',
totalProperty: 'totalCount'
}
}
});
store.on("beforeload", function () {
store.proxy.extraParams = me.getStateQueryParam();
});
me.__StateGrid = Ext.create("Ext.grid.Panel", {
viewConfig: {
enableTextSelection: true
},
border: 0,
columnLines: true,
features: [{
ftype: 'summary'
}],
columns: [{
xtype: "rownumberer",
width: 40
}, {
header: "州省",
dataIndex: "state",
menuDisabled: true,
sortable: true,
width: 140,
summaryType: 'count',
summaryRenderer: function (value, summaryData, dataIndex) {
if (value > 0) {
return '合计:' + value;
}
}
},
{
text: "<span style='color:green'>已支付</span>",
columns: [
{
text: "数量",
align: "right",
width: 60,
dataIndex: 'pay_num',
sortable: true,
summaryType: 'sum'
},
{
text: "金额",
align: "right",
width: 90,
dataIndex: 'pay_sum',
sortable: true,
summaryType: 'sum',
renderer: function (v, m) {
return ' <span style="color:green;">' + Ext.util.Format.usMoney(v) + '</span>';
},
},
{
text: "占比",
align: "right",
width: 60,
format: '0,0',
dataIndex: 'pay_ratio',
sortable: true,
summaryType: 'average',
summaryRenderer: function (value, summaryData, dataIndex) {
return value.toFixed();
},
}]
},
{
text: "<span style='color:blue'>未支付</span>",
columns: [
{
header: "数量",
dataIndex: "no_pay_num",
menuDisabled: true,
align: "right",
format: '0,0',
sortable: true,
summaryType: 'sum',
width: 60
}, {
header: "金额",
dataIndex: "no_pay_sum",
menuDisabled: true,
align: "right",
sortable: true,
renderer: function (v, m) {
return ' <span style="color:blue;">' + Ext.util.Format.usMoney(v) + '</span>';
},
summaryType: 'sum',
width: 90
}, {
header: "占比",
dataIndex: "no_pay_ratio",
menuDisabled: true,
sortable: true,
format: '0,0',
align: "right",
summaryType: 'average',
summaryRenderer: function (value, summaryData, dataIndex) {
return ' <span style="color:blue;">' + value.toFixed() + '</span>';
},
width: 60
}]
},
{
text: "<span style='color:red'>支付失败</span>",
columns: [
{
header: "数量",
dataIndex: "pay_fail_num",
menuDisabled: true,
sortable: true,
format: '0,0',
align: "right",
summaryType: 'sum',
width: 60
}, {
header: "金额",
dataIndex: "pay_fail_sum",
menuDisabled: true,
sortable: true,
renderer: function (v, m) {
return ' <span style="color:red;">' + Ext.util.Format.usMoney(v) + '</span>';
},
format: '0,0.00',
align: 'right',
summaryType: 'sum',
width: 90
}, {
header: "占比",
dataIndex: "pay_fail_ratio",
menuDisabled: true,
sortable: true,
format: '0,0',
align: "right",
summaryType: 'average',
summaryRenderer: function (value, summaryData, dataIndex) {
return ' <span style="color:red;">' + value.toFixed() + '</span>';
},
width: 60
}]
}
],
store: store,
bbar: [{
id: "statePagingToolbar",
xtype: "pagingtoolbar",
border: 0,
store: store
}, "-", {
xtype: "displayfield",
value: "每页显示"
}, {
id: "stateComboCountPerPage",
xtype: "combobox",
editable: false,
width: 60,
store: Ext.create("Ext.data.ArrayStore", {
fields: ["text"],
data: [["20"], ["50"], ["100"],
["300"], ["1000"]]
}),
value: 1000,
listeners: {
change: {
fn: function () {
store.pageSize = Ext
.getCmp("stateComboCountPerPage")
.getValue();
store.currentPage = 1;
Ext.getCmp("statePagingToolbar")
.doRefresh();
},
scope: me
}
}
}, {
xtype: "displayfield",
value: "条记录"
}],
listeners: {}
});
return me.__StateGrid;
},
//查询
onQuery: function () {
this.refreshSkuGrid();
},
/**
* 清除查询条件
*/
onClearQuery: function () {
var me = this;
Ext.getCmp("editQueryFromDT").setValue(new Date());
Ext.getCmp("editQueryToDT").setValue(new Date());
me.onQuery();
},
/**
* 获取查询条件
* @returns {{}}
*/
getSkuQueryParam: function () {
var me = this;
var result = {};
var sku = Ext.getCmp("editQuerySku").getValue();
if (sku) {
result.sku = sku;
}
var dt = Ext.getCmp("editQueryFromDT").getValue();
if (dt) {
result.fromDT = Ext.Date.format(dt, "Y-m-d");
}
var dt = Ext.getCmp("editQueryToDT").getValue();
if (dt) {
result.toDT = Ext.Date.format(dt, "Y-m-d");
}
return result;
},
/**
* 刷新sku统计报表
* @param id
*/
refreshSkuGrid: function (id) {
Ext.getCmp("skuPagingToolbar").doRefresh();
}
});
7417
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
