ExtJs 4.2.1 复选框数据项动态加载

浏览数：28 / 时间：2015年06月09日

最近在做博客项目，后台管理用的是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 
len = obj.data.length;
                if 
(obj.data == null 
|| len == 0) {
                    return;
                }
 
                var 
checkboxgroup = Ext.getCmp("lblName");
                for 
(var 
i = 0; i < len; i++) {
                    var 
checkbox = new 
Ext.form.Checkbox(
                        { boxLabel: obj.data[i].Name,
                            name: ‘cb-‘ 
+ i
                        });
                    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里的)，

<span style="font-size: 16px;"> 　　　　　　　　 var 
checkboxgroup = Ext.getCmp("lblName");
                for 
(var 
i = 0; i < len; i++) {
                    var 
checkbox = new 
Ext.form.Checkbox(
                        { boxLabel: obj.data[i].Name,
                            name: ‘cb-‘ 
+ i
                        });
                    checkboxgroup.items.add(checkbox);
                }
                formPanel.doLayout(); //重新调整版面布局 </span><br><br>

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

ExtJs 4.2.1 复选框数据项动态加载,古老的榕树,5-wow.com

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

ExtJs 4.2.1 复选框数据项动态加载