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传入，通过页面状态结合点击事件计算分数值。

 

      这里主要记录了复选框列在项目中的具体一些应用，因为看到网上例子较少，所以写出来供大家参考。时间紧代码没有细琢，以满足功能为主。

      笔者邮箱：[e-mail]