如何在网格列 header 上获取可扩展按钮
How to get expandble button on grid coloumn header
我正在尝试在网格 header 上制作可扩展按钮。单击它会展开,然后再次单击它会关闭。
我写了一个用标志 1 和 0 扩展的函数。
我的问题是如何在网格列的 header 上放置一个切换按钮。
这里我试过了。
按设计时间仅供参考。
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
}]
在主题 header 中,我用 + 按钮给出了该代码,然后单击它调用 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 成为可扩展的按钮,请尝试此操作。
声明一个变量并将您的 header 存储在其中。在 if 语句中为该特定列设置 header,在 else 语句中为其他列设置 header。
在 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 上给出的函数,但我相信你可以在可扩展列上获得可更改的按钮。
我正在尝试在网格 header 上制作可扩展按钮。单击它会展开,然后再次单击它会关闭。 我写了一个用标志 1 和 0 扩展的函数。
我的问题是如何在网格列的 header 上放置一个切换按钮。
这里我试过了。 按设计时间仅供参考。
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
}]
在主题 header 中,我用 + 按钮给出了该代码,然后单击它调用 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 成为可扩展的按钮,请尝试此操作。
声明一个变量并将您的 header 存储在其中。在 if 语句中为该特定列设置 header,在 else 语句中为其他列设置 header。 在 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 上给出的函数,但我相信你可以在可扩展列上获得可更改的按钮。