Ext4 checkbox 動態載入問題

bill1315發表於2012-12-05
專案上遇到checkbox動態載入問題,搜尋了下,發現有相應的文章:http://blog.csdn.net/zuoanlove/article/details/7741539,具體如下:

DoctorWorkStation_CommonDoctorAdvice.CreateYZCheckBoxWin = function(store, colnum,title) {     
    var count = store.getCount();     
    var myCheckboxItems = [];     
    for (var i = 0; i < count; i++) {     
        var boxLabel = store.getAt(i).get("name");     
        var name = store.getAt(i).get("id");     
        myCheckboxItems.push({     
                    boxLabel : boxLabel,     
                    name : name     
                });     
    }     
    var myCheckboxGroup = new Ext.form.CheckboxGroup({     
                xtype : 'checkboxgroup',     
                itemCls : 'x-check-group-alt',     
                columns : colnum,     
                items : myCheckboxItems     
            });     
    var form = new Ext.FormPanel({     
                border : true,     
                frame : true,     
                labelAlign : "right",     
                buttonAlign : 'right',     
                layout : 'column',     
                width : 500,     
                items : [myCheckboxGroup],     
                buttons : [{     
                    xtype : 'button',     
                    text : '確定',     
                    handler : function() {     
                        var ids = [];     
                        var cbitems = myCheckboxGroup.items;     
                        for (var i = 0; i < cbitems.length; i++) {     
                            if (cbitems.itemAt(i).checked) {     
                                ids.push(cbitems.itemAt(i).name);     
                            }     
                        }     
                        win.destroy();     
                        if (ids.length) {     
                            Ext.Msg.alert("訊息", "選中狀態的id組合字串為:"    
                                            + ids.toString());     
                        }     
                    }     
    
                }, {     
                    xtype : 'button',     
                    text : '取消',     
                    handler : function() {     
                        win.destroy();     
                    }     
    
                }]     
    
            });     
    var win = new Ext.Window({     
                modal : true,     
                layout : 'fit',     
                title : title,     
                width : 500,     
                height : 300,     
                plain : true,     
                items : [form]     
            });     
    win.show();     
    
}  


發現以上程式碼在ext4裡不完全適用。

以下實現修改的一個字串,為1時選中,為0時不選中。

初始化時:
selValue='111111111000011111'; 
for (var i = 0; i < count; i++) {    
        var boolValue=selValue.charAt(i)=='1'?true:false;         
        myCheckboxItems.add({    
                    boxLabel : i+1,    
                    name : 'cb',
            inputValue:selValue.charAt(i),
    checked:boolValue
                });    
    }    
取值時:
 var cbitems = myCheckboxGroup.items;   
 var str='',
                        for (var i = 0; i < cbitems.length; i++) {    
                            str+=cbitems.items[i].checked==true?'1':'0';
                            }    
                        } 

api如下:

add( Ext.Component[]/Ext.Component... component ) : Ext.Component[]/Ext.Component
Adds Component(s) to this Container.

Description:
Fires the beforeadd event before adding.
The Container's default config values will be applied accordingly (see defaults for details).
Fires the add event after the component has been added.
Notes:
If the Container is already rendered when add is called, it will render the newly added Component into its content area.

If the Container was configured with a size-managing layout manager, the Container will recalculate its internal layout at this time too.

Note that the default layout manager simply renders child Components sequentially into the content area and thereafter performs no sizing.

If adding multiple new child Components, pass them as an array to the add method, so that only one layout recalculation is performed.

tb = new Ext.toolbar.Toolbar({
    renderTo: document.body
});  // toolbar is rendered
// add multiple items.
// (defaultType for Toolbar is 'button')
tb.add([{text:'Button 1'}, {text:'Button 2'}]);
To inject components between existing ones, use the insert method.

具體可參見api :

Ext.container.AbstractContainer


 

相關文章