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雖然強大，但是我還沒開始喜歡。