0

我正在使用 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);

4

1 回答 1

0

We can directly access dataview scroller and check event of the same.

For eg.

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

after creation of the Panel just access its dataview scroller

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

var scrollGrid1 = function(scroller, offsets){   
  console.log(' Grid scrolling with offset ' + offsets.x + ' & ' + offsets.y);
}
于 2012-05-24T09:19:45.537 回答