永不唁败 2011-08-03 14:01
浏览 284
已采纳

Ext4.0.2a的Paging Toolbar

不好意思,我是剛學Ext的新手~不太懂...

這是我js代碼
/**

  • @example Paging Toolbar *
  • This example demonstrates loading data in pages dynamically from the server using a {@link Ext.toolbar.Paging Paging Toolbar}.
  • Note, that since there is no back end (data is loaded from a static file at data/users.json) each page will show the same data set. */ Ext.require('Ext.data.Store'); Ext.require('Ext.grid.Panel'); Ext.require('Ext.toolbar.Paging');

Ext.define('User', {
extend: 'Ext.data.Model',
fields: [ 'name', 'email', 'phone' ]
});

Ext.onReady(function() {

var userStore = Ext.create('Ext.data.Store', {
    model: 'User',
    autoLoad: true,
    pageSize: 4,
    proxy: {
        type: 'ajax',
        url : 'data/users.json',
        reader: {
            type: 'json',
            root: 'users',
            totalProperty: 'total'
        }
    }
});

// specify segment of data you want to load using params,這邊是我看到網路上的,自己加的,想要讓他數據變得一樣
userStore.load({
params:{
start:0,

limit: 4
}
});

Ext.create('Ext.grid.Panel', {
    renderTo: Ext.getBody(),
    store: userStore,
    width: 400,
    height: 200,
    title: 'Application Users',
    columns: [
        {
            text: 'Name',
            width: 100,
            dataIndex: 'name'
        },
        {
            text: 'Email Address',
            width: 150,
            dataIndex: 'email'
        },
        {
            text: 'Phone Number',
            flex: 1,
            dataIndex: 'phone'
        }
    ],
    dockedItems: [{
        xtype: 'pagingtoolbar',
        store: userStore,   // same store GridPanel is using
        dock: 'bottom',
        displayInfo: true
    }]
});

});

這是我的json代碼
{
"success": true,
"total": 12,
"users": [
{ "name": "Lisa", "email": "lisa@simpsons.com", "phone": "555-111-1224" },
{ "name": "Bart", "email": "bart@simpsons.com", "phone": "555-222-1234" },
{ "name": "Homer", "email": "home@simpsons.com", "phone": "555-222-1244" },
{ "name": "Marge", "email": "marge@simpsons.com", "phone": "555-222-1254" }
]
}

我想問說為什麼得到的結果是這樣的http://docs.sencha.com/ext-js/4-0/guides/grid/examples/paging_toolbar/index.html

分頁後數據都一樣,我覺得有點疑惑...

因為我的json數據只有4筆,我想要每頁2筆且第一頁為Lisa和Bart第二頁為Homer和Merge的話跟怎麼改?

謝謝大家~ :)

  • 写回答

6条回答 默认 最新

  • myali88 2011-08-03 21:41
    关注

    是的,就是Ext.data.proxy.Memory类,Ext.data.MemoryProxy是向后兼容保留的ExtJS 3的名。
    使用PageToolbar分页都是采用服务器端分页的,数据按页读取。Extjs本地分页并不支持,如果非要这样,你需要把PageToolbar里的store里使用的proxy采用Ext.data.proxy.Memory,并重写store的load方法(这需要你扩展该类),在调用load时分批加载数据(你需要自己把数组截断,比如这里的“users”)。

    如果你是初学者,不需要弄太复杂,先了解怎么使用,然后再了解组件的内部运行。

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(5条)

报告相同问题?

悬赏问题

  • ¥15 Acrn IVSHMEM doorbell问题
  • ¥15 yolov5中的val测试集训练时数量变小问题
  • ¥15 MPLS/VPN实验中MPLS的配置问题
  • ¥15 materialstudio氢键计算问题
  • ¥15 已知隐函数其中一个变量的,求另外一个变量
  • ¥15 echarts图表制作
  • ¥15 halcon根据玻璃面板纹路取区域
  • ¥15 HFSS设计小型化180度耦合器
  • ¥15 使用CInternetSession,CHttpFile读取网页文件时有些电脑上会卡住怎么办?
  • ¥15 水下机器人的半物理仿真研究