グリッドcoloumnヘッダーのexpandbleボタンを取得する方法

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から来ているときに何をするか。 アヤックス

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

特定の列ヘッダーを展開可能なボタンにしたい場合は、これを試してください。

変数を宣言し、それにヘッダーを格納します。 In文では、そのperticular列のelse文で他の列のヘッダを設定します。ヘッダーの代わりにcoloumn.pushの ヘッダーを格納する変数を呼び出します。

ここはあなたのためのコードです。

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の上で与えられた関数のように、あなたの完全なコードをテストしていないですが、私はあなたが伸縮柱に変更ボタンを得ることができると確信しています。