EXTJS 动态添加Checkbox
2015-11-20 15:29
555 查看
function test(){
loadCheckbox();
var ShowConfigFormPanel = Ext.create('Ext.form.Panel', {
bodyPadding : 5,
bodyCls : 'formBackground',// 背景色CSS
width : 300,
height : 400,
items : [ListFormItem]
});
var ListFormItem = {
xtype : 'fieldset',
collapsible : true,// 显示切换展开收缩状态的切换按钮
layout : {
type : 'table',
columns : 2
},
items : [{
xtype: 'checkboxgroup',
id: 'lblName',
name: 'checkName',
columns: 6,
border: true,
anchor: '100%'
}]
};
}
function loadCheckbox(){
Ext.Ajax.request({
url: 'FindList.action',
success: function (response) {
//将小站名作为复选框
var obj = eval("(" + response.responseText + ")");
var len = obj.relist.length;//注意自己在后台返回的JSON对象,我的是relist,在FireBug打印出response
if (obj.relist == null || len == 0) {
return;
}
var checkboxgroup = Ext.getCmp("checkName");
for (var i = 0; i < len; i++) {
var checkbox = new Ext.form.Checkbox(
{ boxLabel: obj.relist[i].Name,//以名字作为复选框的Label
name: i
});
checkboxgroup.items.add(checkbox);
}
SpeedListShowConfigFormPanel.doLayout(); //重新调整版面布局
}
});
}
loadCheckbox();
var ShowConfigFormPanel = Ext.create('Ext.form.Panel', {
bodyPadding : 5,
bodyCls : 'formBackground',// 背景色CSS
width : 300,
height : 400,
items : [ListFormItem]
});
var ListFormItem = {
xtype : 'fieldset',
collapsible : true,// 显示切换展开收缩状态的切换按钮
layout : {
type : 'table',
columns : 2
},
items : [{
xtype: 'checkboxgroup',
id: 'lblName',
name: 'checkName',
columns: 6,
border: true,
anchor: '100%'
}]
};
}
function loadCheckbox(){
Ext.Ajax.request({
url: 'FindList.action',
success: function (response) {
//将小站名作为复选框
var obj = eval("(" + response.responseText + ")");
var len = obj.relist.length;//注意自己在后台返回的JSON对象,我的是relist,在FireBug打印出response
if (obj.relist == null || len == 0) {
return;
}
var checkboxgroup = Ext.getCmp("checkName");
for (var i = 0; i < len; i++) {
var checkbox = new Ext.form.Checkbox(
{ boxLabel: obj.relist[i].Name,//以名字作为复选框的Label
name: i
});
checkboxgroup.items.add(checkbox);
}
SpeedListShowConfigFormPanel.doLayout(); //重新调整版面布局
}
});
}
相关文章推荐
- javaScript实现图片滚动及一个普通图片轮播的代码
- DataTable转换为Json格式
- 【转】JMeter中对于Json数据的处理方法
- 使用JS对数组进行排序,设置计时器和计数器
- js常用的封装函数
- $.fn.serializeJson = function() {}中fn代表什么,谁是函数名
- jsp引用js乱码
- 2015使用JavaScript的12条建议
- javascript的简易发布/订阅模式
- 为什么 ++[[]][+[]]+[+[]] = 10 ?
- JSP:自定义标签的实现步骤及小例
- JSON和XML的区别
- DataContractJsonSerializer进行Json的序列化和反序列化
- JSP:JSTL--JSP Standard TAG Library
- js如何去当前时间前一天的时间和后一天
- js 闭包作用
- 不想让浏览器运行javascript脚本的方法
- js 毫秒换算成秒
- JavaScript获取浏览器信息的方法
- JavaScript性能优化之小知识总结