`
zhangdaiping
  • 浏览: 129857 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

改变Ext.gird.GridPanel#Header样式的小例子

EXTCSSJavaScriptXHTMLHTML 
阅读更多
有网友问我怎么修改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 '';
						}
					})
			}
        }
    });
})
分享到：
| TreeNodeChecked v1.2.1 - Ext Tree级联选 ...
评论
3 楼 zhangdaiping 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 = '&lt;p>'+record.data.excerpt+'&lt;/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 &lt;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 &lt;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.
     */
2 楼 zhangdaiping 2010-07-07  
joehe 写道
好好的一个东西被你修改成这样了，真是悲剧

呃, 只是做个例子, 教人怎么改Tpl....
1 楼 joehe 2010-07-06  
好好的一个东西被你修改成这样了，真是悲剧
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics