vishare
vishare
2011-08-08 16:26

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

已采纳

[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]

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

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享
  • 邀请回答

3条回答

  • myali88 myali88 10年前

    [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”属性来控制哪一个有效,你也可以这样。

    点赞 评论 复制链接分享
  • suziwen suziwen 10年前

    通过grid拿到view(gridview),
    在Ext.grid.GridView里有
    getHeaderCell( Number index ) : HtmlElement

    拿到headerCELL对像,他是个HTMLELEMENT,你可以自己再里面改他的INNERHTML

    点赞 评论 复制链接分享
  • myali88 myali88 10年前

    我觉得如果只是改变显示的风格,你可以采用extjs例子里面的theme切换的方式来实现。

    点赞 评论 复制链接分享

相关推荐