ExtJS 4.1 Thanh cuộn vô hạn không hoạt động với cửa hàng động bằng cách sử dụng loadData

Question

Tôi phải tải bảng điều khiển lưới đầu tiên trên tab và sau đó tải dữ liệu vào cửa hàng bằng hàm loadData() đang hoạt động tốt, nhưng bây giờ, tôi phải tích hợp cuộn lưới vô hạn với nó. là bất kỳ cách nào để tích hợp cuộn vô hạn trên bay sau khi loadData vào cửa hàng ..? Tôi đang sử dụng ExtJS 4.1. Hãy giúp tôi ra ngoài. Ở đây tôi đang hiển thị tập lệnh hiện tại của tôi trong bảng điều khiển và bảng điều khiển chế độ xem trong đó tôi đã thử nhưng không hoạt động.

khiển Script như sau:

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

Mở kịch bản trên, một lần tôi nhận được Ajax trả lời cuộc gọi, thêm bảng điều khiển lưới với tabParams và truyền dữ liệu với gridConfig param mà sẽ được thiết lập các lĩnh vực và các cột cho lưới và sau đó cuối cùng báo cáo lưới cung cấp dữ liệu vào lưới. Tôi đã thử ra thiết lập bảng điều khiển lưới điện bằng cách làm theo ví dụ tham khảo: http://dev.sencha.com/deploy/ext-4.0.1/examples/grid/infinite-scroll.html

trên trang ở trên, bao gồm kịch bản =>http://dev.sencha.com/deploy/ext-4.0.1/examples/grid/infinite-scroll.js

My Lưới Bảng điều chỉnh Script như sau:

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

Tôi cũng đã xử lý bắt đầu và giới hạn từ truy vấn phía máy chủ nhưng nó sẽ không gửi yêu cầu ajax trên cuộn chỉ cần bắn cùng một lúc vì pageSize tài sản trong lưới là 100 và tham số cuộc gọi chức năng bảo đảm là 0,99 nếu tôi tăng 0,299 thì nó sẽ được kích hoạt ba cuộc gọi ajax cùng một lúc (0,100), (100.200) và (2 00,300) nhưng chỉ hiển thị dữ liệu trên lưới cho cuộc gọi ajax đầu tiên và không được kích hoạt trên cuộn dọc.

Vì, tôi là người học mới trên ExtJs, vì vậy hãy giúp tôi ... Cảm ơn rất nhiều ... đang nâng cao.

Answer 1

Bạn không thể gọi store.loadData với cửa hàng đệm/từ xa và triển khai lưới và mong đợi lưới phản ánh dữ liệu mới này.

Thay vào đó, bạn phải gọi store.load.

Ví dụ 1, lưu trữ đệm sử dụng store.load

Ví dụ này cho thấy việc sa thải store.on("load") sự kiện.

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) 

Ví dụ 2, lưu trữ tĩnh nhờ sủ dụng store.loadData

Bạn có thể nhìn thấy từ ví dụ này rằng sự kiện store.on("load") không bao giờ cháy.

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)