Как показать сообщение «Нет данных» в центре панели сетки extjs?

Question

Я показываю сообщение «Нет данных» в сетке, когда нет данных для show.but, по умолчанию его показ в верхнем левом углу сетки. Я хочу, чтобы это сообщение было в центре сетки. вот код:

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

Я попытался Переопределелив стиль, как это:

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

, но это не сработало.

Answer 1

легкая модификация работала для меня ... путем размещения deferEmptyText снаружи viewConfig.

deferEmptyText: ложь, viewConfig: { emptyText: 'Нет данных' }

Answer 2

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

Answer 3

Обратите внимание, что вы также можете использовать HTML в определении emptyText, которые, при сопоставлении с некоторым хорошим CSS, может делают вещи выглядят очень красиво:

 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>' 
     } 

Вы можете даже изменить emptyText в зависимости от условий сети:

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(); 
    }); 

Вышеизложенное изменит пустой текст на основе того, действительно ли ваш магазин лишен данных, или если вы только что применили фильтры к тому, что больше нет записей для отображения. Мы используем это для обмена сообщениями от чего-то вроде:

«Нет контента, чтобы показать вам».

к:

«Ваши фильтры слишком строги Попробуйте ослабив их немного.».

Answer 4

Чтобы сделать эту работу, вы должны добавить cls к сетке, например cls : 'customgrid'. После этого, создайте следующее правило CSS:

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

И вы должны увидеть пустой текст по центру.

Вот пример кода, и скрипку:

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