ExtJs 4.2.1 复选框数据项动态加载(更新一下)

最近在做博客项目，后台管理用的是ExtJs4.2.1版本，因为是初学所以在使用的时候也遇到不少的这样或那样的问题，也写了不少这方面的博客，今天要写的博客是关于复选框数据项动态的加载功能，以前也没用过，初次用，不知道怎么动态加载，静态加载很容易，添加itmes就可以了，于是我在网上找找有关这方面的博客，找到一篇，不过遗憾的是，这种方法太糟糕了，不是很方便，于是找到了一个很好的解决方法：

//点击编辑弹出的formpanel
        var formPanel = new Ext.FormPanel({
            //labelAlign: 'top',
            bodyStyle: 'padding:5px 20px 0 5px',
            autoScroll: true,
            layout: 'form',
            items: [
            {
                xtype: 'textfield',
                id: 'title',
                name: 'title',
                anchor: '100%'
            }, {
                xtype: 'htmleditor',
                id: 'context',
                name: 'context',
                border: true,
                plugins: [
	        	    Ext.create('Ext.zc.form.HtmlEditorImage')
	            ],
                height: 400,
                anchor: '100%'
            }, {
                xtype: 'checkboxgroup',
                id: 'lblName',
                name: 'lblName',
                columns: 6,
                border: true,
                anchor: '100%'
            }
          ],
            buttonAlign: 'center',
            buttons: [
        {
            text: '保存',
            icon: '../../../Images/extjs/disk.png',
            handler: function () {
                var text = form.getForm().findField('context').getValue();
                alert(text);
            }
        }, {
            text: '关闭',
            icon: '../../../Images/extjs/cross.png',
            handler: function () {
                win.close(this);
            }
        }
      ]
        });

        //通过extjs的ajax获取用户文章关联的标签数据
        Ext.Ajax.request({
            url: '/Manage/GetLableNameByUserIdAndArticleId',
            params: {
                articleid: rows[0].get('Id')
            },
            success: function (response) {
                var obj = eval("(" + response.responseText + ")");
                var len1 = obj.alldata.length;
                var len2 = obj.data.length;
                if (obj.data == null || len1 == 0) {
                    return;
                }
                var checkboxgroup = Ext.getCmp("lblName");
                for (var i = 0; i < len1; i++) {
                    var checkboxObj = {
                        boxLabel: obj.alldata[i].Name,
                        name: 'cb-' + i,
                        checked: false
                    };
                    for (var j = 0; j < len2; j++) {
                        if (obj.alldata[i].Id == obj.data[j].Id) {
                            checkboxObj.checked = true;
                        }
                    }
                    var checkbox = new Ext.form.Checkbox(checkboxObj);
                    checkboxgroup.items.add(checkbox);
                }
                formPanel.doLayout(); //重新调整版面布局
            }
        });

        //点击编辑弹出的windows(formpanel作为window的items)
        var win = Ext.create("Ext.window.Window", {
            title: "编辑",       //标题
            draggable: false,
            icon: '../../../Images/extjs/pencil.png',
            height: 600,                          //高度
            width: 850,                           //宽度
            layout: "fit",                        //窗口布局类型
            modal: true, //是否模态窗口，默认为false
            resizable: false,
            items: [formPanel]
        });

        //给form赋值
        formPanel.getForm().reset();
        var contents = rows[0].get('Contents');
        formPanel.getForm().findField("title").setValue(rows[0].get('Title'));
        formPanel.getForm().findField("context").setValue(decodeURI(contents));
        //window显示
        win.show();

　　

分析：

我现在讲解下，我是怎么动态加载复选框选项数据的，首先，初始化formpanel(formpanel里的数据项(items)创建了一系列的form(有textfield，htmleditor，checkboxgroup)，创建完毕后，再通过Extjs的ajax获取数据项的数据(这个数据就是放在checkboxgroup里的)　　　　　　　

var checkboxgroup = Ext.getCmp("lblName");
for (var i = 0; i < len1; i++) {
var checkboxObj = {
boxLabel: obj.alldata[i].Name,
name: 'cb-' + i,
checked: false
};
for (var j = 0; j < len2; j++) {
if (obj.alldata[i].Id == obj.data[j].Id) {
checkboxObj.checked = true;
}
}
var checkbox = new Ext.form.Checkbox(checkboxObj);
checkboxgroup.items.add(checkbox);
}
formPanel.doLayout(); //重新调整版面布局

　　

然后，通过Ext.getCmp()方法，获取到刚才在formpanel里创建的checkboxgroup组件，然后通过for循环创建checkbox(这就是将刚才通过ajax获取的数据项数据进行初始化)，然后，保存在checkboxgroup里面，接下来，就是最最重要的一步，当for循环结束后，你要重新调整版面布局，这时调用doLayout()方法，这样就动态的渲染到formpanel里的checkboxgroup里面，就完成了动态加载的效果！

//---------------------------------------更新部分--------------------------------------

注意：上面所述确实能够动态加载checkbox，但是(我最讨厌但是了)，用form.submit()方法提交的时候不能够将选中的checkbox提交到后台(用上面的代码，有兴趣的可以试试)，所以这种方法行不通，不过我又找到了一个新方法，点击这里查看。

//获取grid选中的数据
    var sm = Ext.getCmp("gridPanel").getSelectionModel();
    var rows = sm.getSelection();
    if (!sm.hasSelection()) {
        Ext.MessageBox.show({
            title: '提示',
            msg: '请选择一行数据进行操作！',
            buttons: Ext.MessageBox.OK,
            icon: Ext.MessageBox.INFO
        });
        return;
    }

    var myCheckboxGroup;//定义checkboxgroup组件

    //通过 Ext.Ajax.request()方法获取用户文章关联的标签数据
    Ext.Ajax.request({
        url: '/Manage/GetLableNameByUserIdAndArticleId',
        async: false,
        params: {
            articleid: rows[0].get('Id')
        },
        success: function (response) {
            var text = response.responseText;
            var obj = eval("(" + text + ")");
            var len1 = obj.data.alldata.length;
            var len2 = obj.data.mydata.length;

            var myCheckboxItems = [];//创建checkbox 数据项
            for (var i = 0; i < len1; i++) {
                var checkboxObj = {
                    boxLabel: obj.data.alldata[i].Name,
                    name: 'cbLable',
                    inputValue: obj.data.alldata[i].Id,
                    padding: '0 20px 5px 0',
                    checked: false
                };
                for (var j = 0; j < len2; j++) {
                    if (obj.data.alldata[i].Id == obj.data.mydata[j].Id) {
                        checkboxObj.checked = true;
                    }
                }
                myCheckboxItems.push(checkboxObj);//保存checkbox 数据项
            }
            //新建checkboxgroup组件(将checkboxItems数据项作为它的数据项)
            myCheckboxGroup = new Ext.form.CheckboxGroup({
                xtype: 'checkboxgroup',
                columns: 6,
                items: myCheckboxItems
            });
        }
    });

    //点击编辑弹出的formpanel
    var formPanel = new Ext.FormPanel({
        //labelAlign: 'top',
        bodyStyle: 'padding:5px 20px 0 5px',
        autoScroll: true,
        layout: 'form',
        items: [{
            xtype: 'textfield',
            name: 'title',
            anchor: '100%'
        }, {
            xtype: 'htmleditor',
            border: true,
            id: 'context',
            plugins: [
                    Ext.create('Ext.zc.form.HtmlEditorImage')
                ],
            height: 400,
            anchor: '100%'
        },
            myCheckboxGroup
          ],
        buttonAlign: 'center',
        buttons: [
        {
            text: '保存',
            icon: '../../../Images/extjs/disk.png',
            handler: function () {
                if (!formPanel.getForm().isValid()) {
                    return;
                }
                //
                var opera = formPanel.getForm().getValues(true).replace(/&/g, ', ');
                formPanel.getForm().submit({
                    url: '/Manage/SaveArticle',
                    method: 'get',
                    success: function (form, action) {
                        Ext.Msg.alert('Success', action.result.msg);
                        win.close(this);
                    },
                    failure: function (form, action) {

                    }
                });
            }
        }, {
            text: '关闭',
            icon: '../../../Images/extjs/cross.png',
            handler: function () {
                win.close(this);
            }
        }
      ]
    });

    //点击编辑弹出的windows(formpanel作为window的items)
    var win = Ext.create("Ext.window.Window", {
        title: "编辑",       //标题
        draggable: false,
        icon: '../../../Images/extjs/pencil.png',
        height: 600,                          //高度
        width: 850,                           //宽度
        layout: "fit",                        //窗口布局类型
        modal: true, //是否模态窗口，默认为false
        resizable: false,
        items: [formPanel]
    });

    //给form重置后赋值
    formPanel.getForm().reset();
    var contents = rows[0].get('Contents');
    formPanel.getForm().findField("title").setValue(rows[0].get('Title'));
    formPanel.getForm().findField("context").setValue(decodeURI(contents));
    //window显示
    win.show();

　　

　　又来总结一下：

其实他的解决思路是这样的：首先创建好checkbox和checkboxgroup然后再创建formpanel，再将之前创建好的checkboxgroup作为formpanel的items，这样，就没有问题了，而我之前做的是先创建formpanel然后再动态添加checkbox，再doLayout()，这样只能显示，而不能获取(不推荐)！所以这种方法解决了问题，不过还有一个小的技术点要提醒一下就是使用Ext.Ajax.request()方法的时候要设置为同步async: false,否则则出现，checkbox不显示，道理很简单，因为ajax是异步的所以当面板加载后才去创建checkboxgroup，这样当然就不行了，跟我之前的问题也差不多，希望大家不能犯我一样的错！

2014-03-20