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

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

 

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
//点击编辑弹出的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里的)　　　　　　　

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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里面，就完成了动态加载的效果！

 

?
1
//---------------------------------------更新部分--------------------------------------

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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
//获取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

 

posted @   Seaurl  阅读(2248)  评论(0)  编辑  收藏  举报
编辑推荐：
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
阅读排行：
· 周边上新：园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源！
· .NET周刊【3月第1期 2025-03-02】
· 分享 3 个 .NET 开源的文件压缩处理库，助力快速实现文件压缩解压功能！
· [AI/GPT/综述] AI Agent的设计模式综述
历史上的今天：
2013-03-18 js触发asp.net的Button的Onclick事件
点击右上角即可分享
微信分享提示
AI IDE Trae