Sencha Touch 2 DataView / List 分页

Sencha Touch 2的List的分页功能想必不用过多的介绍了,应该都了解,官方也有例子。

但是想直接把List的分页功能拷贝到DataView上，是不够完美的，存在一个小Bug，导致一直在加载中....

Uncaught TypeError: Object [object Object] has no method 'scrollDockHeightRefresh'

很明显DataView组件中没有这个功能，只有List中有，而分页插件却需要用到这个方法。

既然需要,切不理会什么用,那我们先给其加上。如何给DataView中添加这个方法呢?

很简单，在自定义组件中有介绍，添加方法，只需要在config{}后添加即可。

经测试，加入scrollDockHeightRefresh方法后，问题解决。

完整代码：

 

Ext.define('PLM.store.Product', {
    extend: 'Ext.data.Store',
    config: {
        fields: [
                    { name: 'productName', type: 'string' },
                    { name: 'designerId', type: 'string' },
                    { name: 'orderno', type: 'string' },
                    { name: 'state', type: 'string' },
                    { name: 'wfname', type: 'string' },
                    { name: 'desimgs', type: 'string' },
                    { name: 'desimgb', type: 'string' },
                    { name: 'smpimgs', type: 'string' },
                    { name: 'smpimgb', type: 'string' },
                    { name: 'Ida2a2', type: 'string' },
                    { name: 'pvr', type: 'string' }
                ],
        proxy: {
            type: "ajax",
            url: "/View/Reports/restful/SearchProduct",
            reader: {
                type: "json",
                rootProperty: "root",
                totalProperty: "totalCount"
            }
        },
        pageSize: 50,
        autoLoad: false
    }
});


Ext.define('PLM.view.Product', {
    extend: 'Ext.DataView',
    alias: 'Product',
    requires: [
       'PLM.store.Product'
    ],
    config: {
        id:'ViewProduct',
        fullscreen: true,
        showAnimation: {
            type: 'slide',
            direction: 'left'
        },
        hideAnimation: {
            type: 'slideOut',
            direction: 'right'
        },
        items: [
            {
                xtype: 'toolbar',
                docked: 'top',
                id: 'productviewtb',
                items: [
                    {
                        xtype: 'button',
                        ui: 'back',
                        text: '返回品类列表',
                        action:'BackCategory'
                    },
                    {
                        xtype: 'spacer'
                    }
                    ,
                    {
                        xtype: 'segmentedbutton',
                        margin: '0 10 0 0',
                        items: [
                            {
                                xtype: 'button',
                                text: '按款号排序',
                                action: 'SortBySKC'
                            },
                            {
                                xtype: 'button',
                                text: '按设计Id排序',
                                action: 'SortByDesignId'
                            }
                        ]
                    },
                    {
                        xtype: 'segmentedbutton',
                        id: 'segBtnImageType',
                        items: [
                            {
                                xtype: 'button',
                                id: 'BtnDesignImg',
                                text: '设计草图',
                                ui: 'confirm',
                                action: 'DesignImg'
                            },
                            {
                                xtype: 'button',
                                text: '样衣图片',
                                ui: 'confirm',
                                action: 'SampleImg'
                            }
                        ]
                    }
                ]
            }],
        store: 'Product',
        emptyText: '没有找到数据,请检查条件！',
        padding: 30,
        plugins: [
            {
                xclass: 'Ext.plugin.ListPaging',
                noMoreRecordsText: '没有更多记录了',
                loadMoreText: '更多',
                autoPaging: true
            }
        ]
    },
    scrollDockHeightRefresh: function () {
        
    }
});