????? 从来没有发过关于技术的文章，基本都是在学习。最近项目用到了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