Wie erhalte ich erweiterbare Schaltfläche auf Raster Column Header

Question

Ich versuche, erweiterbare Schaltfläche auf der Kopfzeile des Rasters zu machen. Wenn Sie darauf klicken, wird es erweitert und dann erneut geklickt, um es zu schließen. Ich schrieb eine Funktion zum Expandieren mit Flag 1 und 0.

Meine Frage ist, wie Sie eine Schaltfläche auf den Header der Spalte platzieren.

Hier habe ich versucht. By Design Zeit nur als Referenz.

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

In Betreff-Header i diesen Code mit + Taste gegeben und auf klicken, um es Fn_dayclick nennen (0). Aber wo man Code für - Knopf gibt, den ich vorbereitet habe. Dies ist in dem Fall, wo ich Spalte in Code entwerfe. Was tun, wenn meine Spalte von XML kommt. Mein Code für 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 
     }); 
    }, 
}); 

Soll ich in machen oder anderswo. Danke für die Hilfe.

Answer 1

Wenn Sie bestimmte Spaltenüberschrift als Schaltfläche mit erweiterbar sein möchten, dann versuchen Sie es.

deklarieren Sie eine Variable und speichern Sie Ihre Kopfzeile in diesem. In if-Anweisung setzen Sie die Kopfzeile für diese spezifische Spalte und in der else-Anweisungsgruppen-Kopfzeile für andere Spalten. in column.push anstelle von Header rufen Sie Ihre Variable, wo Sie Ihre Kopfzeile speichern.

Hier ist ein Code für Sie.

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 
    }); 
}, 

Auch ich bin Ihren vollständigen Code wie Funktion, die Sie auf Onclick gegeben nicht getestet, aber ich bin sicher, Sie veränderbare Taste auf erweiterbare Spalte zu bekommen.