0

I am using ExtJS 4.1. I am using MVC feature. I have defined all my controls in View and reply on Controller for event handling. I want to add some feature to the grid. I am not sure at what place I can define the feature. Is it possible to define a feature with view?

In this case by feature I mean 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'
            }
        ]
}]

});

If I define the group feature like this: 

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

then, I am not able to enable/disable the group as those property/methods are not available as shown in below image:

enter image description here

if I define feature like this:

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'
});

Then I can enable disable the feature as those property are available as shown below

enter image description here

SharpCoder
  • 18,279
  • 43
  • 153
  • 249

1 Answers1

0

In your definition, you extend 'Ext.panel.Panel', but this class does not have grouping feature.

You need to extend 'Ext.grid.Panel', after that you simply add a features: config: 

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

Tip: Look at the doc for version 4.2.2, and the code is displayed on the right.

Lorenz Meyer
  • 19,166
  • 22
  • 75
  • 121
  • Thank you for the reply. I have updated the question. If I use the approach you suggested, I am not able to enable and disable the feature. If i define the feature by defining the feature, I am running into scope issue. – SharpCoder Nov 19 '13 at 13:17
  • A feature has the methods `enable` and `disable`. You should be able to enable or disable it by calling its methods. If you want it disabled by default, try to set `features:[{disabled: true, ...` – Lorenz Meyer Nov 19 '13 at 13:48
  • First of all, I am not sure what is the difference between the two ways using which we have defined the feature.Secondly, I am not sure why enable/disable methods are not available. I want the flexibility to enable/disable feature based on user interaction. I do not want to disable/enable any feature permanently. – SharpCoder Nov 19 '13 at 13:54
  • I don't have the time to try and find the exact syntax, but something like this should be possible in controller `this.getView('OptionsView').features[0].disable()` and `this.getView('OptionsView').features[0].enable()` – Lorenz Meyer Nov 19 '13 at 14:03
  • Thank you so much for helping me on this. The feature, does not belong to the view. it is part of the grid. Lets say, I decide to use this code over the grid, under which event, I should write this? – SharpCoder Nov 19 '13 at 14:06
  • As I mentionned in my answer, your view should be a `Ext.grid.Panel` for all this to work. Which event ? You said you want to enable/disable on user interaction. The event is that user interaction, like button click or similar. – Lorenz Meyer Nov 19 '13 at 14:12