colMap: { id : 'invoiceListForDetail',
columns: [
{header: "票据ID", dataIndex: 'tobaccoBizAuditId', hidden: true},
{header: "发票编号", dataIndex: 'invoiceNo'},
{header: "开单时间", dataIndex: 'invoicingDate'},
{header: "重量", dataIndex: 'weight'},
{header: "金额", dataIndex: 'amount'},
{header: "审核状态", dataIndex: 'auditIsSucc', renderer: auditStateRender}
]
}
定义renderer 方法
var auditStateRender = function(value){
if (value == "0")
return "未审核";
else
return "已审核";
}
在Ext在调用renderer 方法时, 会向该方法传递以下参数:
ext api doc :
value : Object
单元格的数据值。The data value for the cell.
metadata : Object
单元格元数据(Cell metadata)对象。你也可以设置下列的属性:
css : String
单元格CSS样式字符串,作用在td元素上。
attr : String
一段HTML属性的字符串,将作用于表格单元格内的数据容器元素(如'style="color:red;"')。
record : Ext.data.record
从数据中提取的Ext.data.Record。
rowIndex : Number
行索引。Row index
colIndex : Number
列索引。Column index
store : Ext.data.Store
从Record中提取的Ext.data.Store对象。The Ext.data.Store object from which the Record was extracted.
在renderer方法中返回(return)的处理结果便是最终被显示在列上的数据.
分享到:
相关推荐
在 `PersonListGridPanel` 示例中,我们创建了一个新的 `GridPanel` 组件,它包含了自定义的配置项,如渲染位置、大小、标题栏按钮以及列设置等。`constructor` 函数接收一个URL参数,但在这个示例中并未使用。通常...
renderTo: Ext.getBody() // 渲染到页面的body元素 }); ``` 此外,EXTJS的GridPanel还支持许多高级特性,例如: - **行编辑**: 可以通过添加RowEditor插件实现单元格级别的编辑。 - **分页**: 使用PagingToolbar...
2. Ext.grid.EditorGridPanel:EditorGridPanel是Ext JS中的一种网格组件,它扩展了GridPanel,增加了单元格级别的编辑功能。用户可以直接在表格中修改数据,而无需跳转到单独的编辑页面。 二、核心特性 1. 可编辑...
在描述中提到,Ext2.0的Grid控件不仅美观,还支持多种数据格式,如二维数组、JSON和XML,甚至允许自定义数据类型。 Grid的核心组成部分包括ColumnModel(列模型)和Store(数据存储)。ColumnModel定义了表格的结构...
例如,`Ext.grid.GridPanel` 是一个常用的组件,用于显示数据网格,而`Ext.tree.TreePanel`则用于展示层次结构的数据。 工具类是Ext JS中的另一个重要部分,它们提供了各种实用函数,如DOM操作、动画效果、事件处理...
EXT时间控件可以轻松与其他EXT组件(如GridPanel、FormPanel等)集成,用于数据表单的输入或展示。同时,EXT支持Ajax和服务器端的数据交互,因此DateTimeField也能方便地配合服务器端进行数据验证和存储。 6. **...
4. **创建Grid Panel**:最后,使用上述配置创建GridPanel,指定渲染位置、数据存储、列模型和高度等属性: ```javascript var grid = new Ext.grid.GridPanel({ renderTo: "grid", store: ds, height: 600, ...
Ext2.0是一个JavaScript库,它提供了强大的数据展示能力,支持多种数据格式,如二维数组、JSON、XML,以及自定义数据类型。关键在于Ext.data.Store,它作为中间层,将各种格式的数据转化为Grid可以处理的形式。 ...
- 当 `ComboBox` 的下拉列表需要展示复杂数据结构时,如多列或带有自定义样式的数据,可以使用 `GridComboBox`。 - `GridComboBox` 可以设置为单选或多选模式,根据业务需求选择合适的交互方式。 4. **配置与实现...
var grid = new Ext.grid.GridPanel({ store: store, cm: cm, renderTo: Ext.getBody() // 渲染到body元素 }); ``` 最后,通过调用`grid.render()`方法或直接指定渲染位置(如`renderTo: Ext.getBody()`)将Grid...
综上所述,通过利用ExtJS的GridPanel、Store、CellEditing插件以及自定义的JavaScript逻辑,我们可以构建出一个类似于Excel的交互式表格。尽管它无法完全替代Excel的强大功能,但对于Web应用程序来说,这样的实现...
4. **RenderTo**: `'tagModelManager_tagModelDiv'` - 指定`GridPanel`将渲染到哪个DOM元素。 5. **LoadMask**: `{msg: '正在加载数据,请稍候....'}` - 当数据加载时,显示一个遮罩提示用户数据正在加载。 6. **...
这里,`Ext.extend()`用于扩展`Ext.Panel`类,并添加自定义配置。然后通过`new`关键字创建实例。 2. 配置项(Configurations): EXTJS允许通过配置项来定制对象。在上面的例子中,`title`、`width`和`height`就是...
renderTo: Ext.getBody() }); } }); ``` 2. **使用Chained Combo实现多选** 另一种实现多选下拉框的方法是使用Chained ComboBox。这种组件允许从一个主下拉框中选择多个项目,然后将这些项目显示在一个子下拉框...
五、自定义消息框 24 六、进度条对话框 25 七、让消息框飞出来 26 八、小结 27 第五章:页面与脚本完全分离 28 一、Extjs是脚本的世界 28 二、Ext.onReady事件 28 三、来自Extjs的问候 29 四、让界面动起来 29 五、...
19. **Ext.grid.EditorGridPanel** 是可编辑的GridPanel,通过在`ColumnModel`中为列添加编辑器(如`TextField`)实现数据的编辑,对于日期数据可能需要使用特定的编辑器如`DateField`。 EXTJS的灵活性和强大功能使...
它可以配置`renderTo`属性来决定渲染的位置,`frame`属性用来添加边框,以及其他如列定义、数据源等配置。 EXTJS的强大之处在于它的组件化和可配置性,通过组合不同的组件和设置,可以构建出功能丰富的应用程序。在...
`renderTo`指定了渲染的容器ID,`enableTabScroll`开启滚动条,`autoTabs`自动创建Tab,`deferredRender`控制渲染时机,`activeTab`设定初始选中项,`animScroll`启用动画滚动,`layoutOnTabChange`在切换Tab时重新...