`
THELOG
  • 浏览: 4096 次
  • 性别: Icon_minigender_1
文章分类
社区版块
存档分类
最新评论

ExtJS动态加载复选框

阅读更多
Ext.onReady(function(){
	/**
	 * 功能:动态加载复选框
	 * @param {Object} r
	 */
	Ext.Ajax.request({
		url:basePath+'datamanager/equipmentreport/getCheckBox.hs',
		success:function(r){
			var unitColumns=[];
			//json字符串转换成json对象
			var jsonobj=eval('('+r.responseText+')');
			//添加全部选项
			unitColumns.push({
				boxLabel:'全部',
				name:'all',
				inputValue:'all',
				checked:false
			})
			//循环遍历加载
			for(var i=0;i<jsonobj.length;i++){
				unitColumns.push({
					boxLabel:jsonobj[i].boxLabel,
					name:jsonobj[i].name,
					inputValue:jsonobj[i].inputValue,
					checked:jsonobj[i].checked
				});
			}
			var checkboxgroup1=new Ext.form.CheckboxGroup({
				id:'checkbox1',
				fieldLabel:'设备区域',
				anchor:'100%',
				hideLabel:false,
				columns:8,
				items:unitColumns
			});
			mainPanel.add(0,checkboxgroup1);
			mainPanel.doLayout();
		}
	});
	
	var panel1=new Ext.form.FormPanel({
		renderTo: 'main',
		labelAlign : 'left',
		labelWidth : 60,
		layout : 'form',
		border : false,
		width : document.body.clientWidth,
		items:[]
	});
});

 注:eval()函数作用是把json字符串转换成json对象;

        调用mainPanel.add()方法后需要执行doLayout()

0
1
分享到:
评论

相关推荐

    extjs4.1下拉复选框完整DEMO

    总结一下,"extjs4.1下拉复选框完整DEMO"展示了如何利用ExtJS 4.1的组件系统和数据存储机制创建一个动态加载数据的下拉复选框。这个DEMO的实现包括核心库、用户扩展、资源文件和演示代码,为开发者提供了一个完整的...

    带复选框的 ExtJs tree

    在给定的文件中,我们关注的是“带复选框的ExtJS tree”这一主题,这涉及到ExtJS框架下的树形组件(TreePanel)如何与复选框结合,为用户提供更为灵活的数据选择和管理方式。 ### 标题解析:“带复选框的ExtJS tree...

    extjs3.X 带复选框的树

    总的来说,带复选框的树在ExtJS 3.x中是一个强大的功能,它结合了树形结构和复选框的选择机制,为用户提供了一种直观且高效的方式来操作层级数据。理解和实现这样的功能,对提升ExtJS应用的用户体验至关重要。

    EXTJS动态树支持checkbox 全选

    标题中的“EXTJS动态树支持checkbox全选”指的是EXTJS中树组件的一个特性,即在树形结构中添加复选框(checkbox)功能,并支持全选和全取消选中操作。这样的功能对于需要用户进行多项选择的场景非常有用,比如文件...

    extjs带复选框的树包括全选 反选 子选父以及 父选子

    复选框的添加通常通过配置`checkbox`属性来完成。例如: ```javascript { text: '父节点', checked: false, children: [ { text: '子节点1', checked: false }, { text: '子节点2', checked: true } ] } ``` ...

    无废话ExtJs 系统教程十九[动态复选框:RemoteCheckboxGroup]

    在本教程中,我们将深入探讨ExtJS中的"RemoteCheckboxGroup",这是一个用于处理远程数据源的动态复选框组件。这个组件通常用于显示从服务器获取的动态选项,它允许用户根据需要选择或取消选择多个选项,同时将这些...

    ExtJs 动态添加表单

    表单是数据输入和验证的核心组件,可以包含各种字段类型,如文本框、下拉菜单、复选框等。这些字段可以通过`Ext.form.field.Field`基类进行扩展,每个字段都有其特定的配置选项和行为。 动态添加表单通常涉及以下几...

    Extjs3.4.0版本 多选下拉框效果支持多选/全选/全不选

    这个功能增强了标准的单选下拉框,允许用户同时选择多个条目,通常通过复选框实现。在描述中提到的“全选/全不选”功能,是多选下拉框的一种高级特性,它提供了快速选择或取消所有选项的便利。 首先,我们来看看`...

    关于extjs treepanel复选框选中父节点与子节点的问题

    总的来说,EXTJS TreePanel的复选框功能是通过监听节点状态变化并递归地更新子节点状态来实现的,同时需要确保所有子节点未选中时父节点才能取消选中。这种设计提高了用户界面的交互性和易用性。

    Extjs panel里添加checkboxgrop后台动态获取数据

    Extjs checkboxgrop动态获取后台数据,并默认为全选状态

    Extjs3 多选下拉框LovCombo

    在ExtJS 3中,多选下拉框(LovCombo)是一种复合组件,它结合了下拉列表和“爱好者选择”(LOV,Lookup Value)的功能,允许用户在多个选项中进行复选选择。在Web应用中,这种组件常用于数据输入,特别是在数据库...

    带复选框的异步动态树

    综上所述,“带复选框的异步动态树”是一个融合了EXTJS前端框架、异步数据加载技术以及MySQL数据库的复杂开发实例。通过熟练掌握这些知识点,开发者可以构建出高效、交互性强的树形数据管理界面。

    ext复选框的ColumnTree扩展包

    "ext复选框的ColumnTree扩展包"是EXT框架的一个扩展,它为ColumnTree添加了复选框功能。这使得用户可以在树形结构中进行多选操作,极大地提高了交互性和数据处理效率。这个扩展包包括了所有必要的JavaScript和CSS...

    extjs表格(表格后台数据读,分页),树(后台数据读取,复选框联动)的基本操作示例

    在这个示例中,我们关注的是ExtJS中的两个关键组件:GridPanel和TreePanel,以及它们如何与后台数据进行交互,实现分页和复选框联动功能。 1. **GridPanel**:GridPanel是ExtJS中用于展示表格数据的组件,它提供了...

    Extjs gridpanel 中的checkbox(复选框)根据某行的条件不能选中的解决方法

    在Extjs中,GridPanel组件是非常常用的一个表格组件,它提供了丰富的功能来...总的来说,通过上述方法,我们可以在Extjs的GridPanel中根据某行数据的条件控制复选框的显示及选中状态,有效地实现复杂的业务逻辑需求。

    Extjs Grid 操作大全

    根据提供的文件信息以及标题与描述,本文将详细探讨Extjs Grid的操作大全,特别是关于如何获取Grid中的各种值以及如何添加各种点击事件。 ### Extjs Grid 操作大全 #### 一、Extjs Grid简介 Extjs 是一个用...

    ext4实现带复选框的多选下拉框

    3. **数据绑定**:利用EXTJS的数据绑定机制,将下拉框的数据源与模板中的复选框关联起来。这通常通过`store`属性完成,`store`是一个包含所有可选项目的数据集。 4. **事件处理**:添加事件监听器,比如`itemcheck`...

    extjs 复选下拉框的例子

    这些规则通过`checked`和`unchecked`类名应用到元素上,从而实现了复选框的样式。 此外,代码中还包括了一个自定义的`CustomCancelDropdownComboBox`类,继承自`Ext.form.ComboBox`。这个类添加了额外的功能,例如...

    Extjs 点击复选框在表格中增加相关信息行

    首先,我们需要创建一个复选框组(CheckboxGroup)来显示可供选择的省份。在这个例子中,`$provinceCheckbox01`是一个复选框组,它通过监听`change`事件来响应用户的选择变化。 接下来,定义了一个名为`gridItems`...

Global site tag (gtag.js) - Google Analytics