javascript – extJs 4网格自定义 – 结尾的总行数

前端之家收集整理的这篇文章主要介绍了javascript – extJs 4网格自定义 – 结尾的总行数前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我想要一个只有两列的网格,一个用于名称,另一个用于百分比.最后一行将以“总计”作为名称,总百分比将为“百分比”.此行的样式与其他行的样式不同.请指导我如何实现这一目标.
谢谢..

解决方法

有一个网格功能来完成这一点.它在文档中涵盖了 here,其中包含一些如何使用它的示例.

您还可以通过在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);
            });
        }
    }
});

猜你在找的JavaScript相关文章