Прокрутка событий в TouchGridPanel

Question

Я создаю мобильное приложение, используя Sencha Touch 1.0. Мне нужно отобразить отчет, потому что я использую сетку, заданную Ext.ux.TouchGridPanel. Он работает нормально.

Где мне нужно захватить событие прокрутки в Ext.ux.TouchGridPanel. Я добавил «свиток» в событие пузыря Dataview. Я также пытаюсь захватить событие после создания Dataview.

Но ничего не работает. Ниже приведен код, который я изменил.

Кто-нибудь знает, как захватить начало события прокрутки?

Заранее спасибо.

Ext.ux.TouchGridPanel = Ext.extend(Ext.Panel, { 
layout: "fit", 

multiSelect: false,  

initComponent: function() { 
    var me = this; 

    me.items = me.dataview = me.buildDataView(); 

    Ext.ux.TouchGridPanel.superclass.initComponent.call(me); 

    var store = me.store; 
    store.on("update", me.dispatchDataChanged, me); 

    var dataview = me.dataview;   
    dataview.on('scroll', me.startScroll); 
}, 

dispatchDataChanged: function (store, rec, operation) { 
    var me = this; 

    me.fireEvent("storeupdate", store, rec, operation); 
}, 

startScroll: function (scroller, offset) { 
    console.log('is this event captured???') 
    var me = this; 
    me.fireEvent("scroll", this.scroller, offset); 
}, 


buildDataView: function() { 
    var me = this, colModel = me.colModel, colNum = me.getColNum(false), cellWidth = 100/colNum, 
    colTpl = '<div class="x-grid-head">'; 
    colTpl += '<thead><tr class="x-grid-header">'; 

    for (var i = 0; i < colModel.length; i++) { 
     var col = colModel[i]; 
     var width = (Ext.isDefined(col.width)) ? ("width =" + (col.width - 4) + "%") : ''; 
     colTpl += '<th class="x-grid-cell" ' + width + ' style="' + col.style + '" >' + col.header + '</th>'; 
    } 
    colTpl += '</tr></thead>'; 
    colTpl += '<tbody ><tpl for="."><tr class="x-grid-row">'; 
    for (var i = 0; i < colModel.length; i++) { 
     var col = colModel[i]; 
     var width = (Ext.isDefined(col.width)) ? ("width =" + col.width + "%") : ''; 
     colTpl += '<td class="x-grid-cell" style="' + col.style + '" >{' + col.mapping + '}</td>'; 
    } 
    colTpl += '</tr></tpl></tbody>'; 

    colTpl += '</table></div>' 

    return new Ext.DataView({ 
     store: me.store, 
     itemSelector: "tr.x-grid-row", 
     simpleSelect: me.multiSelect, 
     scroll: me.scroll, 
     tpl: new Ext.XTemplate(colTpl, 
      { 
       isRowDirty: function (dirty, data) { 
        return dirty ? "x-grid-row-dirty" : ""; 
       } 
      } 
     ), 
     prepareData: function (data, index, record) { 
      var column, 
       i = 0, 
       ln = colModel.length; 
      var prepare_data = {}; 
      prepare_data.dirtyFields = {}; 
      for (; i < ln; i++) { 

       column = colModel[i]; 
       if (typeof column.renderer === "function") { 
        prepare_data[column.mapping] = column.renderer.apply(me, [data[column.mapping], column, record, index]); 
       } else { 
        prepare_data[column.mapping] = data[column.mapping]; 
       } 
      } 

      prepare_data.isDirty = record.dirty; 

      prepare_data.rowIndex = index; 
      return prepare_data; 
     }, 
     bubbleEvents: [ 
      "beforeselect", 
      "containertap", 
      "itemdoubletap", 
      "itemswipe", 
      "itemtap", 
      "selectionchange", 
        "scroll" 
     ] 

    }); 
}, 


// @private 
onScrollStart: function() { 
    console.log("Are you coming here"); 
    var offset = this.scroller.getOffset(); 
    this.closest = this.getClosestGroups(offset); 
    this.setActiveGroup(this.closest.current); 
}, 

// @private 
onScroll: function (scroller, pos, options) { 

} 

});

Ext.reg ("touchgridpanel", Ext.ux.TouchGridPanel);

Answer 1

Мы можем напрямую обратиться к скроллеру dataview и проверить его событие.

Для примера.

newGrid = new Ext.ux.TouchGridPanel({.... 

после создания панели просто получить доступ к его DataView скроллер

newGrid.dataview.scroller.on('scroll', scrollGrid1);  

var scrollGrid1 = function(scroller, offsets){ 
    console.log(' Grid scrolling with offset ' + offsets.x + ' & ' + offsets.y); 
}