Extjs 그리드 그룹화 요약 이벤트

Question

나는 Ext.grid.Panel과 Ext.grid.feature.GroupingSummary을 사용하고 있습니다. 요약 행 클릭 이벤트에 대한 리스너를 추가해야합니다. 요약 행 클릭에 대한 이벤트가 있습니까?

Ext.create('Ext.grid.Panel', { 
features:[ 
      Ext.create('Ext.grid.feature.GroupingSummary',{ 
        ftype: 'groupingsummary' 
      }) 
], 

Answer 1

지금까지 내가 말할 수있는, 내장 그렇게 아무것도 없습니다. 요약 요소에서 click 이벤트를 직접 catch해야합니다. 그것은 상대적으로 쉽습니다. 클릭 한 요약 그룹을 알아야하는 경우 상황이 복잡해집니다 ...

이 기능의 방법은 getGroupName입니다. 이를 위해, 당신은 즐거운 부분을 그룹화 기능 인스턴스에 대한 참조를 유지하기 위해 필요합니다, 당신은 클릭 된 요약 요소를 일치하는 그룹 헤더 요소를 발견해야합니다. 약간 더 많은 것을 자극하기 위해 그룹 및 요약 요소에 대한 마크 업은 Ext 4.2에서 크게 변경된 것으로 보입니다.

모든 것을 수행하는 리스너의 코드입니다 (summary 요소의 click 이벤트에서).

function(e, target) { 

    // Find group element (header), for the clicked summary 
    var groupEl; 

    if (Ext.getVersion().isLessThan('4.2')) { 
     // Life used to be easy with everything being a row 
     // in the table (actual rows, group headers, 
     // summary row)... 
     groupEl = Ext.fly(target).prev('.x-grid-group-hd'); 
    } else { 
     // But from Ext4.2, everything became complicated. 
     // Group headers & summary row seem to be embedded 
     // in the next or previous regular row... Since I 
     // haven't entirely understood the logic behind, I 
     // cannot guarantee this will work with all possible 
     // cases... 
     var row = Ext.fly(target).up('.x-grid-row'); 
     while (row && !groupEl) { 
      groupEl = row.down('.x-grid-group-hd'); 
      row = row.prev('.x-grid-row'); 
     } 
    } 

    // We can get the group name from the group element, 
    // but we need a reference to the grouping feature 
    // instance... 
    var groupName = groupingSummary.getGroupName(groupEl); 

    // Here you are... 
    console.log('Group clicked: ' + groupName); 
} 

다음은 문서의 그룹화 요약 표 예제를 기반으로 한 전체 예입니다.

Ext.define('TestResult', { 
    extend: 'Ext.data.Model', 
    fields: ['student', 'subject', { 
     name: 'mark', 
     type: 'int' 
    }] 
}); 

var groupingSummary = Ext.create('Ext.grid.feature.GroupingSummary', { 
    groupHeaderTpl: 'Subject: {name}', 
    ftype: 'groupingsummary' 
}); 

Ext.create('Ext.grid.Panel', { 
    width: 200, 
    height: 240, 
    renderTo: document.body, 
    features: [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: { 
     click: { 
      element: 'body' 
      ,delegate: '.x-grid-row-summary' 
      ,fn: function(e, target) { 

       // Find group element (header), for the clicked summary 
       var groupEl; 

       if (Ext.getVersion().isLessThan('4.2')) { 
        // Life used to be easy with everything being a row 
        // in the table (actual rows, group headers, 
        // summary row)... 
        groupEl = Ext.fly(target).prev('.x-grid-group-hd'); 
       } else { 
        // But from Ext4.2, everything became complicated. 
        // Group headers & summary row seem to be embedded 
        // in the next or previous regular row... Since I 
        // haven't entirely understood the logic behind, I 
        // cannot guarantee this will work with all possible 
        // cases... 
        var row = Ext.fly(target).up('.x-grid-row'); 
        while (row && !groupEl) { 
         groupEl = row.down('.x-grid-group-hd'); 
         row = row.prev('.x-grid-row'); 
        } 
       } 

       // We can get the group name from the group element, 
       // but we need a reference to the grouping feature 
       // instance... 
       var groupName = groupingSummary.getGroupName(groupEl); 

       // Here you are... 
       console.log('Group clicked: ' + groupName); 
      } 
     } 
    } 
}); 

이 답변의 목적은 원리를 보여주기위한 것입니다. 이 코드를 더 나은 방법으로 구성하고 싶을 수도 있습니다 ... 가장 깨끗한 클래스는 GroupingSummary 클래스를 확장하거나 재정의하는 것일 수 있습니다.