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虽然强大，但是我还没开始喜欢。