文档章节

样式化ExtJS Grid Cells

Alex_曰生
 Alex_曰生
发布于 2014/11/19 11:05
字数 1687
阅读 18
收藏 0

Default Grid Styling

Let's start by taking a look at the default styling for a grid using the blue theme:

Name
Age
Sex
Timothy
34
M
Susan
67
F
Elizabeth
12
F
Richard
27
M
Simon
8
M
Roger
10
M
Barry
7
M
Margaret
52
F
Kerry
93
F

Some key styling features to note include:

  • Rows alternate between white and light grey. It's intended to be subtle but it varies a lot between monitors so you may find it difficult to see.
  • There is a light grey dividing line between each row. There isn't an equivalent vertical line between columns.
  • Moving the mouse cursor over the rows adds a grey highlight. The top and bottom border of the row also darkens when highlighted.
  • Selecting a row adds a light blue background and a dotted blue border.

For reference, the code for this grid looks like this:

Ext.create('Ext.grid.Panel', { 
    height: 230, 
    width: 300, 
    columns: [ 
        {dataIndex: 'name', flex: 1, text: 'Name'}, 
        {dataIndex: 'age', flex: 1, text: 'Age'}, 
        {dataIndex: 'sex', flex: 1, text: 'Sex'} 
    ], 
    store: { 
        fields: ['name''age''sex'], 
        ... 
    } 
});

The Grid Markup

Most grid styling is done using CSS. To understand the CSS it's necessary to be familiar with the HTML markup of a grid. Below is a simplified version of that markup. At its heart it's really just an HTML table. It's worth taking a moment to familiarize yourself with this markup if you haven't studied it before. You can refer back to it later when we start looking at the CSS rules.

<div class="x-panel x-grid"> 
    <!-- The column headers --> 
    <div class="x-grid-header-ct">...</div> 
 
    <!-- The panel body --> 
    <div class="x-panel-body x-grid-body"> 
        <!-- The grid view --> 
        <div class="x-grid-view"> 
            <table class="x-grid-table"> 
                <tbody> 
                    <!-- A dummy row used to resize columns --> 
                    <tr class="x-grid-header-row">...</tr> 
 
                    <!-- The first grid row --> 
                    <tr class="x-grid-row"> 
                        <td class="x-grid-cell x-grid-cell-first"> 
                            <div class="x-grid-cell-inner">Timothy</div> 
                        </td> 
                        <td class="x-grid-cell"> 
                            <div class="x-grid-cell-inner">34</div> 
                        </td> 
                        <td class="x-grid-cell x-grid-cell-last"> 
                            <div class="x-grid-cell-inner">M</div> 
                        </td> 
                    </tr> 
 
                    <!-- The second grid row --> 
                    <tr class="x-grid-row x-grid-row-alt"> 
                        ... 
                    </tr> 
 
                    ... 
                </tbody> 
            </table> 
        </div> 
    </div>  </div>

There are a few CSS classes that are particularly worthy of note in this markup:

  • x-grid-row – Applied to the 
    <tr>
     element for each row of the grid.
  • x-grid-row-alt – Applied to the 
    <tr>
     element for alternate rows of the grid.
  • x-grid-cell – Applied to the 
    <td>
     element for each cell.
  • x-grid-cell-first – Applied to the 
    <td>
     element for the first cell in each row.
  • x-grid-cell-last – Applied to the 
    <td>
     element for the last cell in each row.

Column Lines

One simple change that can be made without any custom CSS is to add vertical lines between the columns. This just needs the setting columnLines to be set to true.

Name
Age
Sex
Timothy
34
M
Susan
67
F
Elizabeth
12
F
Richard
27
M
Simon
8
M
Roger
10
M
Barry
7
M
Margaret
52
F
Kerry
93
F
Ext.create('Ext.grid.Panel', { 
    columnLines: true, 
    ... 
});

This setting adds a handful of CSS classes to the outermost <div> element of the grid. The most important of these is x-panel-with-col-lines, which has an accompanying rule in the default stylesheet to put a grey border down the right-hand side of each grid cell.

Styling All Grid Cells

Name
Age
Sex
Timothy
34
M
Susan
67
F
Elizabeth
12
F
Richard
27
M
Simon
8
M
Roger
10
M
Barry
7
M
Margaret
52
F
Kerry
93
F
Ext.create('Ext.grid.Panel', { 
    cls: 'custom-grid', 
    ... 
});

The setting cls is common to all ExtJS components. It adds a CSS class to the main element for the component. In this case it will put the classcustom-grid on the outermost <div> element.

Making the grid cells appear yellow needs some CSS like this:

.custom-grid .x-grid-cell { 
    background-color#ffa; 
    border-bottom-color#ffc; 
    border-top-color#ff5; 
    color#009; 
}

This page is using the 'scoped' ExtJS CSS file. This requires all of the selectors shown in these examples to be prefixed with the class x-reset. This has been omitted from the code samples as it isn't usually required.

The selector for this rule will match all the <td> cells for this grid. Notice how the styling is applied to the cells rather than the rows. A common mistake is to try to change the background-color for the <tr> element rather than the <td>. This doesn't work because the cells have their own background-color, which completely hides the row.

A little more CSS is needed to handle mouse-over and selection. In both cases the grid automatically adds a CSS class to the <tr> element that we can use to style the cells in those rows.

/* Grid cells when the mouse cursor is over the row */  .custom-grid .x-grid-row-over .x-grid-cell { 
    background-color#ff6; 
    border-bottom-color#999; 
    border-bottom-styledashed; 
    border-top-color#999; 
    border-top-styledashed; 
} 
  /* Grid cells in the selected row */  .custom-grid .x-grid-row-selected .x-grid-cell { 
    background-color#ff0 !important; 
    border-bottom-color#999; 
    border-bottom-stylesolid; 
    border-top-color#999; 
    border-top-stylesolid; 
}

One last thing to note here is the use of the !important flag in the code above. Generally this should be avoided but it can't be helped here because it's overriding a rule in the default ExtJS CSS that also uses this flag.

Alternate Rows

As we've already seen, alternate rows of a grid have the class x-grid-row-alt. This makes it easy to do simple striping effects.

Name
Age
Sex
Timothy
34
M
Susan
67
F
Elizabeth
12
F
Richard
27
M
Simon
8
M
Roger
10
M
Barry
7
M
Margaret
52
F
Kerry
93
F
Ext.create('Ext.grid.Panel', { 
    cls: 'extra-alt', 
    ... 
});
.extra-alt .x-grid-row .x-grid-cell { 
    background-color#fff; 
    color#000; 
} 
  .extra-alt .x-grid-row-alt .x-grid-cell { 
    background-color#000; 
    color#fff; 
}

If you don't want to take advantage of row striping then you can disable it like this:

Ext.create('Ext.grid.Panel', { 
    ... 
    viewConfig: { 
        stripeRows: false 
    } 
}

Adding the class x-grid-row-alt to alternate rows incurs a performance penalty. Every time the row order changes the grid needs to go through all of its rows and update the CSS classes. If you aren't styling alternate rows differently from each other then you should claim back that performance by turning off row striping. The earlier example of turning all the rows yellow would be a suitable candidate for this.

Styling Rows

In many cases the styling for a row is dependent on the data for that row. That data is represented by a record in the store. We can add a CSS class to the <tr> element based on the record using the config option getRowClass:

Name
Age
Sex
Timothy
34
M
Susan
67
F
Elizabeth
12
F
Richard
27
M
Simon
8
M
Roger
10
M
Barry
7
M
Margaret
52
F
Kerry
93
F
Ext.create('Ext.grid.Panel', { 
    ... 
    viewConfig: { 
        stripeRows: false, 
        getRowClass: function(record) { 
            return record.get('age') < 18 ? 'child-row' : 'adult-row'; 
        } 
    } 
});
.child-row .x-grid-cell { 
    background-color#ffe2e2; 
    color#900; 
} 
  .adult-row .x-grid-cell { 
    background-color#e2ffe2; 
    color#090; 
}

Recall that the class x-grid-cell is on the <td> elements for each cell of the row.

Static Column Styling

The simplest way to style a column is to add a CSS class to every <td> element in that column. The column config setting tdCls does just that.

Name
Age
Sex
Timothy
34
M
Susan
67
F
Elizabeth
12
F
Richard
27
M
Simon
8
M
Roger
10
M
Barry
7
M
Margaret
52
F
Kerry
93
F
Ext.create('Ext.grid.Panel', { 
    ... 
    columns: [ 
        {...}, 
        {dataIndex: 'age', flex: 1, text: 'Age', tdCls: 'custom-column'}, 
        {...} 
    ], 
    ... 
});
.x-grid-row .custom-column { 
    background-color#ecf; 
    color#090; 
    font-weightbold; 
}

In the CSS selector above note that x-grid-row is on the <tr> element and custom-column is on the <td> element.

First and Last Column

As we've already seen, the cells in the first and last columns of a grid have special CSS classes on them. These can be used to style the cells in those columns. The key difference between this and a tdCls is that the tdCls follows its column when the columns are reordered. If you try reordering the columns in this example you'll see that the styling does not follow the column.

Name
Age
Sex
Timothy
34
M
Susan
67
F
Elizabeth
12
F
Richard
27
M
Simon
8
M
Roger
10
M
Barry
7
M
Margaret
52
F
Kerry
93
F
Ext.create('Ext.grid.Panel', { 
    cls: 'custom-first-last', 
    ... 
});
.custom-first-last .x-grid-row-selected .x-grid-cell-first { 
    background-imageurl(/static/lib/silk/bullet_go.png); 
    background-repeatno-repeat; 
    padding-left12px; 
} 
  .custom-first-last .x-grid-row-selected .x-grid-cell-last { 
    background-imageurl(/static/lib/silk/user_green.png); 
    background-positionright; 
    background-repeatno-repeat; 
}

Dynamic Column Styling

Often the styling for a column will vary row by row. A column renderer allows the tdCls to be set individually for each cell.

Name
Age
Sex
Timothy
34
Male
Susan
67
Female
Elizabeth
12
Female
Richard
27
Male
Simon
8
Male
Roger
10
Male
Barry
7
Male
Margaret
52
Female
Kerry
93
Female
Ext.create('Ext.grid.Panel', { 
    ... 
    columns: [ 
        {...}, 
        {...}, 
        { 
            dataIndex: 'sex', 
            flex: 1, 
            text: 'Sex', 
            renderer: function(value, meta) { 
                if (value === 'M') { 
                    meta.tdCls = 'male-cell'; 
                    return 'Male'; 
                } 
 
                meta.tdCls = 'female-cell'; 
                return 'Female'; 
            } 
        } 
    ], 
    ... 
});
.male-cell { 
    backgroundurl(/static/lib/silk/user.png) no-repeat 2px 1px; 
    padding-left16px; 
} 
  .female-cell { 
    backgroundurl(/static/lib/silk/user_female.png) no-repeat 2px 1px; 
    padding-left16px; 
}

While it isn't shown in this example, the third argument passed to the renderer function is the record for the row, which allows the tdCls to be derived from other fields if necessary.

Styling Dirty Fields

By default, a dirty field is marked with a red triangle in the top-left corner of the corresponding cell. As you might expect, this is achieved by adding a CSS class to the <td> element. The triangle itself is rendered using a background image. Customizing it just needs a bit of CSS.

Name
Age
Sex
Timothy
17
M
Sue
67
F
Elizabeth
12
F
Rick
29
M
Simon
8
M
Roger
10
M
Sally
7
F
Margaret
51
F
Kerry
93
F
Name
Age
Sex
Timothy
17
M
Sue
67
F
Elizabeth
12
F
Rick
29
M
Simon
8
M
Roger
10
M
Sally
7
F
Margaret
51
F
Kerry
93
F
Ext.create('Ext.grid.Panel', { 
    cls: 'custom-dirty', 
    ... 
});
.custom-dirty .x-grid-dirty-cell { 
    background-color#ffa; 
    background-imageurl(/static/lib/silk/bullet_red.png); 
    background-positionright center; 
    color#090; 
}
-----

本文转载自:http://skirtlesden.com/articles/styling-extjs-grid-cells

下一篇: 许愿墙 struts2
Alex_曰生
粉丝 3
博文 25
码字总数 3592
作品 0
深圳
程序员
私信 提问
有关ExtJsgrid的操作大全

1、Ext.grid.GridPanel 主要配置项: store:表格的数据集 columns:表格列模式的配置数组,可自动创建ColumnModel列模式 autoExpandColumn:自动充满表格未用空间的列,参数为列id,该id不能...

hengliang_的博客
2017/12/14
0
0
JSP上传文件与导出Excel表

班级编号:VIP14 学员名字:端碗吹水 课程名称:JSP上传文件与导出Excel表 上课时间:2017-12-23 JSP上传文件 我们可以通过Apache的fileupload组件来实现jsp上传文件,这样就不需要自己去写具...

ZeroOne01
2017/12/24
0
0
ASP.NET中服务器控件Table动态生成表格及其属性介绍

ASP.NET中服务器控件Table动态生成表格 Table tb = new Table(); int row = 3; // 行数 int col = 4; // 列数 for(int i=0;i...

长平狐
2013/01/06
4.5K
0
C# 如何在PDF文档中创建表格

表格能够直观的传达数据信息,使信息显得条理化,便于阅读同时也利于管理。那在PDF类型的文档中如何来添加表格并且对表格进行格式化操作呢?使用常规方法直接在PDF中添加表格行不通,那我们可...

E_iceblue
2017/12/27
0
0
aspose.cells示例及文档

网上找了很多,大都是小例子,价值不高。于是去github上搜了下,找到 https://github.com/asposecells/AsposeCellsNET 这是官方的示例库,从Readme中,也找到文档地址。 http://www.aspose....

noonoo
2016/01/21
713
0

没有更多内容

加载失败,请刷新页面

加载更多

typescript 接口 函数类型 可索引类型

函数类型 可索引类型 数字索引签名 字符串索引签名 数字索引签名返回值 必须是 字符串索引签名返回值的子集 只读索引签名

lilugirl
今天
3
0
Oracle SQL语法实例合集

如需转载请注明出处https://my.oschina.net/feistel/blog/3052024 目的:迅速激活Oracle SQL 参考:《Oracle从入门到精通》 ------------------------------------------------------------......

LoSingSang
今天
2
0
增加 PostgreSQL 服务进程的最大打开文件数

https://serverfault.com/questions/628610/increasing-nproc-for-processes-launched-by-systemd-on-centos-7 要在systemd的配置里加才行...

helloclia
今天
2
0
组合模式在商品分类列表中的应用

在所有的树形结构中最适合的设计模式就是组合模式,我们看看常用商品分类中如何使用。 先定义一个树形结构的商品接口 public interface TreeProduct { List<TreeProduct> allProducts(...

算法之名
今天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部