Какое место следует объявлять в представлении ExtJS

Question

Я использую ExtJS 4.1. Я использую функцию MVC. Я определил все свои элементы управления в представлении и ответе на контроллер для обработки событий. Я хочу добавить некоторую функцию в сетку. Я не уверен, в каком месте я могу определить эту функцию. Можно ли определить функцию с представлением?

В этом случае с помощью функции я имею в виду grouping feature

Ext.define('PA.view.OptionsView', { 
    extend: 'Ext.panel.Panel', 
    alias: 'widget.optionsview', 
    id: 'option-panel', 
    title: 'Options', 
    // feature: --- Where can i define the feature in order to use it 
items: [{ 


     xtype: 'grid', 
     id: 'columnGrid', 
     flex: 1, 
     hideHeaders: true, 
     store: 'myStore', 
     columns: [ 
      { 
       header: 'Columns', 

       sortable: false, 
       dataIndex: 'DisplayName' 
      }, 
      { 
       header: 'Column2', 

       sortable: false, 
       dataIndex: 'DisplayName2' 
      } 
     ] 
}] 

}); 

Если я определить функцию группы, как это:

features: [{ 
    ftype: 'grouping', 
    groupHeaderTpl: '{columnName}: {name} ({rows.length} Item{[values.rows.length > 1 ? "s" : ""]})', 
    hideGroupedHeader: true, 
    startCollapsed: true, 
    id: 'restaurantGrouping' 
}], 

тогда, я не в состоянии включить/выключить группу, эти свойства/методы недоступны, как показано на рисунке ниже:

если я определить функцию так:

var groupingFeatureColumn = Ext.create('Ext.grid.feature.Grouping', { 

    groupHeaderTpl: '{name} ({rows.length} Item{[values.rows.length > 1 ? "s" : ""]})', 
    hideGroupedHeader: true, 
    startCollapsed: false, 
    id: 'measureGrouping-column' 
}); 

Тогда я могу позволить отключить эту функцию, как те собственности доступны, как показано ниже

Answer 1

В вашем определении, вы расширяете ' Ext.panel.Panel ', но этот класс не имеет функции группировки.

Вам нужно продлить «Ext.grid.Panel», после того, что вы просто добавить features: конфигурации:

features: [{ 
    ftype: 'grouping', 
    groupHeaderTpl: '{columnName}: {name} ({rows.length} Item{[values.rows.length > 1 ? "s" : ""]})', 
    hideGroupedHeader: true, 
    startCollapsed: true, 
    id: 'restaurantGrouping' 
}], 

Подсказка: Посмотрите на doc for version 4.2.2, а код отображается справа.