Sencha touch supprime l'en-tête du groupe et augmente l'espace

Question

Comment puis-je supprimer l'en-tête de liste groupée tactile Sencha et augmenter l'écart.

Answer 1

Définissez une classe personnalisée pour votre liste et ajoutez le CSS pour cette classe dans votre fichier css. Hors circuit, avec les options de configuration groupées définies sur true si vous utilisez un magasin et ajoutez le nom de champ souhaité à grouper.

Vue:

Ext.define('app.view.Temp', { 
     extend : 'Ext.List', 
     xtype : 'temp', 

     config : { 
      title : 'Temp', 
      cls : 'x-contacts', 
      disableSelection: true, 
      grouped : true, 
      store : 'YourStore', 
      ui : 'round', 
      cls:'modifiedHeader', 
      //custom css classname 
      itemTpl : ['<span>{field_name}</span>'].join('') 
     } 
    }); 

---

magasin:

Ext.define('app.store.YourStore', { 
     extend : 'Ext.data.Store', 

     config : { 
      model : 'app.model.Temp', 
      autoLoad : true, 
      storeId:'YourStore', 
      groupField: 'field_name', 

      proxy : { 
       type : 'ajax', 
       url : 'link/to/api' 
      } 
     } 
    }); 

---

app.css

.modifiedHeader .x-list-header { 
//your desired css here 
display:none;//If you want to hide the header 
}