Results 1 to 10 of 10

Thread: How to config serval "feature"s in a grid and toggle between them?

  1. #1
    Sencha User hexawing's Avatar
    Join Date
    Nov 2009
    Posts
    73
    Answers
    1
    Vote Rating
    0
      0  

    Default Answered: How to config serval "feature"s in a grid and toggle between them?

    PHP Code:
    var groupingFeature Ext.create('Ext.grid.feature.Grouping'); 
    Ext.create('Ext.grid.Panel', {
         
    // other options
         
    features: [groupingFeature]
    }); 
    Can I add a new feature into the [groupingFeature] array? How to do?
    And if there are serval features, how can I toggle them?

    1. AbstractSummary is an abstract class, you can't use it as a feature.
    2. Either use ftype or Ext.create(), not both.
    3. There's a bug in the Grouping feature whereby it throws an error is you try to disable/enable it when there is no grouping menu.


    Here's a complete example that worked for me, 4.0.2 and 4.0.6.

    Code:
    var store = new Ext.data.ArrayStore({
        fields: ['type', 'name'],
        groupField: 'type',
        data: [
            ['A', 'Tom'],
            ['A', 'Bob'],
            ['B', 'Paul']
        ]
    });
    
    var groupingFeature = {
        enableGroupingMenu: false,
        ftype: 'grouping',
        groupHeaderTpl: '{name}',
        hideGroupedHeader: true,
        id: 'group'
    };
    
    var summaryFeature = {
        disabled: true,
        ftype: 'summary',
        id: 'summary'
    };
    
    Ext.create('Ext.grid.Panel', {
        features: [groupingFeature, summaryFeature],
        renderTo: Ext.getBody(),
        store: store,
        columns: [
            {dataIndex: 'name', header: 'Name', summaryType: 'count'},
            {dataIndex: 'type', header: 'Type', summaryType: 'count'}
        ],
        tbar: [
            {
              text: 'Summary',
              handler: function(){
                  var view = this.up('gridpanel').getView();
    
                  try {
                      // Swallow bug in disable() method wth enableGroupingMenu: false
                      view.getFeature('group').disable();
                  }
                  catch(ex) {
                  }
    
                  view.getFeature('summary').enable();
                  view.refresh();
              }
          }, {
              text: 'Grouping',
              handler: function(){
                  var view = this.up('gridpanel').getView();
    
                  view.getFeature('summary').disable();
    
                  try {
                      // Swallow bug in enable() method wth enableGroupingMenu: false
                      view.getFeature('group').enable();
                  }
                  catch(ex) {
                  }
    
                  view.refresh();
              }
          }
        ]
    });

  2. #2
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,791
    Answers
    585
    Vote Rating
    394
      1  

    Default

    Features have disable() and enable() methods that should allow you to turn them on or off. If that doesn't work for some specific combination of features then you'll have to be specific about which features you're trying to use.

  3. #3
    Sencha User hexawing's Avatar
    Join Date
    Nov 2009
    Posts
    73
    Answers
    1
    Vote Rating
    0
      0  

    Default

    I found I can use serval features like this:
    PHP Code:
    var groupingFeature Ext.create('Ext.grid.feature.Grouping',{
      
    id'group',
      
    ftype'groupingsummary',
      
    groupHeaderTpl'{name}',
      
    hideGroupedHeadertrue,
      
    enableGroupingMenufalse
    });
    var 
    abstractSummaryFeature Ext.create('Ext.grid.feature.AbstractSummary',{
      
    id'summary',
      
    ftype'abstractsummary',
      
    hideGroupedHeaderfalse,
      
    enableGroupingMenutrue
    });
    Ext.create('Ext.grid.Panel', {
         
    // other options
          
    dockedItems: [{
              
    dock'top',
              
    xtype'toolbar',
              
    items: [{
                  
    tooltip'Change the feature',
                  
    text'Change',
                  
    handler: function(){
                      var 
    view Ext.getCmp('sell_quote_item_grid').getView();
                      
    view.getFeature('group').disable();//do you mean this way?
                      
    view.getFeature('summary').enable();//I tried but failed...
                      
    view.refresh();
                  }
              }]
          }],
         
    features: [groupingFeatureabstractSummaryFeature]
    }); 

  4. #4
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,791
    Answers
    585
    Vote Rating
    394
      1  

    Default

    1. AbstractSummary is an abstract class, you can't use it as a feature.
    2. Either use ftype or Ext.create(), not both.
    3. There's a bug in the Grouping feature whereby it throws an error is you try to disable/enable it when there is no grouping menu.


    Here's a complete example that worked for me, 4.0.2 and 4.0.6.

    Code:
    var store = new Ext.data.ArrayStore({
        fields: ['type', 'name'],
        groupField: 'type',
        data: [
            ['A', 'Tom'],
            ['A', 'Bob'],
            ['B', 'Paul']
        ]
    });
    
    var groupingFeature = {
        enableGroupingMenu: false,
        ftype: 'grouping',
        groupHeaderTpl: '{name}',
        hideGroupedHeader: true,
        id: 'group'
    };
    
    var summaryFeature = {
        disabled: true,
        ftype: 'summary',
        id: 'summary'
    };
    
    Ext.create('Ext.grid.Panel', {
        features: [groupingFeature, summaryFeature],
        renderTo: Ext.getBody(),
        store: store,
        columns: [
            {dataIndex: 'name', header: 'Name', summaryType: 'count'},
            {dataIndex: 'type', header: 'Type', summaryType: 'count'}
        ],
        tbar: [
            {
              text: 'Summary',
              handler: function(){
                  var view = this.up('gridpanel').getView();
    
                  try {
                      // Swallow bug in disable() method wth enableGroupingMenu: false
                      view.getFeature('group').disable();
                  }
                  catch(ex) {
                  }
    
                  view.getFeature('summary').enable();
                  view.refresh();
              }
          }, {
              text: 'Grouping',
              handler: function(){
                  var view = this.up('gridpanel').getView();
    
                  view.getFeature('summary').disable();
    
                  try {
                      // Swallow bug in enable() method wth enableGroupingMenu: false
                      view.getFeature('group').enable();
                  }
                  catch(ex) {
                  }
    
                  view.refresh();
              }
          }
        ]
    });

  5. #5
    Sencha User hexawing's Avatar
    Join Date
    Nov 2009
    Posts
    73
    Answers
    1
    Vote Rating
    0
      0  

    Default

    @skirtle,
    Thank you! Your code does work! But, I still have a question:
    How can I find which ftype should I use? In API, the hierarchy is like this:
    Ext.grid.feature.Feature
    ->Ext.grid.feature.AbstractSummary
    --->Ext.grid.feature.Summary
    ->Ext.grid.feature.Chunking
    ->Ext.grid.feature.Grouping
    --->Ext.grid.feature.GroupingSummary
    I thought ftype corresponds to the class name, but it seems not...

  6. #6
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,791
    Answers
    585
    Vote Rating
    394
      0  

    Default

    Really? I thought they all were the same.

    If you open the docs and click on the green class name at the top it'll open up the source code. Search for alias. The last bit of the alias is the ftype.

  7. #7
    Sencha User hexawing's Avatar
    Join Date
    Nov 2009
    Posts
    73
    Answers
    1
    Vote Rating
    0
      0  

    Default

    emmm....I thougth, Ext.grid.feature.AbstractSummary and Ext.grid.feature.Grouping are the same level, so I can use "abstractSummary" as an ftype, but you said not...

  8. #8
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,791
    Answers
    585
    Vote Rating
    394
      0  

    Default

    The level they are at is irrelevant. AbstractSummary is an abstract class. It is designed to be extended, not instantiated. It is extended by both Summary and GroupingSummary (via a mixin). You should use one of these two classes instead.

  9. #9
    Sencha User
    Join Date
    May 2014
    Posts
    5
    Vote Rating
    0
      0  

    Default

    Thanks skirtle, I needed this change to enable and disable grouping on some action.

  10. #10
    Sencha User
    Join Date
    Jul 2014
    Posts
    1
    Vote Rating
    0
      0  

    Default

    Hi friends, i am new to extjs ,i want to do file upload in grid cell from ext js 3.4 version , let me know if any one have any idea

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •