有时候根据查询出来的结果,比如年龄,或年假天数,变态的用户要求根据不同的数值显示不同的颜色,比如:年龄>30 是红色,年龄<30 显示绿色
自定义函数 render 来实现
部门代码如下:
//根据条件用来转换年龄的字体颜色
function pctChange(val){
if(val <=30){
return '<span style="color:green;">' + val + '</span>';
}else if(val > 30){
return '<span style="color:red;">' + val + '</span>';
}
return val;
}
var cm = new Ext.grid.ColumnModel([
new Ext.grid.RowNumberer({header : '',width : 30,}),
{header:'员工姓名',dataIndex:'empName',sortable:false,width:230},
{header:'职位名称',dataIndex:'positionName',sortable:false,width:240},
{header:'职位分类',dataIndex:'positionClassName',sortable:false,width:230},
{header:'职位说明书',dataIndex:'positionClassNumber',sortable:false,width:180},
{header:'年龄',dataIndex:'age',sortable:false,width:70,renderer:pctChange,//设置年龄显示的颜色
} ]);
分享到:
相关推荐
Ext.grid.EditorGridPanel是Ext JS库中的一个组件,主要用于创建具有可编辑单元格的表格。这个组件在数据展示和编辑方面提供了丰富的功能,是构建数据密集型应用的理想选择。下面将详细阐述其特点、工作原理及如何...
### Ext grid panel 滚动条位置不变 在前端开发领域,特别是在使用Ext JS框架时,保持滚动条位置不变是一个非常实用的功能。特别是在处理实时数据更新的场景下,这一功能可以确保用户在数据刷新后仍然停留在之前...
在这个"Ext Grid简单实例"中,我们将探讨如何从Web服务提取数据并将其在Grid中显示。 首先,让我们了解基本的Ext Grid组成部分: 1. **Store**: Store是数据存储的地方,它可以连接到不同的数据源,如JSON、XML或...
`Ext自定义Grid Cell插件`是为了满足这种需求而设计的,它扩展了`Ext Grid`的基本功能,允许开发者在每个单元格内插入自定义的控件。通过这种方式,我们可以为每个单元格提供特定的行为,比如添加按钮触发特定操作,...
8.4.1 组件管理及查询:ext.componentmanager与ext.componentquery / 423 8.4.2 焦点管理:ext.focusmanager / 424 8.4.3 z-order管理:ext.zindexmanager与ext.windowmanager / 425 8.4.4 状态管理:ext.state....
在EXT JS中,自定义控件是通过继承EXT的基础组件并对其进行扩展来实现的。这允许开发者创建符合特定需求的个性化组件,同时充分利用EXT提供的强大功能。以下将详细讲解两种常见的自定义EXT控件的方法: 1. **重载 `...
EXT Grid是一款基于JavaScript的强大的...在实际开发中,EXT Grid导出Excel的功能可以根据项目需求进行定制,例如添加自定义样式、合并单元格、设置条件格式等。理解上述步骤后,你可以根据具体需求进行扩展和优化。
例如,我们可以通过设置`dataIndex`指定数据源字段,使用`renderer`函数来自定义单元格的显示,甚至为特定列添加自定义的点击事件。 2. **行编辑**:为了实现增删改查的功能,我们可以集成ExtJS的行编辑插件(`Ext....
Ext TreeGrid是一款在Ext JS框架下开发的组件,它结合了Tree和Grid的优点,提供了一种既能展示层次结构数据又能进行表格样式的显示和操作的视图。在Ext JS库中,Tree通常用于展现层级关系的数据,而Grid则用于显示二...
在Ext JS这个强大的JavaScript框架中,开发人员经常需要创建数据展示组件,比如Grid,来显示大量数据并提供交互性。Grid List是Grid的一种扩展,它不仅具有基本的表格功能,还可以进行更复杂的操作。本教程将详细...
在本教程中,我们将深入探讨如何实现"EXT grid中根据每一行的状态列内容来让当前行显示不同的背景颜色"。 首先,我们需要理解EXT Grid的基本结构。EXT Grid由多个组件组成,包括Store(数据存储)、Model(数据模型...
ExtJS Grid是一个强大的数据展示组件,它允许用户以表格的形式查看和操作大量数据。在实际应用中,数据过滤是常见的需求,以便用户能快速定位到感兴趣的信息。本篇将深入探讨ExtJS Grid的过滤操作,以及如何动态地对...
**Grid** 和 **ComboBox** 等组件都是基于Ext.data进行数据操作的。它们利用这些核心组件来实现诸如异步加载、类型转换、分页等功能。 #### 二、数据格式和支持 Ext.data支持多种数据格式,包括但不限于: - **...
在软件开发中,特别是在构建用户界面时,ExtJS是一个常用且强大的JavaScript库,它提供了丰富的组件,例如Ext.grid,用于创建交互式的表格视图。在处理Ext.grid时,理解其属性、方法和事件是至关重要的。以下是对...
### EXT支持GRID中文排序 #### 知识点详解 在前端开发中,特别是涉及到表格数据展示的应用场景下,对表格中的数据进行排序是一项常见的需求。对于包含中文字符的数据集而言,实现准确、高效的中文排序尤为关键。...
这个"extjs动态表头"的资源很可能是一个插件或组件,名为`Ext.ux.grid.DynamicGridPanel.js`,它扩展了ExtJS的标准GridPanel,增加了动态调整列的能力。 动态表头的核心功能包括: 1. **实时编辑**:用户可以在...
要实现全选和去全选,我们需要自定义一些方法并绑定到相应的事件上。 首先,我们需要创建一个带有多选功能的下拉列表。这可以通过以下配置实现: ```javascript var comboBox = Ext.create('Ext.form.field....
根据给定的信息,我们可以推断出这是一篇关于如何使用 Ext JS 框架中的 Grid 组件的文章。Ext JS 是一款基于 JavaScript 的前端框架,它提供了丰富的用户界面组件,包括表格(Grid)。以下是对该文章内容的详细解读...
5. **样式和格式处理**:EXT Grid中的数据显示有各种样式,如颜色、字体等。如果需要保留这些样式,可以使用XLSX.js的`cellStyles`选项。但是,这需要更复杂的处理,因为Excel的样式系统与EXT Grid的样式不完全相同...