在ExtJS视图中声明特征的正确位置是什么

Question

我正在使用ExtJS 4.1。我正在使用MVC功能。我在View中定义了所有控件，并在Controller上回复事件处理。我想在网格中添加一些功能。我不确定在哪里可以定义该功能。 是否可以使用视图定义要素？

在这种情况下，我的意思是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，代码显示在右侧。