extjsグリッドパネルの中央に「データがありません」というメッセージを表示する方法は？

Question

データが表示されていないときにグリッドに「No data available」というメッセージが表示されていますが、デフォルトではグリッドの左上隅に表示されます。私はグリッドビューの中心にこのメッセージが必要です。

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

私はこのようなスタイルをオーバーライドしてみました：

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

が、それはうまくいきませんでしたここ はコードです。

Answer 1

私は少し修正しました... deferEmptyTextをviewConfigの外側に配置することで、

deferEmptyText：偽、 viewConfig：{ emptyText： 'データなし' }あなたはまた、いくつかの素晴らしいCSSに合わせた、emptyText定義でHTMLを使用することができます

Answer 2

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

Answer 3

注意、することができます物事は超素敵に見えるように：

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

上記の説明では、ストアに実際にデータが存在しないかどうか、または表示するレコードがなくなるまでフィルタを適用しただけでemptyTextが変更されます。これを使用してメッセージを次のようなものに変更します：

「表示するコンテンツはありません」

へ：

「あなたのフィルターは少しも厳しいそれらを少し緩めてみてください。。」

Answer 4

、この作業を行うには、たとえばcls : 'customgrid'のために、あなたのグリッドにclsを追加する必要があります。 はその後、以下の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