`
xiaoqi18
  • 浏览: 16906 次
  • 性别: Icon_minigender_1
  • 来自: 北京
最近访客 更多访客>>
文章分类
社区版块
存档分类
最新评论

ExtJs中checkbox和 radiobox的问题汇总

阅读更多

这个帖子主要记录我在使用ExtJs 中遇到的一些问题。
1、checkbox 和radiobox在IE下呈纵向显示的问题
添加如下css解决:

 .x-form-check-wrap,.x-form-radio-wrap{padding:3px 0 0 0;line-height:15px;width:150px;}  
.x-form-check-group .x-form-check-wrap,.x-form-radio-group .x-form-radio-wrap{height:15px;}  
 .ext-ie .x-form-check-group .x-form-check-wrap,.ext-ie .x-form-radio-group .x-form-radio-wrap{height:17px;}  
 .commquery-grid-row {color: '#FF0000';!important;}  
 .x-grid-record-red table{color: #FF0000;}  

 2、动态生成checkbox 和radiobox
在项目应用中很多时候checkbox 和radiobox的值是从数据库当中读取并 生成的。
首先我们建一个checkboxgroup

{  
     id:'id',  
     name:'name',  
     xtype : 'checkboxgroup',  
     fieldLabel : 'test',  
     columns : 3,  
     items:getData()  
}  

  在其中我指定了该checkboxgroup的items是由getData()生成

   1. var itemArray     
   2.   
   3. function getData(){  
   4.    var conn = new Ext.data.Connection();  
   5.    conn.request({  
   6.        url: '',  
   7.        success: function(response) {  
   8.            itemArray = Ext.util.JSON.decode(response.responseText);  
   9.             Ext.getCmp('id').items=itemArray;  
  10.           }  
  11.        });  
  12.   }   

 在这里通过Connection从后台获取json并将值赋给checkboxgroup
json的格式如下
[{id:'id',boxLabel:'boxLabel',name:'name'},...]
3、checkbox 和radiobox在Form中的赋值问题
由于Ext原来的checkbox 和radiobox是无法动态赋值的,通过添加下 面代码修复

   1. Ext.override(Ext.form.BasicForm,{     
   2.     findField : function(id){             
   3.         var field = this.items.get(id);  
   4.         if(!field){     
   5.             this.items.each(function(f){     
   6.                 if(f.isXType('radiogroup')||f.isXType('checkboxgroup')){     
   7.                     f.items.each(function(c){     
   8.                         if(c.isFormField && (c.dataIndex == id || c.id == id || c.getName() == id)){     
   9.                             field = c;     
  10.                             return false;     
  11.                         }     
  12.                     });     
  13.                 }     
  14.                                      
  15.                 if(f.isFormField && (f.dataIndex == id || f.id == id || f.getName() == id)){     
  16.                     field = f;     
  17.                     return false;     
  18.                 }     
  19.             });     
  20.         }     
  21.         return field || null;     
  22.     }      
  23. });  
 
分享到:
评论

相关推荐

    ExtJs4 Checkbox tree

    ExtJs4 Checkbox Tree是基于ExtJs 4框架实现的一种特殊树形组件,它在传统的树形结构基础上增加了复选框功能。这种组件常用于需要用户多选树形数据的场景,比如权限设置、目录选择等。下面将详细介绍ExtJs4 Checkbox...

    ExtJS实现动态读写Checkboxgroup

    总结起来,动态读写ExtJS的CheckboxGroup涉及创建CheckboxGroup、读取选中值、设置选中值以及监听变化。通过结合`ext-basex.js`文件,你可以构建出更复杂的交互式表单和应用程序。记住,始终关注用户需求和体验,...

    EXTJS checkbox赋值

    在描述中提到的“最难解决的问题”——在修改时为`checkboxgroup`赋值,这是因为EXTJS默认的`setValue`方法可能不会按照期望的方式更新所有复选框的状态。为了解决这个问题,开发者通常需要自定义方法来处理。如示例...

    解决Extjs当中复选框全选后,取消选中某一项,全选框仍是选中状态的问题

    在EXTJS这个强大的JavaScript框架中,用户界面的交互设计是其一大亮点,其中包括各种各样的控件,如复选框(checkboxes)和全选功能。然而,在实际应用中,我们可能会遇到一个问题:当实现全选功能后,如果尝试取消...

    extjs tree CHECKBOX 多选删除未实现(带SQL脚本)

    在网上下载别人的代码,改进加上CHECKBOX ,但是批量删除做不出来,希望高手完成并分享。

    Extjs grid 中文排序问题修正

    总结起来,解决EXTJS Grid中文排序问题主要涉及到自定义排序函数和利用localeCompare方法。通过这种方式,我们可以确保EXTJS Grid在处理中文数据时能正确排序,提供更好的用户体验。在实际开发中,可能还需要考虑...

    EXTJS动态树支持checkbox 全选

    总结来说,EXTJS动态树支持checkbox全选是一个结合了EXTJS TreePanel组件、数据模型、事件处理和异步加载技术的功能实现,旨在提供用户友好的多选操作。通过这个功能,开发者可以构建出更加交互性强、功能丰富的Web...

    Extjs3.0 checkboxGroup 动态添加item实现思路

    Extjs3.0 中的CheckboxGroup默认不能动态添加item。虽然它继承了Ext.form.Field,但是却类似于容器。 CheckboxGroup配置中的items处理生成一个对应的panel,该处理过程只有一次,所以很难对CheckboxGroup进行动态...

    extjs中文文档大全

    1. **ExtJS实用开发指南**:此部分主要针对ExtJS的实际应用,包含如何快速上手、组件的使用、布局管理、数据绑定和Ajax交互等内容。开发者可以从中了解到如何创建基本的页面结构,使用GridPanel展示数据,以及通过...

    checkbox tree extjs2

    在ExtJS中,Checkbox Tree是一种特殊的树形组件,它允许用户通过复选框选择树结构中的节点。这个"checkbox tree extjs2"主题主要涉及如何在ExtJS 2版本中实现带有复选框功能的树形控件。 在ExtJS 2中,Checkbox ...

    ExtJs3.3中文API.CHM_extjs3.3中文文档_

    在"ExtJs3.3中文API.CHM"中,开发者可以找到关于ExtJS 3.3的所有API和类的详细描述,以及相关的示例代码。 ExtJS 3.3的核心特性包括: 1. **组件化**:ExtJS基于组件模型,提供了一系列预定义的UI组件,如按钮、...

    extjs中文帮助文档和英文api

    这份“extjs中文帮助文档和英文api”提供了全面的ExtJS API信息,帮助开发者理解并有效地使用这个框架。 中文帮助文档(extjs帮助文档.chm)对ExtJS的各种组件、类、方法、属性进行了详尽的解释,使得不懂英文或者...

    extjs中的xtype的所有类型介绍

    ExtJS 中的 xtype 是一个非常重要的概念,它用于定义组件的类型,从而确定组件的行为和样式。xtype 是 ExtJS 的核心组件之一,它提供了大量的组件类型,满足不同场景下的需求。 基本组件 1. button - xtype: '...

    EXT checkbox 的 check 事件

    EXTjs2 的treeNode 带有checkbox,可是API中,关于checkbox的事件就只有一个checkchange事件,所以写个方法传上来。

    Extjs中文文档

    Extjs中文文档,包含Extjs的基本语法和各个类的详细说明以及用法。

    Extjs 中文API文档

    Extjs 中文API文档,有对Extjs相关API的中文说明

    Ext模拟下拉多选checkbox

    Extjs 模拟下拉多选checkbox

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

    在ExtJS中,树形组件(TreePanel)是一个常用的功能,用于展示层次结构的数据。当树形组件结合复选框时,可以实现用户对节点的选择操作,如全选、反选、子选父以及父选子。这些功能在数据管理、权限分配等场景中非常...

Global site tag (gtag.js) - Google Analytics