come mostrare il messaggio "Nessun dato disponibile" al centro del pannello della griglia di extjs?

Question

Sto visualizzando il messaggio "Nessun dato disponibile" nella griglia quando non ci sono dati da mostrare, ma per impostazione predefinita viene visualizzato nell'angolo in alto a sinistra della griglia. Voglio questo messaggio al centro della griglia. Ecco il codice:

viewConfig : { 
    deferEmptyText: false, 
    emptyText: 'No data Available' 
} 

ho provato dallo stile prioritario in questo modo:

.x-grid-empty { 
    text-align: center; 
    padding-top: 130px !important; 
} 

, ma non ha funzionato.

Answer 1

modifica lieve ha funzionato per me ... posizionando deferEmptyText all'esterno di viewConfig.

deferEmptyText: false, viewConfig: { emptyText: 'Non sono disponibili dati' }

Answer 2

var grid = Ext.create('Ext.grid.Panel', { 
    viewConfig: { emptyText: 'no_data' }, 
    store: ..., 
    columns:[ 
       .... 
    ], 
    width: ..., 
    renderTo: Ext.getBody() 
}); 

Answer 3

noti che è possibile anche usare l'HTML nella definizione emptyText che, se abbinato con qualche bella CSS, può rendere le cose sembrano super bello:

 viewConfig: { 
      preserveScrollOnRefresh: true, 
      deferEmptyText   : true, 
      emptyText    : '<div class="grid-data-empty"><div data-icon="/" class="empty-grid-icon"></div><div class="empty-grid-headline">Nothing to see here</div><div class="empty-grid-byline">There are no records to show you right now. There may be no records in the database or your filters may be too tightly defined.</div></div>' 
     } 

si può anche cambiare l'emptyText in base alle condizioni della rete:

me.store.on('load', function(s, recs){ 
     if (recs.length == 0) me.getView().emptyText = me.storeEmptyText; 
     else me.getView().emptyText = me.filtersEmptyText; 
     me.getView().refresh(); 
    }); 

Quanto sopra cambierà il testo vuoto in base al fatto se il tuo negozio è effettivamente privo di dati o se hai appena applicato filtri al punto che non ci sono più record da visualizzare. Usiamo questo per cambiare la messaggistica da qualcosa del tipo:

"Non ci sono contenuti da mostrare."

a:

"I tuoi filtri sono un po 'troppo rigida Prova allentando un po'.".

Answer 4

Per fare questo lavoro, si deve aggiungere un cls alla griglia, per esempio cls : 'customgrid'. Dopo di che, creare la seguente regola CSS:

.customgrid .x-grid-empty { 
    position: absolute; 
    top: 50%; 
    width: 100%; 
    text-align: center; 
} 

e si dovrebbe vedere il testo vuota centrato.

Ecco un esempio di codice e un violino:

Ext.create('Ext.data.Store', { 
     storeId:'simpsonsStore', 
     fields:['name'], 
     data: [], 
     proxy: { 
      type: 'memory', 
      reader: 'array' 
     } 
    }); 


    Ext.create('Ext.grid.Panel', { 
     margin: 10, 
     store: 'simpsonsStore', 
     cls: 'customgrid', 
     border: true, 
     columns: [ 
      {header: 'Name', dataIndex: 'name', flex: true} 
     ], 
     viewConfig: { 
      deferEmptyText: false, 
      emptyText: 'No data Available', 
     }, 
     height: 200, 
     width: 400, 
     renderTo: Ext.getBody() 
    }); 

https://fiddle.sencha.com/#fiddle/bvp