`
yangyi
  • 浏览: 114544 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

Ext Checkbox group表单提交

    博客分类:
  • Web
阅读更多
1 对于类型是checkboxgroup的数据,数据库中保存数据的格式是value1,value2...valueN,其中1~N的数据有可能不存在,如果选中则存在,最后拼接成一个串。
在Ext中,通过Record对象向FormPanel中的内置对象BasicForm加载数据时,采用的是setValues方法,而setValues第一步要通过Record中定义的name使用findField方法找到表单元素,遗憾的是,继承了Field的checkboxgroup组件并不能正确的通过getName返回自身引用,所以,需要对getName方法进行重写,此外,为了适应我们采用的数据格式,对于该组件的setValue(被setValues调用)和getValue(获取到已加工的数据,此事后话)也要进行重写。故而对于形如:
                 {  
	                   xtype: 'checkboxgroup',
	                   name: 'biztype',  
	                   width: 220,
	                   columns: 3,
	                   fieldLabel: '业务类别',
	                   items: [  
	                       {boxLabel: '类别1', inputValue: '01'},  
	                       {boxLabel: '类别2', inputValue: '02'},  
	                       {boxLabel: '类别3', inputValue: '03'},  
	                       {boxLabel: '类别4', inputValue: '04'}  
	                       ]  
	                 }

的checkboxgroup定义,需重写类如下:

Ext.override(Ext.form.CheckboxGroup,{ 
	//在inputValue中找到定义的内容后,设置到items里的各个checkbox中 
	setValue : function(value){
		this.items.each(function(f){
			if(value.indexOf(f.inputValue) != -1){
				f.setValue(true);
			}else{
				f.setValue(false);
			}
		});
	},
	//以value1,value2的形式拼接group内的值
	getValue : function(){
		var re = "";
		this.items.each(function(f){
			if(f.getValue() == true){
				re += f.inputValue + ",";
			}
		});
		return re.substr(0,re.length - 1);
	},
	//在Field类中定义的getName方法不符合CheckBoxGroup中默认的定义,因此需要重写该方法使其可以被BasicForm找到
	getName : function(){
		return this.name;
	}
});


2 通过内置对象basicForm的getValues方法可以获取到一个form的完整json数据,但遗憾的事,这里取到的是dom的raw数据,类似emptyText的数据也会被返回,而Field的getValue方法不存在这个问题,所以如果想要返回一个非raw的json集合,可以给formpanel添加如下方法:
	getJsonValue:function(){
		var param = '{';
		this.getForm().items.each(function(f){
			var tmp = '"' + f.getName() + '":"' + f.getValue() + '",';
			param +=  tmp;
		});
		param = param.substr(0,param.length - 1) + '}';
		return param;
	}

这个方法同样适用于上面定义的checkboxgroup,如此就可以把前后台的数据通过json统一起来了
分享到:
评论

相关推荐

    Ext checkBoxGroup的用法和取值

    本篇将详细探讨`checkBoxGroup`的使用方法及其取值方式,这对于创建复杂的表单和数据选择功能至关重要。 `Ext JS`中的`checkBoxGroup`是一个方便的组件,它允许用户在一个组内多选或单选复选框。`checkBoxGroup`常...

    Ext表单组件之checkbox

    如果需要一组互斥的复选框,可以使用`Ext.container.CheckboxGroup`,它允许用户从一组选项中选择一个。配置`columns`属性可以设置每行显示的复选框数量。 8. **响应式设计** 在移动设备上,复选框的布局可能需要...

    ExtJS实现动态读写Checkboxgroup

    var checkboxGroup = Ext.create('Ext.form.CheckboxGroup', { columns: 2, items: [{ boxLabel: 'Option 1', name: 'option1', inputValue: '1' }, { boxLabel: 'Option 2', name: 'option2', inputValue:...

    ext checkboxgroup 回填数据解决

    在EXTJS框架中,`Ext.checkboxgroup` 是一个用于创建一组复选框的组件,通常用于用户界面中提供多选选项。在实际应用中,我们经常需要从服务器获取数据并填充到这些复选框组中,这就涉及到数据回填的问题。在给定的...

    Ext2.0 form使用实例的例程

    2. **表单字段(Form Fields)**:包括文本字段(TextField)、密码字段(PasswordField)、选择框(Checkbox)、复选框组(CheckboxGroup)、单选框(RadioButton)、下拉列表(ComboBox)、日期选择器(DateField...

    extjs 初始化checkboxgroup值的代码

    Extjs框架中内置了多种表单组件,其中Ext.form.CheckboxGroup就是专门用来处理复选框组的组件。当我们需要通过代码控制复选框组中哪些复选框被选中,可以通过覆写(override)Ext.form.CheckboxGroup的方法来实现。 ...

    ext.net写的formgroup

    4. **插入表单字段**:在`FormGroup`内,添加你需要的表单控件,如`<ext:TextField>`、`<ext:CheckBox>`等,并为其设置ID、Name和必要的验证规则。 5. **运行和测试**:在VS2008中编译并运行项目,检查表单是否按照...

    EXT 多选

    EXT 提供了丰富的组件库,包括表格、面板、窗口、表单等,而“多选”功能则主要体现在 EXT 的表单组件中,特别是多选框(CheckboxGroup)。 EXT 的多选功能通常通过 CheckboxGroup 组件来实现,这是一个可以包含多...

    Ext简单例子

    复选框可以单独使用,也可以组成组(CheckboxGroup)。 5. **单选按钮(Radio)**:与复选框类似,但用户只能在一组中选择一个。单选按钮也需要放在RadioGroup中才能正常工作。 6. **日期选择器(DatePicker)**:...

    EXT3.2 多选下拉框

    多选下拉框在EXT JS中通常通过`Ext.form.CheckboxGroup`或`Ext.form.RadioGroup`类来实现,但在EXT3.2中,实现多选下拉框功能通常会使用`Ext.form.FieldSet`或`Ext.form.ComboBox`的自定义扩展。这类组件提供了复选...

    ext例子自写

    在ExtJS中,这可以通过`Ext.form.field.CheckboxGroup`或者`Ext.form.field.MultiSelect`实现,这些组件允许用户通过复选框或类似下拉列表的形式进行多选操作,提供了一种高效的数据输入方式。 "多页签提交数据"是...

    form表单加载复杂json数据

    对于数组,你可以使用`checkboxgroup`、`radiogroup`或其他重复字段来表示。例如: ```javascript items: [{ xtype: 'fieldset', title: 'Nested Data', items: [{ xtype: 'textfield', fieldLabel: 'Nested ...

    ExtJSWeb应用程序开发指南(第2版)

    4.1.8 Ext.form.CheckboxGroup和Ext.form.RadioGroup 4.1.9 Ext.form.field.Trigger触发字段 4.1.10 Ext.form.field.Spinner微调字段 4.1.11 Ext.form.field.Picker拾取器字段 4.1.12 Ext.form.field.ComboBox...

    ExtJs_xtype一览

    - `checkboxgroup`:`Ext.form.CheckboxGroup`,自2.2版本起,用于组织多个多选框的组件。 - `displayfield`:`Ext.form.DisplayField`,只读显示,不参与验证和提交的文本字段。 - `radiogroup`:`Ext.form....

    extjs控件列表

    **Ext.form.CheckboxGroup** - **描述**: 编组的多选框,可以同时管理多个多选框。 - **用途**: 创建一组相关联的多选框,如兴趣爱好选择。 **Ext.form.DisplayField** - **描述**: 仅显示,不校验/不被提交的...

    ExtJS-3.4.0系列目录

    - `Ext.form.CheckboxGroup` 和 `Ext.form.RadioGroup`:用于组合复选框和单选框。 - `Ext.form.field.Trigger`:触发字段,常用于下拉搜索框。 - `Ext.form.field.Spinner`:用于数字的微调。 - `Ext.form....

    Extjs的学习资料

    - `Ext.widgets.form`:涉及表单组件,如TextField、ComboBox、CheckboxGroup等,用于用户输入。 - `Ext.widgets.grid`:关于网格组件的详细API,涵盖列配置、行编辑、分页等。 - `Ext.Element`:DOM元素操作的...

    ExtJs组件类的对应表

    16. **`checkboxgroup`** - `Ext.form.CheckboxGroup`,自2.2版本起引入,用于创建一组相关的多选框。 以上列举的组件是ExtJs框架中常用的部分,通过这些组件的灵活组合与配置,开发者可以构建出复杂且高度定制化的...

    Extjs xtype集合

    - **`Class`**: `Ext.form.Checkbox` - **描述**: 复选框组件。 3. **`combo`:** - **`xtype`**: `combo` - **`Class`**: `Ext.form.ComboBox` - **描述**: 下拉框组件。 4. **`datefield`:** - **`xtype`...

Global site tag (gtag.js) - Google Analytics