ExtJS4.2 Grid嵌套实例

ExtJS4.2 Grid嵌套实例的相关文章

ExtJS4.2实例：表格Grid嵌套(内部Grid)-MVC模式

前文ExtJS4.2 Grid嵌套实例中讲解了如何在表格Grid中嵌套Grid,即外部Grid中每行分别展现为不同的内部Grid,比如常见的费用报销业务,费用类别有往返车费和住宿费,其中往返车费需要填写往返类型.交通工具.费用日期.出发地.目的地和金额,住宿费只需填写入住日期.离开日期.单价和金额,在一个表格中包含多种费用类别,每个费用类别下又有多条明细,所需实现的业务场景图片如: 在线演示  /  示例代码 由于前文未采用MVC模式来组织代码,代码可读性不强,本文将在前文基础上按照MVC模式来

ExtJS4.2 Grid知识点七：显示行号、斑马线效果（奇偶行背景色不一致）、复制单元格文字、禁止点击列排序

本节主要学习ExtJS4.2 Grid显示行号.斑马线效果(奇偶行背景色不一致).复制单元格文字.禁止点击列排序.禁止列头部右侧菜单,示例图片: 在线演示  /  在线演示 主要内容如下: 显示行号 斑马线效果(奇偶行背景颜色不一致) 复制单元格问题 禁止点击列排序 禁止列头部右侧菜单 1.显示行号 在Grid中增加行号列,xtype指定为rownumberer. {header: 'NO',xtype: 'rownumberer',width: 40,sortable: false} 2.斑马

ExtJS4.2 Grid行编辑、新增行及删除行

本节主要学习ExtJS4.2 Grid行编辑.新增行及删除行,示例图片: 在线演示  /  在线演示 主要内容如下: 行编辑模式 新增行 删除行 1.行编辑模式 在Grid中定义中配置插件Ext.grid.plugin.RowEditing,点击单元格时即启动行编辑模式,见上图. var rowEditing = Ext.create('Ext.grid.plugin.RowEditing', {     clicksToMoveEditor: 1,     autoCancel: false

ExtJS4.2 Grid知识点五：多选行（可以点击行选中记录与只能点击多选框选中记录）

本节主要学习ExtJS4.2 Grid多选行知识,示例图片: 在线演示  /  示例代码 主要内容如下: 可以点击行选中记录与只能点击多选框选中记录 选中Grid中数据加载到Form 获取Grid中多行数据,生成JSON格式 1.可以点击行来选中记录,此时多选Grid只需要配置selType: 'checkboxmodel',此时有一个缺陷,当你通过多选框勾选多条记录时,如果不小心点击某行,则当前点击行被选中,其它选中的记录行都被取消选择了. 2.只能点击多选框选中记录,此时多选Grid需要配置

ExtJS4.2 Grid 分页栏 搜索

function SearchCondition(){ this.startTime = ""; this.endTime = ""; this.targetInfo = ""; this.logType = ""; this.manager = ""; this.reset = function(){ this.startTime = ""; this.endTime = "

ExtJS4.2 Grid知识点六：自动选中指定记录、自动选中全部记录、反向选择

本节主要学习ExtJS4.2 Grid自动选中指定记录.自动选中全部记录.反向选择,即在表格Grid加载数据后自动将符合条件的记录行选中,示例图片: 示例代码  /  在线演示 本例是通过监听Grid的afterrender事件来实现自动选择指定记录行,代码如下实现自动选中性别为男性的记录行: 自动选中指定记录代码 'userlist': {     afterrender: function(testGrid){//侦听goodslistview渲染           // 选中所有记录  

Bootstrap 网格系统(Grid System)实例1

Bootstrap 网格系统(Grid System)实例:堆叠水平 <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>Bootstrap历练作品: 堆叠水平</title> <meta charset="utf-8"

ExtJS4.2 Grid知识点三：改变表格Grid单元格背景颜色

在ExtJS4.2 Grid知识点一:改变表格Grid单元格文字颜色一文中讲解了如何改变单元格中文字颜色,接下来在本章学习如何改变Grid中单元格的背景颜色,显示结果如图片: 在线演示  /  示例代码 实现方式同样是为Grid中该列自定义renderer函数,查询ExtJS 4.2 API得知,Ext.grid.column.Column的renderer属性可以是一个函数也可以是字符串,这个知识点是通过函数来实现的.函数参数列表如下: value : 当前待渲染的单元格值,即表格中某行某列的

ExtJS4.2 Grid知识点四：改变表格Grid行文字颜色,划过Grid行时文字变粗

在ExtJS4.2 Grid知识点一:改变表格Grid单元格文字颜色一文中讲解了如何改变单元格中文字颜色,接下来在本章学习如何改变Grid中整行文字的颜色,这样就不需要为每列单独定义renderer函数,显示结果如图片: 在线演示  /  示例代码 实现方式是在Grid中设置viewConfig属性的getRowClass函数,函数参数列表如下: record: 当前待渲染行数据Model,类型为:Ext.data.Model rowIndex: 当前待渲染行数,类型为:Number rowPa