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里的)

然后，通过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