특정 그룹에만 공시를 적용 하시겠습니까?

Question

나는 현재 이런 식으로 그룹화 한 :

코드 :

Ext.regModel('Contact', { 
    fields: ['firstName', 'lastName'] 
}); 

var store = new Ext.data.JsonStore({ 
    model : 'Contact', 
    getGroupString : function(record) { 
     //return record.get('lastName')[0]; 
     return record.get('group'); 
    }, 
    data: [ 
     {firstName: 'Tung', lastName: 'Hauw', group: 'Parents'}, 
     {firstName: 'Regina', lastName: 'Clarissa', group: 'Parents'}, 
     {firstName: 'Melvin', lastName: 'Gilbert', group: 'Children'}, 
     {firstName: 'Jeaffrey', lastName: 'Gilbert', group: 'Children'}, 
     {firstName: 'Melissa', lastName: 'Merryl Gilbert', group: 'Children'}, 
     {firstName: 'Jesica', lastName: 'Merryl Gilbert', group: 'Children'} 
    ] 
}); 

var list1 = new Ext.List({ 
    flex: 1, 
    cls: 'list_simple', 
    sorters: ['firstName', 'group'], 
    itemTpl: '{firstName} {lastName}', 
    grouped: true, 
    groupTpl : [ 
     '<tpl for=".">', 
      '<div class="x-list-group x-group-{id}">', 
       '<h3 class="x-list-header"><div class="header">{group}</div></h3>', 
       '<div class="x-list-group-items">', 
        '{items}', 
       '</div>', 
      '</div>', 
     '</tpl>' 
    ], 
    onItemDisclosure: function(record, btn, index) { 
     Ext.Msg.alert('Tap', 'Disclose more info for ' + record.get('firstName') + ' ' + record.get('lastName'), Ext.emptyFn); 
    }, 
    store: store 
}); 

내가 특정 그룹에 대한 특정 공개가 필요합니다. 위의 코드를 사용하면 모든 그룹에 동일한 공개 정보가 제공됩니다. 나는이 디자인을 달성하기 위해 노력하지 해요 :

부모의 항목에 대한 어떠한 공개. 부모 행을 따라 슬라이드하면 제거 버튼이 표시됩니다. 또한 탭 이벤트가 있습니다.

어디에서 공개 이벤트를 이동/변경해야하는지 모르겠습니다. 누군가 나를 도울 수 있습니까?

Answer 1

공개 모양을 변경하는 가장 좋은 방법은 그룹의 CSS 클래스를 사용하는 것입니다. 공개를 목표로하는 규칙을 추가하는 경우 나는 당신이 (내가 생각하는 웹킷 마스크 박스 이미지)를 사용하여 스타일 규칙에 100 % 확실하지 않다, 그러나 당신이 당신의 CSS에 다음과 같은 규칙을 추가하는 경우는 ...

x-list-group x-group-{id} .x-list-disclosure { 
    -webkit-mask: none; 
    -webkit-mask-box-image: none; 
} 

분명히 작동합니다 부모 그룹의 ID를 반영하도록 {id} 부분을 변경하면 상위 항목에 공개 아이콘이 표시되지 않습니다.

Reference