javascript - 如何在网格列标题上获取可扩展按钮

Question

我正在尝试在网格标题上制作可扩展按钮。单击它会展开，然后再次单击它会关闭。我编写了一个使用标志 1 和 0 进行扩展的函数。

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

我在这里尝试过。按设计时间仅供引用。

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

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

Ext.Ajax.request({
    url: 'XML/Cohart.xml',
    scope: this,
    timeout: global_constants.TIMEOUT,
    method: "GET",
    disableCaching: true,
    failure: function(response) {
        utils.showOKErrorMsg(sdisMsg.ajaxRequestFailed);
    },
    success: function(response) {
        var datas = response.responseXML;
        Ext.each(datas.getElementsByTagName("HEADER"), function(header) {
            this.buildField(header);
            this.buildColumn(header);
        }, this);
        Ext.each(datas.getElementsByTagName("G"), function(columnData) {
            this.fieldLength = this.fields.length;
            this.record = [];
            for (i = 0; i < this.fieldLength; i++) {
                //this.record.push(columnData);
                var fieldName = this.fields[i].name
                this.record[fieldName] = columnData.getAttribute(fieldName);
            }
            this.data.push(this.record);
        }, this);
        this.store = new Ext.data.ArrayStore({
            fields: this.fields
        });
        this.store.loadData(this.data);
    },
    //this.store.loadData(this.data);});

    buildField: function(header) {
        this.fields.push({
            name: header.getAttribute("DATAINDEX")
        });
    },
    buildColumn: function(header) {
        var hiddenflg = !(header.getAttribute("VISIBLE"));
        if (header.getAttribute("VISIBLE") == "false")
            hiddenflg = true;
        var strHeaderName = '';
        if ((Ext.isIE && !PC.common.isIE10()))
            strHeaderName = header.text;
        else
            strHeaderName = header.textContent;
        var strToolTip = "";
        this.columns.push({
            header: Ext.util.Format.htmlEncode(strHeaderName),
            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
        });
    },
});

我应该把它放在渲染中还是其他地方。感谢帮助。

Answer 1

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

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

这是给您的代码。

 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 上给出的完整代码(如函数)，但我确信您可以在可扩展列上获得可更改的按钮。