关于Ext.grid.GridFilters和FusionCharts結合的使用 Javascript

前些时间有用到对GridPanel中资料的筛选,
我要实现以下功能:
1.GridPanel资料的筛选
2.筛选后的资料要同时进行其他事件 在使用GridFilters插件筛选后发现GridPanel中对应的Store并没有改变（对GridPanel的Reload意味着Store的重新装载）

那是怎么回事呢， 原来在GridFilters中重新实例化了Store。
我要把事件的激活放到GridFilters.js中吗，
不用，通过其下的代码对GridFilters.js重载概念实现：
Ext.grid.TMMGridFilters = Ext.extend(Ext.grid.GridFilters, {
reload : function() {
// 從本機記憶體Store
if (this.local) {
this.grid.store.clearFilter(true);
this.grid.store.filterBy(this.getRecordFilter());
//*************此處實現其它功能
chart(null, this.grid.store, this.grid.store.getCount());
}
// else 如果有需要從GridFilters.js中獲取
}
})

var Gridfilters = new Ext.grid.TMMGridFilters({
filters : [{
type : 'string',
dataIndex : 'line'
}],
local : true
});

效果圖:



具体的代码可以参照：
/*
* Ext JS Library 2.2 Copyright(c) 2006-2008, Ext JS, LLC. licensing@extjs.com
* http://extjs.com/license * author:TMM
*/
Ext.onReady(function() {
//Ext.QuickTips.init();
Ext.BLANK_IMAGE_URL = '../extjs/resources/images/default/s.gif';
// Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
Ext.lib.Ajax.defaultPostHeader += '; charset=utf-8';

Ext.grid.filter.StringFilter.prototype.icon = '../ExtJS/img/find.png';

var proxy = new Ext.data.HttpProxy({
url : '../Services/TMMService.svc/Getcclass_productivity_part_month',
method : 'GET'
});

var reader = new Ext.data.JsonReader({}, [{
name : 'part'
}, {
name : 'month'
}, {
name : 'Production_Qty'
}, {
name : 'Standard_Manhour'
}, {
name : 'Actual_Manhour'
}, {
name : 'up_date'
}]);

var store = new Ext.data.Store({
proxy : proxy,
reader : reader
});

Ext.grid.TMMGridFilters = Ext.extend(Ext.grid.GridFilters, {
reload : function() {
// 從本機記憶體Store
if (this.local) {
this.grid.store.clearFilter(true);
this.grid.store.filterBy(this.getRecordFilter());
chart(null, this.grid.store, this.grid.store.getCount());
}
// else 如果有需要從GridFilters.js中獲取
}
})

var Gridfilters = new Ext.grid.TMMGridFilters({
filters : [{
type : 'string',
dataIndex : 'part'
}],
local : true
});

// 此功能最先完成，在其後的代碼中主要參考其下
// 有時間此處將進行封裝，節約代碼量70%，當然包括上面的代碼。
// 在其中大量使用閥門（留意）實現剔除重複和拼裝序列
// v 按一下Grid時的值
// s 當前記憶體中的Store
// c 控制Chart顯示數量
var chart = function(v, s, c) {
var store = s;
var dt = new Date();
var strXML = "<chart palette='2' caption='CCL Assmbly - Part – Productivity' subcaption='' numVisiblePlot='12'"
+ " yAxisMaxValue='120' xAxisName='Month(YTD)' yAxisName='Percent' slantLabels='1' showValues='0' numberSuffix='%25'>"
+ " <categories>"
+ " <category label='Jan' /> "
+ " <category label='Feb' /> "
+ " <category label='Mar' /> "
+ " <category label='Apr' /> "
+ " <category label='May' /> "
+ " <category label='Jun' /> "
+ " <category label='Jul' /> "
+ " <category label='Aug' /> "
+ " <category label='Sep' /> "
+ " <category label='Oct' /> "
+ " <category label='Nov' /> "
+ " <category label='Dec' /> " + "</categories>"

// 剔除重複的SER
var _part = new Ext.data.Store();
for (var i = 0; i < c; i++) {
_rs = new Ext.data.Record(["partName"]);
_rs.set("partName", store.getAt(i).get("part"));

var repeat = false;
if (i == 0) {
_part.add(_rs);
} else {
for (var j = 0; j < _part.getCount(); j++) {
if (_part.getAt(j).get("partName") == store.getAt(i)
.get("part")) {
repeat = true;
}
}
}
if (!repeat) {
_part.add(_rs);
}
}

// 判斷對Grid的按一下事件
if (v) {
// 記住上次在Store中的迴圈次數，用於補充連續的month
var fag = 0;
var production_Qty = 0;
var standard_Manhour = 0;
var actual_Manhour = 0;
strXML = strXML + "<dataset seriesName='" + v + "'>";
for (var i = 0; i < c; i++) {
if (store.getAt(i).get("part") == v) {
production_Qty += store.getAt(i).get("Production_Qty");
standard_Manhour += store.getAt(i).get("Standard_Manhour");
actual_Manhour += store.getAt(i).get("Actual_Manhour");
// 拼裝序列
if (fag == 0) {
// 由於x=1， 那麼get("week")在等於1的時候是不會執行的
for (var x = 1; x < store.getAt(i).get("month"); x++) {
strXML = strXML + "<set value='0'/>";
}

strXML = strXML
+ "<set value='"
+ parseFloat((standard_Manhour / actual_Manhour)
* 100).toFixed(2) + "' />";
} else {
// 求得當次 "i" 與上次 "i"的差 作為迴圈次數
for (var x = 1; x < store.getAt(i).get("month")
- store.getAt(fag - 1).get("month"); x++) {
strXML = strXML + "<set value='0'/>";
}

strXML = strXML
+ "<set value='"
+ parseFloat((standard_Manhour / actual_Manhour)
* 100).toFixed(2) + "' />";
}
fag = i + 1;
}
}
strXML = strXML + "</dataset>";
} else {
for (var i = 0; i < _part.getCount(); i++) {
strXML = strXML + "<dataset seriesName='"
+ _part.getAt(i).get("partName") + "'>";
// 記住上次在Store中的迴圈次數，用於補充連續的month
var fag = 0;
var production_Qty = 0;
var standard_Manhour = 0;
var actual_Manhour = 0;
for (var j = 0; j < c; j++) {
if (store.getAt(j).get("part") == _part.getAt(i)
.get("partName")) {
production_Qty += store.getAt(j).get("Production_Qty");
standard_Manhour += store.getAt(j)
.get("Standard_Manhour");
actual_Manhour += store.getAt(j).get("Actual_Manhour")
// 發現是同一Part首次進入此處
// 拼裝序列
if (fag == 0) {
// 由於x=1， 那麼get("week")在等於1的時候是不會執行的。
for (var x = 1; x < store.getAt(j).get("month"); x++) {
strXML = strXML + "<set value='0'/>";
}

strXML = strXML
+ "<set value='"
+ parseFloat((standard_Manhour / actual_Manhour)
* 100).toFixed(2) + "' />";
} else {
// 求得當次 "i" 與上次 "i"的差 作為迴圈次數
for (var x = 1; x < store.getAt(j).get("month")
- store.getAt(fag - 1).get("month"); x++) {
strXML = strXML + "<set value='0'/>";
}

strXML = strXML
+ "<set value='"
+ parseFloat((standard_Manhour / actual_Manhour)
* 100).toFixed(2) + "' />";
}
fag = j + 1;
}
}
strXML = strXML + "</dataset>";
}
}

strXML = strXML
+ " <trendlines>"
+ " <line startValue='97' color='0000ff' displayValue='Target (97%25)' valueOnRight ='1' /> "
+ " </trendlines> " + "</chart>";

var chart = new FusionCharts("../FusionCharts/ScrollLine2D.swf",
"cclass_productivity_part_month_chart", "600", "300", "0", "0");
chart.setDataXML(strXML);
chart.render("cclass_productivity_part_month_chart");
}

var grid = new Ext.grid.GridPanel({
store : store,
columns : [{
id : "month",
header : "Month",
width : 45,
sortable : true,
dataIndex : 'month'
}, {
header : "Part",
width : 90,
sortable : true,
dataIndex : 'part'
}, {
header : "Part",
width : 90,
sortable : false,
dataIndex : 'up_date',
hidden : true,
renderer : Ext.util.Format.dateRenderer('m/d/Y')
}, {
header : "Production Qty",
width : 90,
sortable : true,
dataIndex : 'Production_Qty',
renderer : function(value, params, record) {
return parseFloat(value).toFixed(2)
}
}, {
header : "Planned man hour",
width : 105,
sortable : true,
dataIndex : 'Standard_Manhour',
renderer : function(value, params, record) {
return parseFloat(value).toFixed(2)
}
}, {
header : "Actual man hour",
width : 95,
sortable : true,
dataIndex : 'Actual_Manhour',
renderer : function(value, params, record) {
return parseFloat(value).toFixed(2)
}
}, {
header : "Standard Rate",
width : 95,
sortable : true,
dataIndex : 'Standard_Manhour',
renderer : function(value, params, record) {
return parseFloat(record.data['Production_Qty']
/ parseFloat(value)).toFixed(2)
}
}, {
header : "Actual Rate",
width : 90,
sortable : true,
dataIndex : 'Actual_Manhour',
renderer : function(value, params, record) {
return parseFloat(record.data['Production_Qty']
/ parseFloat(value)).toFixed(2)
}
}, {
header : "Efficiency(%)",
width : 95,
sortable : true,
dataIndex : 'Actual_Manhour',
renderer : function(value, params, record) {
return parseFloat((record.data['Standard_Manhour'] / record.data['Actual_Manhour'])
* 100).toFixed(2)
}
}],

sm : new Ext.grid.RowSelectionModel({
singleSelect : true
}),

stripeRows : true,
height : 200,
width : 600,
enableColumnHide : false,
plugins : [Gridfilters],
title : '',
renderTo : 'cclass_productivity_part_month_grid'
})

store.load({
callback : function(r, options, success) {
if (success == false) {
Ext.Msg
.alert("error",
"cclass_productivity_part_month_grid was an error, please try again.");
} else {
chart(null, store, 4);
}
}
});

grid.getSelectionModel().on('rowselect', function(sm, rowIdx, r) {
chart(r.data.part, store, store.getCount());
});

grid.getSelectionModel().selectFirstRow();

});