最近在做博客项目，后台管理用的是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
|
//点击编辑弹出的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里的)，
|
1
2
3
4
5
6
7
8
9
|
<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里面，就完成了动态加载的效果！