ExtJS 4.1 무한 눈금 스크롤은 loadData를 사용하여 동적 저장소에서 작동하지 않습니다

Question

탭에서 첫 번째 그리드 패널을로드 한 다음 잘 작동하는 loadData() 함수를 사용하여 데이터를 저장소로로드해야하지만 지금은 무한 눈금 스크롤링을 통합해야합니다. 그것으로. 무한 스크롤을 loadData 후 플라이 (fly)에서 스토어에 통합하는 방법은 무엇입니까? ExtJS 4.1을 사용하고 있습니다. 제발 도와주세요 .... 컨트롤러와 그립 뷰 패널에서 현재 사용중인 스크립트를 보여 드리고 있습니다. 시도했지만 작동하지 않습니다. 아래

컨트롤러 스크립트 : 내가 Ajax 호출 응답을 일단 위 스크립트에

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의 PARAM 데이터를 전달 문은 모눈에 모눈 데이터를 제공합니다. 나는 또한 처리 한

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.js

내 그리드 패널 스크립트 포함, 위의 페이지 http://dev.sencha.com/deploy/ext-4.0.1/examples/grid/infinite-scroll.html

: 나는 다음 참조 예에 의해 그리드 패널 설정을 시도 그리고 서버 측 쿼리에서 제한하지만, 그리드의 pageSize 속성이 100이고 guaranteeRange 함수 호출 매개 변수가 0,99이기 때문에 한 번에 실행 된 스크롤에 대해 아약스 요청을 전송하지 않습니다. 0,299를 증가 시키면 한 번에 세 번 아약스 호출이 발생합니다 (0,100), (100,200) 및 (2 00,300), 첫 번째 아약스 호출에 대해서만 그리드에 데이터를 표시하고 세로 스크롤에는 발생하지 않습니다.

저는 ExtJs에 새로운 학습자입니다. 그래서 제발 도와주세요. 고맙습니다.

Answer 1

원격/버퍼 된 저장소 및 그리드 구현을 사용하여 store.loadData을 호출 할 수 없으며 그리드에이 새 데이터가 반영 될 것으로 기대할 수 없습니다.

대신 store.load으로 전화해야합니다.

예 1 완충 저장소이 예 store.on("load") 이벤트 소성을 도시 store.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.on("load") 이벤트가 발사 결코이 예에서 볼 수 store.loadData

를 사용하여. (무엇보다도) 내 경험에서

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)