Extjs 3根据数据库动态生成checkboxgroup(extjs系列1)

1.需求：

开发的过程中遇到了根据数据库字段来构造checkbox的需求，在baidu上面搜了很多结果一看都是千篇一律转载过来的，不能直接使用，但是可以借鉴的，由于开发的组件用到了extjs。我也刚开始用，所以弄了两天，还好把这个需求弄出来了。方法也许不好，但是可以使用

2.准备组件：

额外用到了ext的ajax同步请求的组件，因为异步的话checkboxgroup还未构建就调用会报错，当然开始就赋几个item应该不会报错了，我也没时间来验证了，干脆弄了同步的。

同步组件是ext-basex.js网上很多的。csdn上面有下载。

3.开发步骤：

Ext.namespace('My.UI');
 My.UI.CheckboxGroup=Ext.extend(Ext.form.CheckboxGroup,{
    columns:6,
    dataUrl:'', //数据地址
    labelFiled:'columnChName',
    valueFiled:'columnName',
    setValue:function(val){
        if(val.split){
            val=val.split(',');
        }
        this.reset();
        for(var i=0;i<val.length;i++){
            this.items.each(function(c){
                //debugger;

                if(c.inputValue==val[i]){
                    c.setValue(true);
                }
            });
        }
        
    },
    reset:function(){
        this.items.each(function(c){
            c.setValue(false);
        });
    },
    
    getValue:function(){
        var val=[];
        this.items.each(function(c){
            if(c.getValue()==true)
                val.push(c.inputValue);
        });
        return val.join(',');
    },
    onRender:function(ct, position){ 
       var items=[];
       //alert(items.length);
        if(!this.items){ //如果没有指定就从URL获取
           Ext.Ajax.request({
                url:this.dataUrl,
                scope:this,
                async:false,
                success:function(response){
                    var data = Ext.util.JSON.decode(response.responseText);
                    
                    data=data.rows||data;
                    
                    var Items2=this.items;
                     
                     if(this.panel)
                     {
                     
                         var columns=this.panel.items;
                     
                     
                         if(columns)
                         {
                            for(var i=0;i<columns.items.length;i++){
                                column=columns.items[i];
                                column.removeAll();
                            }
                            Items2.clear();
                         }
                     }
                 
                     for(var i=0;i<data.length;i++){
                            var d=data[i];
                            var chk = {boxLabel: d[this.labelFiled], name: this.name, inputValue: d[this.valueFiled],tooltip:'sssf'};
                            
                            //alert(d[this.labelFiled]);
                            items.push(chk);
                            //alert(items.length);
                     } 
                      
                      
                }
                
            });
           this.items=items;
        }
        My.UI.CheckboxGroup.superclass.onRender.call(this, ct, position);
    }
});
Ext.reg('mycheckgroup',My.UI.CheckboxGroup);

其中async:false, 的意思是同步的意思。

接着是调用的代码，这里把我所有代码都拷贝过来了，自己摘抄着看

Ext.onReady(function(){

    Ext.QuickTips.init();
    
    // turn on validation errors beside the field globally
    Ext.form.Field.prototype.msgTarget = 'side';
    /*====================================================================
     * CheckGroup example
     *====================================================================*/
    var cc=new My.UI.CheckboxGroup({
    //fieldLabel: 'Auto Layout',
    name: 'temCheckedgroup', 
    dataUrl: '${pageContext.request.contextPath}/cashway/DetailSearch_getkdpjnlTableInfo.do'
     });
    
    var checkGroup = {
        xtype: 'fieldset',
        title: '请选择查询条件',
        autoHeight: true,
        layout: 'form',
        //collapsed: true,   // initially collapse the group
        //collapsible: true,
        items: [cc]
    };
    
    var sp = new Ext.FormPanel({
       url:'${pageContext.request.contextPath}/cashway/DetailSearch_next.do',
       standardSubmit: true,
       renderTo:'form-cthid',
    });
    
    // combine all that into one huge form
    var fp = new Ext.FormPanel({
        
        frame: true,
        labelWidth: 10,
        url:'${pageContext.request.contextPath}/cashway/DetailSearch_next.do',
        renderTo:'form-ct',
        bodyStyle: 'padding:0 10px 0;',
        items: [
            
            checkGroup
            
        ],
        buttons: [{
            text: '下一步',
            handler: function(){
            //var fp = this.ownerCt.ownerCt,
                form = fp.getForm();
                sform = sp.getForm();
            if (form.isValid()) {
                // check if there are baseParams and if
                // hiddent items have been added already
                if (sp.baseParams && !sp.paramsAdded) {
                    // add hidden items for all baseParams
                    for (i in sp.baseParams) {
                       //alert(i);
                        sp.add({
                            xtype: 'hidden',
                            name: i,
                            value: fp.baseParams[i]
                        });
                    }
                    sp.doLayout();
                    // set a custom flag to prevent re-adding
                    sp.paramsAdded = true;
                }
                for(var ik =0;ik<cc.items.length;ik++)
                {
                   if(cc.items.itemAt(ik).checked)
                   {
                       var stuId = new Ext.form.TextField({
                                    
                                    name:'checkeditem',
                                    value:cc.items.itemAt(ik).inputValue,
                                    readOnly:true
                                    });
                    sp.add(stuId);
                   }
                }
                //alert(cc.items.itemAt(0).inputValue);
                form.submit();
            }
               //if(fp.getForm().isValid()){
               //     Ext.Msg.alert('Submitted Values', 'The following will be sent to the server: <br />'+ 
               //         fp.getForm().getValues(true).replace(/&/g,', '));
                
                //}
                //showPopupDetailWindow();
            }
        },{
            text: '重置',
            handler: function(){
                fp.getForm().reset();
            }
        }]
    });
});

强调一下sp那个form是没用了，我对struts不是太熟悉，提交的时候我开始想的是构建一个form然后把所有选中的项添加到form中去然后提交，后来发现checkboxgroup是只提交选中的项，所以直接submit原来的那个form就可以了。

后台获取：

注意这个checkboxgroup的name是name: 'temCheckedgroup', 没有i开头是后面action里面的属性如果是i开头的话会出问题（我没研究过，遇到了）。

后台代码：

private String[] temCheckedgroup;

有get set方法即可，这样提交的时候会自动的装配值，因为name都是相同的，所以自动装配成数组形式。

开发.net习惯了，struts还是很不适应 呵呵，弄了两天。ext虽然强大，但是我还没开始喜欢。