列出来自json的分页

时间:2011-11-09 11:24:00

标签: list paging extjs

我最终能够从json文件中检索我的数据但是寻呼系统仍然很糟糕。当我按下列表底部出现的加载更多插件文本时,pageSize属性似乎没有响应,它每次都将我的所有json元素附加到我的列表中。我很自信我几乎就在那里,但我看不出如何实现它。

以下是代码:

Ext.setup({

tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
icon: 'icon.png',
glossOnIcon: false,

onReady : function() {

    var dataLink;
    if (Ext.is.Desktop) {
        dataLink = "http://127.0.0.1/Appsfan-v2";
    } else {
        dataLink = "http://appsfan.kreactive.eu";
    }

    Ext.regModel('Profile', {
        fields: [
            {name: 'firstname', type: 'string'},
            {name: 'lastname', type: 'string'},
            {name: 'age', type: 'number'}
        ]
    });

    var store = new Ext.data.JsonStore({
        model: 'Profile',
        autoLoad: false,
        remoteFilter: true,
        sortOnFilter: true,
        //sorters: [{property : 'lastname', direction: 'ASC'}],
        pageSize: 1,
        clearOnPageLoad: false,
        proxy: {
            type: 'ajax',
            url: dataLink+'/data.json',
            reader: {
                root: 'profile',
                type: 'tree'
            }
        }
    });
    console.log(store)

    //console.log(store.loadPage(0))

    var groupingBase = new Ext.List({
        fullscreen: true,
        itemTpl: '<div class="contact2"><strong>{firstname}</strong> {lastname} -> {age}</div>',
        indexBar: false,
        store: store,
        plugins: [{
            ptype: 'listpaging',
            autoPaging: false
        }]
    });



   var panel = new Ext.Panel({
        layout: 'card',
        fullscreen: true,
        items: [groupingBase],
        dockedItems: [{
            xtype: 'toolbar',
            title: 'paging example',
        }]
    })
   //console.log(datas)
}
});

json

{
"profile": [{
    "firstname": "firstname1",
    "lastname": "lastname1",
    "age": "1"
},{
    "firstname": "firstname2",
    "lastname": "lastname2",
    "age": "2"
},{
    "firstname": "firstname3",
    "lastname": "lastname3",
    "age": "3"
}]
}

谢谢

1 个答案:

答案 0 :(得分:0)

您可以在商店中设置clearOnPageLoad配置选项。这将在加载分页数据的下一页时删除以前的记录。

以下是一个例子:

Ext.regStore('BarginsStore', {
    model: 'BarginModel',
    autoLoad: false,
    pageSize: 6,
    clearOnPageLoad: false,
});