ग्रिड के बाद प्रक्रिया पूरी तरह से ExtJS

Question

का उपयोग करके लोड की गई थी, मैं ग्रिड में डेटा लोड करने के लिए ExtJS का उपयोग कर रहा हूं, और ग्रिड पर डेटा डालने के बाद मैं कुछ अतिरिक्त प्रक्रियाएं जोड़ना चाहता हूं।

मेरा संदर्भ है, डेटा ग्रिड पर डालने के बाद, मैं सभी पंक्तियों की जांच करूंगा, और उनमें से कुछ को निर्दिष्ट शर्त के आधार पर अक्षम के रूप में चिह्नित कर सकता हूं और टूलटिप को पंक्ति में डाल सकता हूं (समझाएं कि यह अक्षम क्यों है)। मैंने 2 घटनाओं का उपयोग करने की कोशिश की: ग्रिड के 'बाद में', और ग्रिड की दुकान के 'लोड', लेकिन वे काम नहीं कर पाए।

क्योंकि grid's 'afterrender' को पहली ग्रिड प्रारंभिकता के दौरान निकाल दिया गया था, डेटा लोड के लिए चिंता नहीं। store's 'load' को निकाल दिया गया था जब डेटा स्टोर करने के लिए प्रीफ़ेच था (स्क्रीन पर प्रस्तुत नहीं किया गया था), इसलिए मुझे इसे <div> पंक्ति को अक्षम करने के लिए पंक्ति नहीं मिल सकती है।

तो, डेटा लोड होने पर ग्रिड पर पूरी तरह से प्रस्तुत होने पर यह पता लगाने की घटना क्या है? और मैं इस आवश्यकता को कैसे कार्यान्वित कर सकता हूं?

Answer 1

मुझे लगता है कि कॉल करने के लिए जब तक ग्रिड लोड किया जाता है प्रतीक्षा करने की आवश्यकता नहीं है, लेकिन बल्कि कैसे वास्तव में अपनी पंक्तियों को प्रदर्शित करने के लिए कॉन्फ़िगर करने के लिए ग्रिड पैनल के लिए viewConfig विकल्प का उपयोग:

viewConfig: { 
    getRowClass: function(r) { 
     if (r.get('disabled')) 
     return 'disabled-class'; 
     else 
     return ''; 
    } 
} 

Answer 2

क्या आपने viewready को आजमाया है?

Ext.create('Ext.grid.Panel', { 
    // ... 
    viewConfig: { 
     listeners: { 
      viewready: function(view) { 
       // ... 
      } 
     } 
    } 
}); 

Answer 3

सफलता का उपयोग करें:। लोड() getForm() पर संपत्ति एक समारोह को संभालने के लिए क्या आप कार्य के लिए पोस्ट लोड प्रसंस्करण

Answer 4

आप setTimeout समारोह यह कॉल प्रतिपादन के बाद क्या करने के लिए मजबूर हो जाएगा समाप्त हो गया है का उपयोग करते हैं, यह एक इसी तरह के मामले मैं में काम किया तुम्हारा था

listeners: { 
    'afterrender': function(grid) { 
      setTimeout(function(){ 
      // ... 

Answer 5

आप सीधे दुकान के load घटना का दोहन, या ग्रिड के माध्यम से घटना रिले सकता है।

ग्रिड वर्ग के अंदर, शायद initComponent समारोह में, निम्नलिखित शब्दों में कहें,

this.relayEvents(this.getStore(), [ 'load' ]); 

Answer 6

viewready मेरे लिए काम किया !!!

नियंत्रक में नीचे के रूप में कॉन्फ़िगर:

Ext.define('App.controller.Dashboard', { 
    extend: 'Ext.app.Controller', 
    init: function() { 
    this.control({ 
     '#summary-bottom-grid': { 
      viewready: function(cmp){ 
       var link = Ext.DomQuery.selectNode('span.summary-status',cmp.body.dom); 
      } 
      } 
    });  
    } 
} 

Answer 7

मैं ExtJS 4.2.3 का उपयोग करें और यह काम किया।

this.grid = Ext.create('Ext.grid.Panel',{ 
    store: this.ds, 
    margins: '0 0 0 10', // top right button left 
    title: lng.menu.caption.mailHeaderGrid, 
    selType: 'checkboxmodel', 
    columns:[...], 
    selModel: { 
     renderer: function(value, metaData, record, rowIndex, colIndex, store, view) { 
      var baseCSSPrefix = Ext.baseCSSPrefix; 
      metaData.tdCls = baseCSSPrefix + 'grid-cell-special ' + baseCSSPrefix + 'grid-cell-row-checker'; 
      return (record.get('status') =='lng.label.surveyFinalized') ? '' : '<div class="' + baseCSSPrefix + 'grid-row-checker"> </div>'; 
     }, 
    }, 

मेरे लिए क्रोम पर काम करता है:

मैं इस प्रयोग किया जाता है!

https://www.sencha.com/forum/showthread.php?237641-How-to-hide-certain-checkbox-in-a-CheckboxSelectionModel

Answer 8

मुझे पता है यह एक पुराने सवाल है, लेकिन मैं हाल ही में एक पुराने ExtJS (4.0.2) अनुप्रयोग में एक स्क्रॉल समस्या को ठीक करने के लिए किया था और मैं जब एचटीएमएल के लिए एक ट्रिगर/घटना की जरूरत है (जैसे < तालिका > टैग) वास्तव में ग्रिड व्यू में अद्यतन/डाला गया था।

निम्न स्क्रिप्ट Ext.grid.View में नया "अपडेट" ईवेंट जोड़ती है। एचटीएमएल को देखने में डालने के बाद अपडेट इवेंट निकाल दिया गया है।

(function(){ 
    var _setNewTemplate = Ext.grid.View.prototype.setNewTemplate; 
    Ext.override(Ext.grid.View, { 
     setNewTemplate: function(){ 

      _setNewTemplate.apply(this, arguments); 

      var view = this; 
      var template = this.tpl; 
      template.overwrite = function(el, values, returnElement){ 
       el = Ext.getDom(el); 
       el.innerHTML = template.applyTemplate(values); 
       view.fireEvent("update", view, el); //<--New Event! 
       return returnElement ? Ext.get(el.firstChild, true) : el.firstChild; 
      }; 

      template.doInsert = function(where, el, values, returnEl) { 
       el = Ext.getDom(el); 
       var newNode = Ext.core.DomHelper.insertHtml(where, el, template.applyTemplate(values)); 
       view.fireEvent("update", view, el); //<--New Event! 
       return returnEl ? Ext.get(newNode, true) : newNode; 
      } 

     } 
    }); 
})(); 

नई घटना का उपयोग करने के लिए, आप बस ग्रिड व्यू में एक नया ईवेंट श्रोता जोड़ें। उदाहरण:

paymentGrid.view.on("update", function(view, el){ //vs paymentGrid.store.on("load", ... 

    //do something... 
    console.log(el); 

}, this); 

ध्यान दें कि यह ExtJS 4.0.2 का उपयोग करके लागू किया गया था। आपको ExtJS के अपने संस्करण के लिए स्क्रिप्ट को अपडेट करने की आवश्यकता हो सकती है।

अद्यतन

मैंने पाया कि नया "अद्यतन" घटना फायरिंग नहीं किया गया था जब एक दृश्य के एक खाली दुकान प्रतिपादन किया गया था। एक कामकाज के रूप में, मैंने दृश्य की रीफ्रेश विधि को बढ़ाया।

(function(){ 
    var _refresh = Ext.grid.View.prototype.refresh; 
    Ext.override(Ext.grid.View, { 
     refresh: function() { 
      _refresh.apply(this, arguments);     

      var view = this; 
      var el = view.getTargetEl(); 
      var records = view.store.getRange(); 

      if (records.length < 1) {      
       view.fireEvent("update", view, el); //<--New Event! 
      } 
     } 
    }); 
})();