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

Posted 2023-02-26

【中文标题】如何在网格列标题上获取可扩展按钮

【英文标题】：How to get expandble button on grid coloumn header

【发布时间】：2016-06-30 05:31:53

【问题描述】：

我正在尝试在网格标题上制作可扩展按钮。单击它会展开，然后再次单击它将关闭。 我写了一个用标志 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  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
        );
    ,
);

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

【参考方案1】：

如果您希望特定的列标题是可展开的按钮，那么试试这个。

声明一个变量并将您的标头存储在其中。在 if 语句中为该特定列设置标题，在 else 语句中为其他列设置标题。 在 coloumn.push 中代替 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  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  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 上给出的完整代码，但我相信你可以在可扩展列上获得可变按钮。

【讨论】：

谢谢。这正是我想要的。获取不同列标题的单独方法。非常感谢。