如何在extjs網格面板的中心顯示「No data available」消息？

當沒有要顯示的數據時，我在網格中顯示「無數據可用」消息。但默認顯示在網格的左上角。我想要這個消息在網格視圖的中心。這裏是代碼：如何在extjs網格面板的中心顯示「No data available」消息？

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

我試圖壓倒一切的風格是這樣的：

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

，但沒有奏效。

來源

2013-10-09 Gan

嗯，這對我的作品：https://fiddle.sencha.com/#fiddle/sg – existdissolve

@existdissolve然後你應該把它作爲答案 – Mchl

對我稍作修改...通過將deferEmptyText放置在viewConfig外部。

deferEmptyText：假的， viewConfig：{ emptyText： '無可用數據' }

來源

2013-10-10 05:25:14 Gan

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

來源

2013-10-10 08:45:09 Eren

請注意，您還可以在emptyText定義中使用的HTML，它在與一些漂亮的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(); 
    });

上面的內容將根據您的商店是否實際上沒有數據或者您是否已將過濾器應用到沒有更多記錄要顯示的位置來更改空文本。我們用這個來改變類似的消息：

「沒有內容可以顯示你。」

到：

「你的過濾器是有點過於嚴格試着鬆開他們一點點。」

來源

2014-10-17 16:40:59 slashwhatever

爲了使這項工作，你有一個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

來源

2014-10-17 17:33:28

如何在extjs網格面板的中心顯示「No data available」消息？

回答

相關問題