`
燕子~~
  • 浏览: 108990 次
  • 性别: Icon_minigender_2
  • 来自: 北京
社区版块
存档分类
最新评论

实现Ext表单对checkBoxGroup的统一管理

阅读更多

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`常...

    ExtJS实现动态读写Checkboxgroup

    在给定的文件名`ext-basex.js`中,我们可以推测它可能包含了ExtJS的基础组件或扩展,可能包括CheckboxGroup的实现。通常,这些文件会定义组件的类、样式和行为。为了进一步了解如何利用`ext-basex.js`,你需要查看该...

    Ext表单组件之checkbox

    本篇文章将深入探讨Ext表单组件中的checkbox,以及如何利用源码和相关工具进行定制和优化。 1. **复选框的基本概念** 复选框在用户界面中常用于让用户从多个选项中选择一个或多个。在Ext JS中,复选框是`Ext.form....

    ext checkboxgroup 回填数据解决

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

    Ext2.0 form使用实例的例程

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

    ext.net写的formgroup

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

    extjs 初始化checkboxgroup值的代码

    当我们需要通过代码控制复选框组中哪些复选框被选中,可以通过覆写(override)Ext.form.CheckboxGroup的方法来实现。 在提供的代码中,首先使用了Ext.override方法,这是Extjs提供的一个功能,允许开发者扩展或...

    EXT 多选

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

    EXT3.2 多选下拉框

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

    Ext简单例子

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

    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控件列表

    **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帮助文档pdf版

    - `Ext.data.GroupingStore.group(field)`: 对数据进行分组。 - `Ext.data.GroupingStore.ungroup()`: 解除数据分组。 #### 37. Ext.data.SimpleStore 类 (P.34) - **概述**:简单的存储类,适用于小数据集。 - *...

    ExtJs_xtype一览

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

    ExtJs组件类的对应表

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

    EXT WebUi标签库使用说明

    - **checkBoxGroup**:一组复选框,便于管理多个复选框的选中状态。 - **select**:下拉框,支持编辑和智能填充,提升用户体验。 - **dateEdit**:日期选择器,方便用户输入日期信息。 - **groupBox**:分组容器...

Global site tag (gtag.js) - Google Analytics