我正在尝试在网格标题上制作可扩展按钮。单击它会展开,然后再次单击它会关闭。 我编写了一个使用标志 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
});
},
});
我应该把它放在渲染中还是其他地方。感谢帮助。
最佳答案
如果您希望特定的列标题成为可扩展的按钮,请尝试此操作。
声明一个变量并将您的 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 上给出的完整代码(如函数),但我确信您可以在可扩展列上获得可更改的按钮。
关于javascript - 如何在网格列标题上获取可扩展按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38114647/