extjs - 在 ExtJS 视图中声明功能的正确位置是什么

Question

我正在使用 ExtJS 4.1。我正在使用 MVC 功能。我已经在 View 中定义了所有控件并在 Controller 上回复以进行事件处理。我想在网格中添加一些功能。我不确定在什么地方可以定义该功能。 是否可以定义具有视图的功能？

在这种情况下，特征是指分组特征

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'
}],

提示：查看4.2.2 版本的文档，代码显示在右侧。