extjs ग्रिड पैनल के केंद्र में "कोई डेटा उपलब्ध नहीं" संदेश कैसे दिखाना है?

Question

मैं दिखाने के लिए कोई डेटा नहीं होने पर ग्रिड में "कोई डेटा उपलब्ध नहीं" संदेश दिखा रहा हूं। लेकिन डिफ़ॉल्ट रूप से यह ग्रिड के ऊपरी बाएं कोने पर दिखा रहा है। मैं यह संदेश ग्रिड व्यू के केंद्र में चाहता हूं।

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

मैं इस तरह अधिभावी शैली से करने की कोशिश की:

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

लेकिन यह काम नहीं किया यहाँ कोड है।

Answer 1

मामूली संशोधन मेरे लिए काम किया ... deferEmptyText को बाहर रखकर दृश्य कॉन्फ़िगर करें।

deferEmptyText: झूठे, viewConfig: { emptyText: 'कोई डाटा उपलब्ध' }

Answer 2

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

Answer 3

ध्यान दें कि आप भी emptyText परिभाषा HTML का उपयोग कर सकते हैं, जो जब कुछ अच्छा सीएसएस के साथ मिलान कर सकते हैं बातें बनाने सुपर अच्छे लग रहे:

:

 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 : 'customgrid' के लिए अपने ग्रिड से एक cls जोड़ने के लिए, है। उसके बाद, निम्नलिखित सीएसएस नियम बनाएं:

.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