ExtJS 4.1 अनंत ग्रिड स्क्रॉलिंग लोडडाटा

Question

का उपयोग करके डायनामिक स्टोर के साथ काम नहीं करता है मुझे टैब पर पहला ग्रिड पैनल लोड करना होगा और फिर लोडडेटा() फ़ंक्शन का उपयोग करके स्टोर में डेटा लोड करना होगा जो ठीक काम कर रहा है, लेकिन अब, मुझे अनंत ग्रिड स्क्रॉलिंग को एकीकृत करना है इसके साथ। क्या स्टोर में लोडडेटा के बाद फ्लाई पर अनंत स्क्रॉलिंग को एकीकृत करने का कोई तरीका है ..? मैं ExtJS 4.1 का उपयोग कर रहा हूं। कृपया मेरी मदद करें .... यहां मैं अपनी वर्तमान स्क्रिप्ट नियंत्रक और पकड़ दृश्य पैनल में दिखा रहा हूं जिसमें मैंने कोशिश की है लेकिन काम नहीं कर रहा है।

नियंत्रक के रूप में नीचे स्क्रिप्ट:

var c = this.getApplication().getController('Main'), 
         data = c.generateReportGridConfiguration(response,true), 
         tabParams = { 
          title: 'Generated Report', 
          closable: true, 
          iconCls: 'view', 
          widget: 'generatedReportGrid', 
          layout: 'fit', 
          gridConfig: data 
         }, 
         generatedReportGrid = this.addTab(tabParams); 

generatedReportGrid.getStore().loadData(data.data); 

ऊपर स्क्रिप्ट पर, एक बार मैं अजाक्स कॉल प्रतिक्रिया मिल, tabParams साथ ग्रिड पैनल को जोड़ने और डेटा gridConfig परम जो ग्रिड के लिए खेतों और स्तंभों की स्थापना की जाएगी और उसके बाद पिछले के साथ पारित ग्रिड को कथन आपूर्ति ग्रिड डेटा।

Ext.define('ReportsBuilder.view.GeneratedReportGrid', { 
    extend: 'Ext.grid.Panel', 
    alias: 'widget.generatedReportGrid', 
    requires: [ 
     'ReportsBuilder.view.GenerateViewToolbar', 
     'Ext.grid.*', 
     'Ext.data.*', 
     'Ext.util.*', 
     'Ext.grid.PagingScroller', 
     'Ext.grid.RowNumberer',  
    ], 
    initComponent: function() { 
     Ext.define('Report', {extend: 'Ext.data.Model', fields: this.gridConfig.fields, idProperty: 'rowid'}); 

     var myStore = Ext.create('Ext.data.Store', {model: 'Report', groupField: 'name', 

      // allow the grid to interact with the paging scroller by buffering 
       buffered: true, 
       pageSize: 100, 
       autoSync: true, 
       extraParams: { total: 50000 }, 
       purgePageCount: 0, 
       proxy: { 
        type: 'ajax', 
        data: {}, 
        extraParams: { 
         total: 50000 
        }, 
        reader: { 
         root: 'data', 
         totalProperty: 'totalCount' 
        }, 
       // sends single sort as multi parameter 
       simpleSortMode: true 
       } 
     }); 
     Ext.apply(this, { 
       dockedItems: [ 
        {xtype: 'generateviewToolbar'} 
       ], 
       store: myStore, 
       width:700, 
       height:500, 
       scroll: 'vertical', 
       loadMask: true, 
       verticalScroller:'paginggridscroller', 
       invalidateScrollerOnRefresh: false, 
       viewConfig: { 
        trackOver: false, 
        emptyText: [ 
         '<div class="empty-workspace-bg">', 
         '<div class="empty-workspace-vertical-block-message">There are no results for provided conditions</div>', 
         '<div class="empty-workspace-vertical-block-message-helper"></div>', 
         '</div>' 
        ].join('') 
       }, 
       columns: this.gridConfig.columns, 
       features: [ 
        {ftype: 'groupingsummary', groupHeaderTpl: '{name} ({rows.length} Record{[values.rows.length > 1 ? "s" : ""]})', enableGroupingMenu: false} 
       ], 
       renderTo: Ext.getBody() 
     }); 
    // trigger the data store load 
    myStore.guaranteeRange(0, 99); 
    this.callParent(arguments); 
    } 
}); 

मैं भी संभाला है शुरू: नीचे के रूप में http://dev.sencha.com/deploy/ext-4.0.1/examples/grid/infinite-scroll.html

उपरोक्त पृष्ठ पर

, शामिल स्क्रिप्ट =>http://dev.sencha.com/deploy/ext-4.0.1/examples/grid/infinite-scroll.js

मेरे ग्रिड पैनल स्क्रिप्ट: मैं निम्नलिखित संदर्भ उदाहरण के द्वारा ग्रिड पैनल सेटिंग्स बाहर की कोशिश की है और सर्वर साइड क्वेरी से सीमित है लेकिन यह स्क्रॉल पर AJAX अनुरोध नहीं भेज रहा है, केवल एक बार में निकाल दिया गया है क्योंकि पृष्ठ ग्रिड में आकार का आकार 100 है और गारंटी रेंज कॉल कॉल पैराम्स 0,99 हैं यदि मैं 0,29 9 बढ़ा दूंगा तो इसे एक बार में तीन AJAX कॉल निकाल दिया जाएगा (0,100), (100,200) और (2 00,300) लेकिन केवल पहले AJAX कॉल के लिए ग्रिड पर डेटा दिखा रहा है और लंबवत स्क्रॉलिंग पर नहीं निकाल दिया गया है।

जैसा कि, मैं ExtJs पर नया शिक्षार्थी हूं, इसलिए कृपया मेरी मदद करें ... धन्यवाद बहुत..in उन्नत।

Answer 1

आप रिमोट/बफर्ड स्टोर और ग्रिड कार्यान्वयन के साथ store.loadData पर कॉल नहीं कर सकते हैं और ग्रिड को इस नए डेटा को प्रतिबिंबित करने की उम्मीद करते हैं।

इसके बजाय, आपको store.load पर कॉल करना होगा।

उदाहरण 1, बफ़र दुकान store.load

का उपयोग कर इस उदाहरण store.on("load") घटना फायरिंग को दर्शाता है।

http://codepen.io/anon/pen/XJeNQe?editors=001

;(function(Ext) { 
    Ext.onReady(function() { 
    console.log("Ext.onReady") 

    var store = Ext.create("Ext.data.Store", { 
     fields: ["id", "name"] 
     ,buffered: true 
     ,pageSize: 100 
     ,proxy: { 
     type: 'rest' 
     ,url: '/anon/pen/azLBeY.js' 
     reader: { 
      type: 'json' 
     } 
     } 
    }) 
    store.on("load", function(component, records) { 
     console.log("store.load") 
     console.log("records:") 
     console.log(records) 
    }) 

    var grid = new Ext.create("Ext.grid.Panel", { 
     requires: ['Ext.grid.plugin.BufferedRenderer'] 
     ,plugins: { 
     ptype: 'bufferedrenderer' 
     } 
     ,title: "people" 
     ,height: 200 
     ,loadMask: true 
     ,store: store 
     ,columns: [ 
     {text: "id", dataIndex: "id"} 
     ,{text: "name", dataIndex: "name"} 
     ] 
    }) 
    grid.on("afterrender", function(component) { 
     console.log("grid.afterrender") 
    }) 
    grid.render(Ext.getBody())  

    store.load() 
    }) 
})(Ext) 

उदाहरण 2, स्थिर दुकान store.loadData

का उपयोग कर आप इस उदाहरण है कि store.on("load") घटना कभी नहीं आग से देख सकते हैं।

http://codepen.io/anon/pen/XJeNQe?editors=001

;(function(Ext) { 
    Ext.onReady(function() { 
    console.log("Ext.onReady") 

    var store = Ext.create("Ext.data.Store", { 
     fields: ["id", "name"] 
     ,proxy: { 
     type: 'rest' 
     ,reader: { 
      type: 'json' 
     } 
     } 
    }) 
    store.on("load", function(component, records) { 
     console.log("store.load") 
     console.log("records:") 
     console.log(records) 
    }) 

    var grid = new Ext.create("Ext.grid.Panel", { 
     title: "people" 
     ,height: 200 
     ,store: store 
     ,loadMask: true 
     ,columns: [ 
     {text: "id", dataIndex: "id"} 
     ,{text: "name", dataIndex: "name"} 
     ] 
    }) 
    grid.on("afterrender", function(component) { 
     console.log("grid.afterrender") 
    }) 
    grid.render(Ext.getBody()) 

    var data = [ 
     {'id': 1, 'name': 'Vinnie'} 
     ,{'id': 2, 'name': 'Johna'} 
     ,{'id': 3, 'name': 'Jere'} 
     ,{'id': 4, 'name': 'Magdalena'} 
     ,{'id': 5, 'name': 'Euna'} 
     ,{'id': 6, 'name': 'Mikki'} 
     ,{'id': 7, 'name': 'Obdulia'} 
     ,{'id': 8, 'name': 'Elvina'} 
     ,{'id': 9, 'name': 'Dick'} 
     ,{'id': 10, 'name': 'Beverly'} 
    ] 

    store.loadData(data) 
    }) 
})(Ext)