如何获得网格coloumn标题上的展开按钮

时间:2016-06-30 05:31:54

标签: javascript extjs extjs3

我正在尝试在网格标题上制作可扩展按钮。点击它将展开,然后再次点击它将关闭。 我写了一个用标志1和0扩展的函数。

我的问题是如何在网格列的标题上放置一个切换按钮。

我试过这里。 按设计时间仅供参考。

nol

在主题标题中,我使用+按钮给出该代码,然后单击它调用Fn_dayclick(0)。但是在哪里给代码 - 我准备的按钮。这是我在代码中设计列的情况。 当我的专栏来自xml时该怎么办。 我的Ajax代码

columns: [{
    id: 'Sd',
    header: 'Study',
    width: 130,
    sortable: false,
    hideable: false,
    dataIndex: 'Stu'
}, {
    width: 130,
    header: '<u style="color:blue;cursor:pointer;" title="Click on to view by Days"  onclick="Fn_dayclick(0)">' +
        '<img alt="Click on to view by Days" style="vertical-align:bottom;" ' +
        'src="Images/508Images/group-expand.gif"> ' + "Subject" + '</u>',
    id: 'Sub',
    itemId: "Sub",
    dataIndex: 'Sub',
    hidden: false,
}, {
    width: 130,
    id: 'Ext',
    header: 'Exclude',
    dataIndex: 'Excl',
    hidden: false
}]

我应该放入渲染还是其他任何地方。感谢帮助。

1 个答案:

答案 0 :(得分:1)

如果您希望特定列标题为具有可扩展名的按钮,请尝试此操作。

声明一个变量并将标题存储在其中。在if语句中为该特定列设置标头,在else语句中为其他列设置标头。 在coloumn.push代替标题,在你存储标题的地方调用你的变量。

这是给你的代码。

 var headerstu;
    if(header.getAttribute("DATAINDEX") === "SUB"){
        if(header.showPara){ // decelear a showPara as boolean in ur function
            headerstu = '<u style="color:blue;cursor:pointer;" title="Click on to view across Subject" onclick="Fn_Dayclick(1)">' +
                        '<img alt="Click on to view across Subject" style="vertical-align:bottom;" ' +
                        ' src="Images/508Images/group-expand.gif" />' +
                        '  ' + Ext.util.Format.htmlEncode(strHeaderName) + '</u>';
        }else{
            headerstu = '<u style="color:blue;cursor:pointer;" title="Click on to view across Subject" onclick="Fn_Dayclick(0)">' +
                        '<img alt="Click on to view across Subject" style="vertical-align:bottom;" ' +
                        ' src="Images/508Images/group-close.gif" />' +
                        '  ' + Ext.util.Format.htmlEncode(strHeaderName) + '</u>';
        }// take a groupclose image which is opposite to group-expand
    }else{
         headerstu = Ext.util.Format.htmlEncode(strHeaderName);
    }
    this.columns.push({
        header: headerstu,
         tooltip: strToolTip,
        dataIndex: header.getAttribute("DATAINDEX"),
        width: parseInt(header.getAttribute("LENGTH")),
        metaID: header.getAttribute("M"),
        enableHdMenu: false,
        hidden: hiddenflg,
        menuDisabled: true,
        sortable: false,
        scope: this,
        fixed: false,
        expanded: true
    });
},

此外,我没有测试您的完整代码,例如您在onclick上提供的功能,但我相信您可以在可扩展列上获得可更改按钮。