Элементы подменю не показаны в заголовке сетки ExtJS 4

Question

Я пытаюсь создать меню с некоторыми подменю в заголовке сетки, но теперь отображаются элементы подменю. Вот как я переопределить getColumnMenu() в Ext.grid.header.Container:

Ext.override(Ext.grid.header.Container, { 
    /** 
    * Returns an array of menu CheckItems corresponding to all immediate children of the passed Container which have been configured as hideable. 
    */ 
    getColumnMenu: function (headerContainer) { 
     // debugger 
     var xmenu = new Ext.menu.Menu({ 
      style: { 
       overflow: 'visible' 
      }, 
      items: [{ 
       text: 'Category 1', 
       menu: [{ 
        text: 'Item 1.1', 
        checked: true, 
        checkHandler: this.onColumnCheckChange 
       }, { 
        text: 'Item 1.2', 
        checked: false, 
        checkHandler: this.onColumnCheckChange 
       }] 
      }, { 
       text: 'Category 2', 
       menu: [{ 
        text: 'Item 2.1', 
        checked: true, 
        checkHandler: this.onColumnCheckChange 
       }, { 
        text: 'Item 2.1', 
        checked: false, 
        checkHandler: this.onColumnCheckChange 
       }] 
      }] 
     }); 

     var test = []; 
     xmenu.items.each(function (item) { 
      test.push(item); 
     }); 
     return test; 

    } 
}); 

The меню Категория 1 и Категория 2 показаны:

, но когда я пытаюсь показать свои подменю, я получаю сообщение об ошибке:

Как-то это parentMenu свойство меню undefined. Какие-либо предложения?

Answer 1

Если честно, я не совсем уверен, почему ваш код не работал. Я просто попытался организовать создание меню и элементов меню, и это сработало. Я использовал следующий код

getColumnMenu: function(headerContainer) { 
    var menuItems = []; 

     /* CATEGORY 1 */ 
     var itemsOneMenu = Ext.create('Ext.menu.Menu', { 
      items: [{ 
       text: 'Item 1.1', 
       checked: true, 
       checkHandler: this.onColumnCheckChange 
      },{ 
       text: 'Item 1.2', 
       checked: false, 
       checkHandler: this.onColumnCheckChange 
      }] 
     }); 

     categoryOneMenuItem = Ext.create('Ext.menu.Item', { 
      text: 'Category 1', 
      hideOnClick: false, 
      menu: itemsOneMenu 
     }); 

     /* CATEGORY 2 */ 
     var itemsTwoMenu = Ext.create('Ext.menu.Menu', { 
      items: [{ 
       text: 'Item 2.1', 
       checked: true, 
       checkHandler: this.onColumnCheckChange 
      },{ 
       text: 'Item 2.1', 
       checked: false, 
       checkHandler: this.onColumnCheckChange 
      }] 
     }); 

     categoryTwoMenuItem = Ext.create('Ext.menu.Item', { 
      text: 'Category 2', 
      hideOnClick: false, 
      menu: itemsTwoMenu 
     }); 

    menuItems.push(categoryOneMenuItem,categoryTwoMenuItem); 
    return menuItems; 
} 

Здесь вы можете найти запущенный пример http://jsfiddle.net/alexrom7/xheHn/. Единственное замечание заключается в том, что EXT продолжит прослушивать событие checkItem checkchange event, чтобы показать или скрыть выбранный столбец.