EXT项目中复选框列(checkcolumn)的运用实例
从来没有发过关于技术的文章，基本都是在学习。最近项目用到了EXT的复选框列，在网上找了找，没有很直接的，符合我们需求的例子。参考了yourgame兄官方扩展的文章(http://yourgame.iteye.com/blog/245619)，结合实际需求，完成了工作，记录一下，以备需要的同志们参考和自己以后查询。
抽出来的需求是这样的：
有一些项目，这些项目都可以解决特定的问题，先看下库中的结构，包括“问题id”，“问题名称”，“分数”三个字段，其中问题类型的分数为加权分数（如F01），其他是具体分数（如F0101）。
要做的工作就是在页面将问题展示出来，划勾同时计算相应加权分数，有保存功能等，如图所示：
要求“本项目可解决”列——能解决问题自动打钩，不能解决的不打勾，加权分数行不需要显示checkbox，在此基础上可人为手动标记，点击保存后存入库中。
解决思路大致如下：
1 参考官方扩展示例，进行细微修改，适应需求：
通过正则进行匹配，凡是形如“F01”的行不进行渲染，即不显示本行checkbox。
2 页面与后台数据对应如下：
前台store
/*************************问题数据****************************/
var jjwt_store = new Ext.data.JsonStore({
url:"gcxmghgl.html?m=getJjwt&xmid=${xmid}",
totalProperty:"totalCount",
root:"results",
id: 'wtid',
fields:["wtid","fs","jj","mc"]
});
后台sql
select t.wtid, t.fs, decode(w.wtid, null, '', 'true') jj, t.mc
from gh_pw_gc_wtzb t
left outer join (select g.wtid from gh_pw_gc_xmwt g where g.xmid = 6288) w
on (t.wtid = w.wtid)
order by t.wtid
后台wtid、fs、jj、mc分别对应前台fields数组项
注意后台处理：decode(w.wtid, null, '', 'true') jj，jj为''或非''反映到页面便是划勾与否。
3 接下来就是在页面构建分数计算模型，这里就是几个js对象：
//问题对象基类
function Wt(wtid,fs,jj,mc) {
this.wtid = wtid;
this.fs = parseInt(fs);
this.jj = jj;
this.mc = mc;
}
//主问题对象（类别）
function MainWt(wtid,fs,jj,mc) {
Wt.call(this,wtid,fs,jj,mc);
}
MainWt.prototype = new Wt();
//具体问题对象
function SubWt(wtid,fs,jj,mc) {
Wt.call(this,wtid,fs,jj,mc);
}
SubWt.prototype = new Wt();
SubWt.prototype.changeState = function() {
if(this.jj === 'true') {
this.jj = '';
}
else {
this.jj = 'true';
}
}
主要问题对象和具体问题对象都继承自问题对象基类。
//问题组对象
var WtGroup = function() {
this.mainWt = null;
this.subWts = new Array();
this.subTotalScore = 0;
this.setMainWt = function(wt) {
this.mainWt = wt;
}
this.setSubWt = function(subWt) {
this.subWts.push(subWt);
}
this.getSubTotalScore = function() {
if(this.subTotalScore === 0) {
for(var i=0;i<this.subWts.length;i++) {
this.subTotalScore += this.subWts[i].fs;
}
}
return this.subTotalScore;
}
this.changeState = function(subWtId) {
var sub;
for(var i=0;i<this.subWts.length;i++) {
sub = this.subWts[i];
if(sub.wtid === subWtId) {
sub.changeState();
}
}
}
//计算组得分
this.calculateGroup = function() {
var groupScore = 0;
var s = 0;
for(var i=0;i<this.subWts.length;i++) {
if(this.subWts[i].jj === 'true') {
s += this.subWts[i].fs;
}
}
//groupScore = forDight(s*(this.mainWt.fs/this.getSubTotalScore()),2);
groupScore = forDight(s*this.mainWt.fs/100,2);
return groupScore;
}
this.getCheckedWtid = function() {
var groupArr = new Array();
for(var i=0;i<this.subWts.length;i++) {
if(this.subWts[i].jj === 'true') {
groupArr.push(this.subWts[i].wtid);
}
}
return groupArr;
}
}
问题组对象主要描述一组问题的状态和行为（如“问题类型1”及其具体问题）。
//计算对象类，负责页面的计算
function Cal(store,fj1,fj2) {
this.tableChange = false;
this.fj1Change = false;
this.fj2Change = false;
this.fj1 = parseInt(fj1);
this.fj2 = parseInt(fj2);
this.mPattern = new RegExp('^F0\\d$');
this.store = store;
this.wtGroups = new Array();
this.init = function() {
var recordCount = this.store.getCount();
var rec;
//初始化各组的主问题
for(var i=0;i<recordCount;i++) {
rec = this.store.getAt(i);
if(this.mPattern.test(rec.get('wtid'))) {
var mWt = new MainWt(rec.get('wtid'),rec.get('fs'),rec.get('jj'),rec.get('mc'));
var wtGroup = new WtGroup();
wtGroup.setMainWt(mWt);
this.addWtGroup(wtGroup);
}
}
//初始化各组的具体问题
for(var j=0;j<this.wtGroups.length;j++) {
var gWt = this.wtGroups[j].mainWt.wtid;
for(var k=0;k<recordCount;k++) {
rec = this.store.getAt(k);
if(!this.mPattern.test(rec.get('wtid'))) {
var sWt = new SubWt(rec.get('wtid'),rec.get('fs'),rec.get('jj'),rec.get('mc'));
if(gWt === rec.get('wtid').substring(0,3)) {
this.wtGroups[j].setSubWt(sWt);
}
}
}
}
}
this.setFj1 = function(fj1) {
this.fj1 = parseInt(fj1);
this.fj1Change = true;
}
this.setFj2 = function(fj2) {
this.fj2 = parseInt(fj2);
this.fj2Change = true;
}
this.getFjfs = function() {
var arr = new Array();
arr.push(this.fj1);
arr.push(this.fj2);
return arr.join(',');
}
this.changeState = function(subWtId) {
this.tableChange = true;
for(var i=0;i<this.wtGroups.length;i++) {
if(subWtId.substring(0,3) === this.wtGroups[i].mainWt.wtid) {
this.wtGroups[i].changeState(subWtId);
break;
}
}
}
this.addWtGroup = function(wtGroup) {
this.wtGroups.push(wtGroup);
}
this.calculateAllSrc = function() {
var totalScore = 0;
for(var i=0;i<this.wtGroups.length;i++) {
totalScore += this.wtGroups[i].calculateGroup();
}
return forDight(totalScore,2);
}
this.calculateAll = function() {
var totalScore = this.calculateAllSrc();
totalScore += this.fj1;
totalScore += this.fj2;
return totalScore;
}
//得到所有打钩的问题id
this.getAllWtid = function() {
var allWtid = new Array();
//得到打钩的问题id
for(var i=0;i<this.wtGroups.length;i++) {
if(this.wtGroups[i].getCheckedWtid().length > 0) {
for(var j=0;j<this.wtGroups[i].getCheckedWtid().length;j++) {
allWtid.push(this.wtGroups[i].getCheckedWtid()[j]);
}
}
}
return allWtid.join(',');
}
this.getGroupScores = function() {
var groupScoreArr = new Array();
for(var i=0;i<this.wtGroups.length;i++) {
groupScoreArr.push(this.wtGroups[i].calculateGroup());
}
return groupScoreArr.join(',');
}
}
页面计算对象，将store传入，通过页面状态结合点击事件计算分数值。
这里主要记录了复选框列在项目中的具体一些应用，因为看到网上例子较少，所以写出来供大家参考。时间紧代码没有细琢，以满足功能为主。
笔者邮箱：eatsun1983@sina.com