Results 1 to 4 of 4

Thread: Grouping Summary groupclick event listener

  1. #1
    Ext JS Premium Member
    Join Date
    Mar 2011
    Posts
    69
    Vote Rating
    0
      0  

    Default Answered: Grouping Summary groupclick event listener

    Hi, using the sencha example, where does the listener go? I tried attaching listener to grid but I am not getting anything. My goal is to be able to click on the header and load the results in a new grid that are under the groupheader.

    ie.

    Stocks
    AAPL
    GOOG
    JNJ
    Bonds
    bond1
    bond2
    bond3

    If I clicked on "Stocks", it will load a grid that has more detail on AAPL,GOOG,JNJ

    any help is appreciated!


    Code:
    Ext.define('TestResult', {
        extend: 'Ext.data.Model',
        fields: ['student', 'subject', {
            name: 'mark',
            type: 'int'
        }]
    });
    
    
    Ext.create('Ext.grid.Panel', {
        width: 200,
        height: 240,
        renderTo: document.body,
        features: [{
            groupHeaderTpl: 'Subject: {name}',
            ftype: 'groupingsummary'
        }],
        store: {
            model: 'TestResult',
            groupField: 'subject',
            data: [{
                student: 'Student 1',
                subject: 'Math',
                mark: 84
            },{
                student: 'Student 1',
                subject: 'Science',
                mark: 72
            },{
                student: 'Student 2',
                subject: 'Math',
                mark: 96
            },{
                student: 'Student 2',
                subject: 'Science',
                mark: 68
            }]
        },
        columns: [{
            dataIndex: 'student',
            text: 'Name',
            summaryType: 'count',
            summaryRenderer: function(value){
                return Ext.String.format('{0} student{1}', value, value !== 1 ? 's' : '');
            }
        }, {
            dataIndex: 'mark',
            text: 'Mark',
            summaryType: 'average'
        }]
    });

  2. Pasting this into my browser console, it works just fine:

    PHP Code:
    Ext.getBody().update('');
    Ext.create('Ext.grid.Panel', {   
        
    width200,   
        
    height240,   
        
    renderTodocument.body,   
        
    features: [{    
            
    groupHeaderTpl'Subject: {name}',     
            
    ftype'groupingsummary'   
        
    }],   
        
    store: {    
            
    fields : [ 'student''subject''mark' ],        
            
    groupField'subject',    
            
    data: [        
                { 
    student'Student 1'subject'Math'mark84 },        
                { 
    student'Student 1'subject'Science'mark72 },        
                { 
    student'Student 2'subject'Math'mark96 },        
                { 
    student'Student 2'subject'Science'mark68 }    
            ]  
        },   
        
    columns: [{     
            
    dataIndex'student',     
            
    text'Name',     
            
    summaryType'count',     
            
    summaryRenderer: function(value){       
                return 
    Ext.String.format('{0} student{1}'valuevalue !== 's' '');     
            }   
        }, {     
            
    dataIndex'mark',     
            
    text'Mark',     
            
    summaryType'average'   
         
    }],
        
    listeners:{     
            
    groupclick : function(arg1,arg2,arg3,arg4){ 
                
    console.log('123'); 
            }
    ///THIS FIRES JUST FINE   
        
    }
    }); 
    I did modify your store definition to use "fields" instead of "model", because you didn't include your model class.

  3. #2
    Sencha Developer
    Join Date
    Sep 2008
    Location
    Antioch, IL
    Posts
    1,516
    Answers
    99
    Vote Rating
    1593
      1  

    Default

    I don't see your event listener anywhere in the code you posted.

  4. #3
    Ext JS Premium Member
    Join Date
    Mar 2011
    Posts
    69
    Vote Rating
    0
      0  

    Default IT doesn't work here.

    Code:
    Ext.create('Ext.grid.Panel', { 
      width: 200, 
      height: 240, 
      renderTo: document.body, 
      features: [{
        groupHeaderTpl: 'Subject: {name}', 
        ftype: 'groupingsummary' 
      }], 
      store: { 
        model: 'TestResult',       
        groupField: 'subject',
        data: [
            { student: 'Student 1', subject: 'Math', mark: 84 },
            { student: 'Student 1', subject: 'Science', mark: 72 },
            { student: 'Student 2', subject: 'Math', mark: 96 },
            { student: 'Student 2', subject: 'Science', mark: 68 }
        ]
      }, 
      columns: [{ 
        dataIndex: 'student', 
        text: 'Name', 
        summaryType: 'count', 
        summaryRenderer: function(value){ 
          return Ext.String.format('{0} student{1}', value, value !== 1 ? 's' : ''); 
        } 
      }, { 
        dataIndex: 'mark', 
        text: 'Mark', 
        summaryType: 'average' 
      }],
     listeners:{ 
        groupclick : function(arg1,arg2,arg3,arg4){ ///THIS DOESNT FIRE } 
      }
    });

  5. #4
    Sencha Developer
    Join Date
    Sep 2008
    Location
    Antioch, IL
    Posts
    1,516
    Answers
    99
    Vote Rating
    1593
      1  

    Default

    Pasting this into my browser console, it works just fine:

    PHP Code:
    Ext.getBody().update('');
    Ext.create('Ext.grid.Panel', {   
        
    width200,   
        
    height240,   
        
    renderTodocument.body,   
        
    features: [{    
            
    groupHeaderTpl'Subject: {name}',     
            
    ftype'groupingsummary'   
        
    }],   
        
    store: {    
            
    fields : [ 'student''subject''mark' ],        
            
    groupField'subject',    
            
    data: [        
                { 
    student'Student 1'subject'Math'mark84 },        
                { 
    student'Student 1'subject'Science'mark72 },        
                { 
    student'Student 2'subject'Math'mark96 },        
                { 
    student'Student 2'subject'Science'mark68 }    
            ]  
        },   
        
    columns: [{     
            
    dataIndex'student',     
            
    text'Name',     
            
    summaryType'count',     
            
    summaryRenderer: function(value){       
                return 
    Ext.String.format('{0} student{1}'valuevalue !== 's' '');     
            }   
        }, {     
            
    dataIndex'mark',     
            
    text'Mark',     
            
    summaryType'average'   
         
    }],
        
    listeners:{     
            
    groupclick : function(arg1,arg2,arg3,arg4){ 
                
    console.log('123'); 
            }
    ///THIS FIRES JUST FINE   
        
    }
    }); 
    I did modify your store definition to use "fields" instead of "model", because you didn't include your model class.

Posting Permissions

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