`
倚地屠蛇
  • 浏览: 45265 次
  • 性别: Icon_minigender_1
  • 来自: 长沙
社区版块
存档分类
最新评论

Ext EditorGrid单元格控制小记

    博客分类:
  • Ext
阅读更多
需求:
    表格中,一列为复选框,另一列为下拉框。如果选中一列中的复选框,则要自动触发另一列复选框的单元格处于可编辑状态,让用户选择相应的选项。

    如图:



    实现方式:
    在复选框的选中事件中,增加如下代码:

    //考勤原因单元格自动单击一下
    var cell = this.grid.view.getCell(index, 5);
    cell.click();


整个代码为:
//是否缺勤?
var checkIsAttendance = new Ext.grid.CheckColumn({//自定义控件。参考Ext官方示例:http://www.extjs.com/deploy/dev/examples/grid/edit-grid.html
    header: '是否缺勤?',
    dataIndex: 'isAbsence',
    id: 'isAbsenceCheck',
	width:80,
	onChecked: function(checked, index, record){//参数:checkBox的选择状态 true/false
		//改变实际出勤人数
		if(checked){//选中一个表示多一个未出勤的人员,所以实际出勤人数-1
			Ext.get("notAttendanceNum").dom.value--;
			
			//alert(this.grid.getStore().getCount());

			//加到未出勤人员列表中,用于显示
			absenceArray.push(record.get("staffName"));
			
			//考勤原因单元格自动单击一下
			var cell = this.grid.view.getCell(index, 5);
			cell.click();

			//控制里面的选项


		}else{
			Ext.get("notAttendanceNum").dom.value++;
			//从未出勤人员列表中移出
			absenceArray.remove(record.get("staffName"));//数组中删除指定元素
		}
		
		var str = "";
		for(var i=0; i<absenceArray.length; i++){
			str += absenceArray[i];
			str += ", ";
		}
		//缺勤人员添加到textArea中显示
		Ext.get("absenceList").dom.value = str;
	}
});
  • 大小: 40.8 KB
分享到:
评论
4 楼 379548695 2010-08-14  
源码楼主不是都发出来了?
3 楼 zhanglongchao 2010-08-10  
有源代码的话给我一份,小弟刚学Ext 邮箱wnsx7218@qq.com,谢谢你
2 楼 zhanglongchao 2010-07-23  
写的不错啊!你有源代码的话给我发一份啊!我的邮箱wnsx7218@qq.com
1 楼 babydeed 2010-06-12  
挺好 不错!

相关推荐

    MySQL,DWR,JSON,EXT 实现EditorGrid

    使用EXT的EditorGrid,实现前台页面对数据直接进行增删改查操作。用户的友好性较好,已经实现分页功能。例子中使用了DWR和JSON.含MySQL数据库脚本,并已加入Log4j日志记录。本例详细讲解可以参见:...

    EXT2.0中文教程

    1.2. 看看ext-1.1.1的文档 1.3. 看看ext-2.0的文档 1.4. 为什么有的例子必须放在服务器上才能看到效果? 1.5. 为什么自己按照例子写的代码,显示出来总找不到图片 1.6. 我们还需要什么? 1.7. 入门之前,都看hello...

    Ext组件描述,各个组件含义

    - **主要用途**:用于编辑现有数据,例如在表格单元格内进行编辑。 **2.5 Editor Grid Panel (Ext.grid.EditorGridPanel)** - **xtype**: `editorgrid` - **功能描述**:Editor Grid Panel 是一个支持行级编辑的...

    EXT教程EXT用大量的实例演示Ext实例

    表格可以动态添加列,调整列宽,支持分页,甚至可以结合EditorGrid实现行的编辑和动态添加。Ext JS 2.0相较于1.x版本,表格控件的功能和API有更多的优化和改进。表格的分页功能可以通过前端工具条实现,也可以通过...

    Ext 开发指南 学习资料

    2.5. 让单元格里显示红色的字,图片,按钮,你还能想到什么? 2.6. 更进一步,自动行号和多选checkbox 2.6.1. 自动行号 2.6.2. 全选checkbox的时间了,请允许我让2.0先上场。 2.7. 分页了吗?分页了吗?如果还没分就...

    Ext中xtype和vtype.

    * editorgrid:一个编辑器网格组件,用于编辑数据。 * grid:一个网格组件,用于显示数据。 * paging:一个分页工具栏组件,用于分页显示数据。 * panel:一个面板组件,用于容纳其他组件。 * progress:一个进度条...

    AJAX 入门视频之 Ext 2.0.1 & DWR 1表格实时编辑器实例

    EditorGrid是Ext提供的一种可编辑的表格控件,它允许用户直接在表格单元格内编辑数据,提升了用户体验。在这个实例中,开发者利用EditorGrid实现了实时编辑功能,用户可以直接在表格中修改数据,而无需跳转到新的...

    ext的edittreegrid实现

    在EXT JS库中,"ext的edittreegrid实现"是一种功能强大的组件,它结合了树形视图(Tree)和编辑网格(EditorGrid)的功能,允许用户在具有层次结构的数据上进行直观的编辑操作。这个组件对于那些需要管理结构化且...

    Ext 4.1.0 中文API

    它还可以与其他组件结合,如EditorGrid,实现单元格编辑。 8. **Form(表单)**:Ext Form组件用于创建和处理用户输入。它包括各种表单字段,如文本框、复选框、下拉列表等,并支持验证和数据提交。 9. **Charts...

    ext增删查改demo

    EXTJS提供了一系列API来支持这些操作,如Grid面板可以方便地展示数据,并通过EditorGrid实现数据的编辑;FormPanel则用于创建和更新数据,而Store负责数据的存储和检索。 3. 数据模型(Model):EXTJS中的数据模型...

    精通JS脚本之ExtJS框架.part1.rar

    6.4.4 Ext.query与Ext.select 6.5 应用模板 6.5.1 Ext.Template 6.5.2 Ext.XTemplate 第7章 设计表单类布局 7.1 Form表单简介 7.1.1 Form表单的基本配置 7.1.2 ExtJS对Form表单的封装 7.2 ExtJS的表单组件 ...

    深入浅出ExtJS第2版

    3.4 在单元格里显示红色的字、图片和按钮 38 3.5 给Grid的行和列设置颜色 41 3.6 自动显示行号和复选框 42 3.6.1 自动显示行号 43 3.6.2 复选框 44 3.7 选择模型 45 3.8 表格视图--Ext.grid.GridView 46 3.9...

    ExtJs + api + 笔记 + 完整包

    EditorGrid则允许用户直接在表格单元格中编辑数据,适用于数据录入和管理的场景。 "22Viewport及window.doc"讨论了Viewport和Window组件。Viewport将整个浏览器视口作为容器,常用于全屏应用。Window则是一种浮动的...

    精通JS脚本之ExtJS框架.part2.rar

    6.4.4 Ext.query与Ext.select 6.5 应用模板 6.5.1 Ext.Template 6.5.2 Ext.XTemplate 第7章 设计表单类布局 7.1 Form表单简介 7.1.1 Form表单的基本配置 7.1.2 ExtJS对Form表单的封装 7.2 ExtJS的表单组件 ...

    ExtJs组件类的对应表

    11. **`editorgrid`** - `Ext.grid.EditorGridPanel`,可编辑的表格组件,允许用户直接在表格中编辑数据。 12. **`propertygrid`** - `Ext.grid.PropertyGrid`,属性表格组件,用于展示对象的属性。 13. **`...

    ExtJS3总结内容

    - `editorgrid`: `Ext.grid.EditorGridPanel` - `flash`: `Ext.FlashComponent` - `grid`: `Ext.grid.GridPanel` - `listview`: `Ext.ListView` - `panel`: `Ext.Panel` - `progress`: `Ext.ProgressBar` - `...

    extjs xtype

    10. `editorgrid` - `Ext.grid.EditorGridPanel`:可编辑的表格,允许用户直接在表格中修改数据。 11. `grid` - `Ext.grid.GridPanel`:标准的表格组件,用于展示数据。 12. `paging` - `Ext.PagingToolbar`:分页...

    ExtJs xtype一览

    - **`editorgrid` (Ext.grid.EditorGridPanel)**: 可编辑的表格组件,允许用户直接在表格内进行数据编辑。 - **`propertygrid` (Ext.grid.PropertyGrid)**: 属性表格组件,专门用于展示对象的属性。 - **`editor` ...

    extJs xtype 类型

    11. **`editorgrid`:** 可编辑的表格组件,允许用户直接在表格中编辑数据,通过`Ext.grid.EditorGridPanel`类实现。 12. **`propertygrid`:** 属性表格组件,用于展示对象的属性列表,通过`Ext.grid.PropertyGrid`...

Global site tag (gtag.js) - Google Analytics