extJs 4网格自定义-末尾的总行
extJs 4 grid customization - Total row at the end
我想要一个只有两列的网格,一列用于名称,另一列用于百分比。最后一行的名称为"Total",总百分比为"percentage"。仅此行的样式与其他行不同。请指导我如何做到这一点。谢谢
有一个网格功能可以实现这一点。文档中的此处介绍了它,并提供了一些如何使用它的示例。
您还可以通过在css中提供自己的x-grid-row-summary
类实现来自定义样式。
编辑
这里有一些设置摘要行样式的例子,正如你所看到的,有几种方法可以实现它。要意识到,在viewready
事件发生之前,摘要行不能被引用,它在afterrender
事件时还没有准备好,所以我把所有这些逻辑都放在viewready
监听器中:
Ext.create('Ext.grid.Panel', {
features: [{
ftype: 'summary'
}],
// other grid configs ...
listeners: {
viewready: function(grid) {
// get reference to the summary row
var summaryRow = grid.view.el.down('tr.x-grid-row-summary');
// this will apply a css class to the row, in this example,
// I am applying the extjs grid header style to my summary row
summaryRow.addCls('x-grid-header-ct');
// or, to do it all in javascript as you mentioned in the comment
// first you would create a style object, I took these style
// properties from the .x-grid-header-ct
aStyleObject = {
cursor: 'default',
zoom: 1,
padding: 0,
border: '1px solid #d0d0d0',
'border-bottom-color': '#c5c5c5',
'background-image': 'none',
'background-color': '#c5c5c5'
}
// then you pass the style object using setStyle
summaryRow.setStyle(aStyleObject);
// or you could set the style for each cell individually using
// addCls or setStyle:
Ext.Array.each(summaryRow.query('td'), function(td) {
var cell = Ext.get(td);
cell.addCls('some-class');
// or
cell.setStyle(anotherStyleObject);
});
}
}
});
如果我们有摘要行(像这样),我们可以在特定页面上使用CSS。
<style>
.x-grid-row-summary .x-grid-cell{
background-color: #f00 !important;
font-size: x-large !important;
}
相关文章:
- ui网格:在自定义表头模板中触发排序
- Kendo UI网格自定义编辑按钮
- Kendo UI网格自定义验证消息
- 具有层次结构的网格自定义命令正在调用 javascript 函数两次
- 在剑道网格自定义弹出模板中设置默认值的任意方法
- 剑道网格自定义编辑器下拉列表;t反映选择
- extJs 4网格自定义-末尾的总行
- 具有多选列的剑道网格自定义过滤功能
- 剑道网格自定义排序
- 剑道网格自定义列
- 如何在剑道网格自定义命令文本中添加特殊字符(i.查看/编辑)
- Telerik MVC网格-自定义过滤(客户端)
- 剑道网格自定义按钮调用Javascript函数
- 光滑网格自定义单元格标题
- KendoUI网格自定义过滤器UI
- 剑道 UI 网格自定义数据源 URL
- 剑道 UI 网格自定义命令重定向
- 剑道网格自定义过滤器菜单不工作
- 在复选框上使用数据绑定的剑道UI网格自定义过滤器
- 可能绑定剑道ui网格自定义下拉到一个id而不是一个对象