浏览 4885 次
|
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
|
|
|---|---|
| 作者 | 正文 |
|
发表时间：2010-07-03
有网友问我怎么修改GridPanel#header的样式, 所以我就做了个例子
源码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ext.GridPanel Example</title>
<!-- ** CSS ** -->
<!-- base library -->
<link rel="stylesheet" type="text/css" href="../extjs/3.2.0/resources/css/ext-all.css" />
<!-- ** Javascript ** -->
<!-- ExtJS library: base/adapter -->
<script type="text/javascript" src="../extjs/3.2.0/adapter/ext/ext-base.js"></script>
<!-- ExtJS library: all widgets -->
<script type="text/javascript" src="../extjs/3.2.0/ext-all-debug.js"></script>
<!-- overrides to base library -->
<!-- page specific -->
<script type="text/javascript" src="gridpanel.js"></script>
<style type="text/css">
.x-grid-hcell-bgcolor {
background-image: url() !important;
background-color: red;
}
.x-grid-cell-bgcolor {
background-color: gray;
}
</style>
</head>
<body>
<h1>CExt.GridPanel Example</h1>
<div id="example-ct" style="margin: 50px 50px;"></div>
</body>
</html>
Ext.onReady(function() {
var bd = Ext.getBody();
var store = new Ext.data.ArrayStore({
fields: [{
name: 'value'
}, {
name: 'text'
}]
});
var data = [['1', 'One'], ['2', 'Two'], ['3', 'Three'], ['4', 'Four'], ['5', 'Five'], ['6', 'Six'], ['7', 'Seven'], ['8', 'Eight'], ['9', 'Nine'], ['10', 'Ten'], ['11', 'Eleven'], ['12', 'Twelve'], ['13', 'Thirteen'], ['14', 'Fourteen'], ['15', 'Fifteen'], ['16', 'Sixteen']];
store.loadData(data);
var enableHdMenu = false;
var panel = new Ext.grid.GridPanel({
renderTo: 'example-ct',
width: 500,
height: 300,
store: store,
columns: [{
header: 'ID',
dataIndex: 'value'
}, {
header: 'Name',
dataIndex: 'text'
}],
enableHdMenu: enableHdMenu,
viewConfig: {
templates: {
hcell : new Ext.Template(
'<td class="x-grid3-hd x-grid3-cell x-grid-hcell-bgcolor x-grid3-td-{id} {css}" style="{style}"><div {tooltip} {attr} class="x-grid3-hd-inner x-grid3-hd-{id}" unselectable="on" style="{istyle}">', enableHdMenu ? '<a class="x-grid3-hd-btn" href="#"></a>' : '',
'{value}<img class="x-grid3-sort-icon" src="', Ext.BLANK_IMAGE_URL, '" />',
'</div></td>'),
cell: new Ext.XTemplate(
'<td class="x-grid3-col x-grid3-cell {cellbgcolor:this.cellBackgroudColor} x-grid3-td-{id} {css}" style="{style}" tabIndex="0" {cellAttr}>',
'<div class="x-grid3-cell-inner x-grid3-col-{id}" unselectable="on" {attr}>{value}</div>',
'</td>', {
cellBackgroudColor: function() {
var o = arguments[1];
if (o.css.indexOf('x-grid3-cell-first') != -1) {
return 'x-grid-cell-bgcolor';
}
return '';
}
})
}
}
});
})
声明：ITeye文章版权属于作者，受法律保护。没有作者书面许可不得转载。
推荐链接
|
| 返回顶楼 | |
|
发表时间：2010-07-06
好好的一个东西被你修改成这样了，真是悲剧
|
| 返回顶楼 | |
|
发表时间：2010-07-07
joehe 写道 好好的一个东西被你修改成这样了，真是悲剧 呃, 只是做个例子, 教人怎么改Tpl.... |
| 返回顶楼 | |
|
发表时间：2010-07-07
今天在review GridView源码的时候, 发现getRowClass函数, 用来自定义列表行样式
之前因为看的是API, 这个函数直接让我给忽略了. 官方是这样注释的
/**
* Override this function to apply custom CSS classes to rows during rendering. You can also supply custom
* parameters to the row template for the current row to customize how it is rendered using the <b>rowParams</b>
* parameter. This function should return the CSS class name (or empty string '' for none) that will be added
* to the row's wrapping div. To apply multiple class names, simply return them space-delimited within the string
* (e.g., 'my-class another-class'). Example usage:
<pre><code>
viewConfig: {
forceFit: true,
showPreview: true, // custom property
enableRowBody: true, // required to create a second, full-width row to show expanded Record data
getRowClass: function(record, rowIndex, rp, ds){ // rp = rowParams
if(this.showPreview){
rp.body = '<p>'+record.data.excerpt+'</p>';
return 'x-grid3-row-expanded';
}
return 'x-grid3-row-collapsed';
}
},
</code></pre>
* @param {Record} record The {@link Ext.data.Record} corresponding to the current row.
* @param {Number} index The row index.
* @param {Object} rowParams A config object that is passed to the row template during rendering that allows
* customization of various aspects of a grid row.
* <p>If {@link #enableRowBody} is configured <b><tt></tt>true</b>, then the following properties may be set
* by this function, and will be used to render a full-width expansion row below each grid row:</p>
* <ul>
* <li><code>body</code> : String <div class="sub-desc">An HTML fragment to be used as the expansion row's body content (defaults to '').</div></li>
* <li><code>bodyStyle</code> : String <div class="sub-desc">A CSS style specification that will be applied to the expansion row's <tr> element. (defaults to '').</div></li>
* </ul>
* The following property will be passed in, and may be appended to:
* <ul>
* <li><code>tstyle</code> : String <div class="sub-desc">A CSS style specification that willl be applied to the <table> element which encapsulates
* both the standard grid row, and any expansion row.</div></li>
* </ul>
* @param {Store} store The {@link Ext.data.Store} this grid is bound to
* @method getRowClass
* @return {String} a CSS class name to add to the row.
*/
|
| 返回顶楼 | |
