extjs grid 的header可以动态设置吗?

Question

[code="java"]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({
    title:'grid-style',
    closable:true,
    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 '';  
                    }  
                })  
        }  
    }  
});  [/code]

以上的代码可以设置表头的颜色了，如果我想要实现点击一个按钮让它变为默认的设置，再点击一次又设置成代码中的样式，应该怎么做呢？

Answer 1

[code="java"]
function setActiveStyleSheet(title) {
var i,
a,
links = document.getElementsByTagName("link"),
len = links.length;
for (i = 0; i < len; i++) {
a = links[i];
if (a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title")) {
a.disabled = true;
if (a.getAttribute("title") == title) a.disabled = false;
}
}
}
[/code]
这是extjs主题切换里面的实现，其实它只是在html总加载了多个样式，然后通过样式上的“disabled”属性来控制哪一个有效，你也可以这样。