Extjs 그리드 열 머리글, 특정 열에 드롭 다운 메뉴 항목 추가

Question

그리드의 열 머리글 드롭 다운 메뉴에 단추를 추가하려고합니다. 그러나 특정 itemId가있는 열에 만 추가하려고합니다. 지금까지 버튼을 모든 열에 추가하는 작업을 수행했습니다. 아래 코드를 참조하십시오. 나는 각 열의 itemId를 확인할 수있는 곳을 보지 못했다. 열을 반복하지 않는 것 같다. 이 문제를 해결할 수있는 방법이 있습니까? 고맙습니다!

items:[{ 
      region:'center', 
      xtype:'grid', 
      columns:{ 
        items: COLUMNS, //defined in index.php 
      }, 
      store:'Items', 
      selType: 'checkboxmodel', 
      listeners: { 
        afterrender: function() {   
          var menu = Ext.ComponentQuery.query('grid')[0].headerCt.getMenu(); 
          menu.add([{ 
            text: 'edit', 
            handler: function() { 
              console.log("clicked button"); 
            } 
          }]);   
        } 
      } 
    }], 

Answer 1

모눈 열 메뉴는 모든 열에 대해 공유되는 한 인스턴스에 있습니다. 이 때문에 하나의 열에 대해서만 메뉴 항목을 추가 할 수는 없습니다.

그러나 특정 열에 대해서는이 메뉴에서 메뉴 항목을 표시하거나 숨길 수 있습니다. 당신은 메뉴를 beforeshow 이벤트를 사용하고 menu.activeHeader 속성에서 컬럼에 대한 정보를 얻을 수 있습니다 :

listeners: { 
    afterrender: function(c) {           
     var menu = c.headerCt.getMenu(); 

     // add menu item into the menu and store its reference 
     var menuItem = menu.add({ 
      text: 'edit', 
      handler: function() { 
       console.log("clicked button"); 
      } 
     }); 

     // add listener for beforeshow menu event 
     menu.on('beforeshow', function() { 

      // get data index of column for which menu will be displayed 
      var currentDataIndex = menu.activeHeader.dataIndex; 

      // show/hide menu item in the menu 
      if (currentDataIndex === 'name') { 
       menuItem.show(); 
      } else { 
       menuItem.hide(); 
      } 
     }); 
    } 
} 

바이올린을 라이브 예제 : https://fiddle.sencha.com/#fiddle/3fm