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

有网友问我怎么修改GridPanel#header的样式, 所以我就做了个例子

改变Ext.gird.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 '';
						}
					})
			}
        }
    });
})

你可能感兴趣的:(JavaScript,html,css,XHTML,ext)