Question

是否可以使用EXT-JS API实现facebook或链接无限滚动。我知道无限网格虽然我的要求是无限地滚动面板就像facebook或链接允许我们。截至目前，我正在研究EXT第5版。任何链接/白皮书将不胜感激。提前致谢萨米尔

Answer 1

您可以使用绑定了商店的dataview来加载墙上的初始数据。然后，在controller中添加一个scroll事件的监听器，并检查滚动何时到达结束。

我之前正在创建一个具有该功能的reddit应用程序，尽管它从未完成/完全审查过。下面是滚动回调的片段，基本上我启动了ajax请求，然后将返回的数据加载到当前商店数据的 end ：

mainPanelRendered: function () {
        var p = Ext.ComponentQuery.query('yourDataView')[0];
        var s = p.getStore();
        //check on scroll if we've reached the end of the dataview
        p.getTargetEl().on('scroll', function (e, t) {
            var height = p.getTargetEl().getHeight();
            if (height + t.scrollTop >= t.scrollHeight) { //Fire method to load more data to the store.
                p.setLoading(true);
                Ext.data.JsonP.request({
                    callbackKey:'jsonp',
                    url: s.proxy.url,
                    params: {
                        'count': 25,
                        'after': p.after
                    },
                    headers: { 'Content-type': 'text/json;  charset=utf-8', 'Accepts': 'text/json' },
                    reader: {
                        type: 'json',
                        root: 'data.children',
                        successProperty: 'success'
                    },
                    success: function (response) {
                        p.after = response.data.after;
                        //now that you have more data add it to the store
                        Ext.each(response.data.children, function (article) {
                            var data = article.data;
                            try{
                                s.add({
                                    id: data.id,
                                    domain: data.domain,
                                    subreddit: data.subreddit,
                                    author: data.author,
                                    over_18: data.over_18,
                                    thumbnail: data.thumbnail,
                                    subreddit_id: data.subreddit_id,
                                    downs: data.downs,
                                    ups: data.ups,
                                    permalink: data.permalink,
                                    name: data.name,
                                    url: data.url,
                                    title: data.title,
                                    num_comments: data.num_comments,
                                    score: data.score
                                });
                            } catch (ex) {
                                //do nothing the item already existed
                            }
                            //s.add(item);
                            //newItems[i] = item;
                            //i++;
                        });
                        p.setLoading(false);
                        //p.after = p.response.data.after;
                    }
                });

            }
        });
    },

here is a link to my not-so-complete app's source。同样，它肯定没有完全审查，但应该让你知道如何添加无限滚动。签出视图中的mainPanel和控制器中的render事件。

Facebook喜欢无限滚动

1 个答案: