Extjs Grid Paging Toolbar顯示所有數據並且沒有頁碼

我在我的網格上使用了extjs分頁工具欄。我有pageize 5，但它顯示所有的數據（默認是我猜25）...但是當我點擊下一頁，它仍然顯示前25個數據。也有頁碼問題，即它是空白的2 ...當它假設說的2 1 ... Click here to see what it looks like Extjs Grid Paging Toolbar顯示所有數據並且沒有頁碼

這是我的網...

var myPageSize = 5; 
store.load({ 
    params: { 
     start: 0, 
     limit: myPageSize 
    } 
}); 
this.grid = Ext.create('Ext.grid.Panel', { 
    title: 'GridView App', 
    store: store, 
    loadMask: true, 
    columns: [{ 
     header: 'Q1', 
     sortable: true, 
     dataIndex: 'Q1', 
     flex: 1, 
    }, { 
     header: 'Q2', 
     sortable: true, 
     dataIndex: 'Q2', 
     flex: 1, 
    }, { 
     header: 'Q3', 
     sortable: true, 
     dataIndex: 'Q3', 
     flex: 1, 
    }, { 
     header: 'Q4', 
     sortable: true, 
     dataIndex: 'Q4', 
     flex: 1, 
    }, { 
     header: 'Improvements', 
     flex: 1, 
     sortable: true, 
     dataIndex: 'Improvements' 
    }, { 
     header: 'Comments', 
     flex: 1, 
     sortable: true, 
     dataIndex: 'Comments' 
    }], 

    bbar: Ext.create('Ext.PagingToolbar', { 
     style: 'border:1px solid #99BBE8;', 
     store: store, 
     displayInfo: true, 
     preprendButtons: true, 
     displayMsg: 'Displaying Surveys {0} - {1} of {2}', 
     emptyMsg: "No Surveys to display" 
    }), 

    stripeRows: true, 
    trackover: true, 
    renderTo: Ext.getBody() 
});

，這是我的商店

var store = Ext.create('Ext.data.JsonStore', { 
    storeId: 'myData', 
    scope: this, 
    fields: [{ 
     name: 'Q1', 
     type: 'int' 
    }, { 
     name: 'Q2', 
     type: 'int' 
    }, { 
     name: 'Q3', 
     type: 'int' 
    }, { 
     name: 'Q4', 
     type: 'int' 
    }, { 
     name: 'Q5', 
     type: 'int' 
    }, { 
     name: 'Improvements', 
     type: 'string' 
    }, { 
     name: 'Comments', 
     type: 'string' 
    }], 

    sorters: [{ 
     property: 'Q1', 
     direct: 'ASC' 
    }], 

    proxy: { 
     type: 'ajax', 
     url: 'GridView/writeRecord', 
     reader: new Ext.data.JsonReader({ 
      root: 'myTable', 
      totalProperty: 'count' 

     }) 
    }  
});

And my Json looks like this, please click here

UPDATE JSON結果

{ 
"count": 30, 
"myTable": [ 
{ 
    "Q1": "1", 
    "Q2": "1", 
    "Q3": "1", 
    "Q4": "1", 
    "Improvements": "", 
    "Comments": "1" 
}, 
{ 
    "Q1": "1", 
    "Q2": "2", 
    "Q3": "3", 
    "Q4": "4", 
    "Improvements": "Iphone5", 
    "Comments": "Iphone14" 
}, 
{ 
    "Q1": "1", 
    "Q2": "1", 
    "Q3": "3", 
    "Q4": "3", 
    "Improvements": "This is Comment1-3", 
    "Comments": "This is Comment2-3" 
},

來源

2012-09-27 EagleFox

問題出在您從服務器返回的數據。與存儲配置，你必須返回格式化這樣的JSON（注意，記錄的字段都不同，你的）

{ 
"success" : true, 
"count" : 2, 
"myTable" :[{ 
    "id" : 1, 
    "cod" :"100001" 
    },{ 
    "id" : 2, 
    "cod" :"100001" 
    }] 
}

商店的根參數就是ExtJS的預期有記錄的陣列，成功參數是你可以處理顯示服務器通信錯誤，totalProperty是您告訴extjs您獲取了多少個總記錄的地方。（基於extjs 4.x的答案，但正如我可以記得與3.x是一樣的）

來源

2012-09-27 21:42:02

我看到...所以整個json.net序列化不會產生json格式的數據？謝謝查理...如果你有時間，你能否看到本網頁上接受的答案..http：//stackoverflow.com/questions/12608637/return-count-and-data-as-json-into-extjs-網格...這是我如何編碼我的JSON。 – EagleFox

嘿查理，我用Json結果更新了我的帖子...它看起來幾乎相同，我用jsonlint檢查以驗證它是一個有效的json ...任何見解？ – EagleFox

它看起來是正確的（假設在發佈時末尾缺失的捲曲和方括號已經被切掉）。通過在console.log（store.getRange（））;'store'sload事件中附加一個監聽器，您可以輕鬆調試商店是否正確加載。 –

Extjs Grid Paging Toolbar顯示所有數據並且沒有頁碼

回答

相關問題