我是extJS的新手。 我在使用PagingToolbar和Store时遇到了麻烦。当我点击“下一页”PagingToolbar正常工作，但gride不会更新。为什么会这样？请帮帮我。 这是我的代码： `
getJsonReader: function(){
this.JsonReader = new Ext.data.JsonReader({
totalProperty: 'results',
root: 'data',
idProperty: 'id',
fields: [
{name:'id', type: 'int', allowBlank: false},
{name: 'firstName', allowBlank: false},
{name: 'lastName', allowBlank: false},
{name: 'middleName',allowBlank: false},
{name: 'fotoTeacher',allowBlank: false}
]
});
return this.JsonReader;
},
getStore: function(){
this.store = new Ext.data.Store({
id: 'store-teachers',
reader: this.getJsonReader(),
proxy: new Ext.data.HttpProxy({
method: 'POST',
url: 'admin/get_teachers'
}),
autoLoad: {params:{start:0, limit:3}},
listeners: {
load: function()
{
if(jQuery('#panel-editTeacherHtml').length)
{
//remove attention
jQuery('#panel-editTeacherHtml').remove();
}
Ext.getCmp('grid-editTeacher').show();
},
exception: function()
{
Ext.getCmp('grid-editTeacher').hide();
if(!document.getElementById('panel-editTeacherHtml'))
{
Ext.DomHelper.insertAfter('panel-editTeacher-refreshButton',{
id: 'panel-editTeacherHtml',
html:'Увы, но нет ни одного преподавателя =('
});
}
}
}
});
return this.store;
},
titleTeacherfoto: function(val)
{
return '<img src="'+val+'" />';
},
getGrid: function(){
this.grid = new Ext.grid.GridPanel({
frame : true,
autoHeight:true,
id:'grid-editTeacher',
loadMask: true,
store: this.getStore(),
sm: new Ext.grid.CheckboxSelectionModel({
singleSelect: false,
checkOnly: true
}),
cm: new Ext.grid.ColumnModel({
{header: 'Фамилия', dataIndex: 'lastName'},
{header: 'Имя', dataIndex: 'firstName', sortable: false},
{header: 'Отчество', dataIndex: 'middleName', sortable: false},
{header: 'Фотография', dataIndex: 'fotoTeacher', renderer: this.titleTeacherfoto}
],
defaultSortable: true
}),
viewConfig: {
forceFit:true
},
bbar: new Ext.PagingToolbar({
id:'pager-editTeacher',
displayInfo: true,
displayMsg: 'Преподаватели {0} - {1} из {2}',
beforePageText: 'Страница',
afterPageText: 'из {0}',
prependButtons: true,
pageSize: 3,
store: this.getStore()
})
})
return this.grid;
},
getPanel: function(){
return new Ext.Panel({
frame: true,
bodyStyle: 'padding:5px;',
id: 'panel-editTeacher',
autoScroll: true,
title: 'Панель редактирования преподавателей',
items: [{
xtype: 'button',
text: 'Обновить',
iconCls: 'refresh',
id:'panel-editTeacher-refreshButton',
style: 'margin-bottom:10px',
listeners:{
click: function(){
grid = Ext.getCmp('grid-editTeacher');
grid.getStore().reload();
Ext.getCmp('pager-editTeacher').doRefresh();
}
}
},
this.getGrid()
]
});
}
Ajax回应
{success:true,
results:5,
data:[{"id":"1","firstName":"","lastName":"","middleName":"","fotoTeacher":"\/modules\/admin\/design\/img\/default\/teacher_thumb.jpg"},{"id":"2","firstName":"","lastName":"","middleName":"","fotoTeacher":"\/modules\/admin\/design\/img\/default\/teacher_thumb.jpg"},{"id":"3","firstName":"","lastName":"","middleName":"","fotoTeacher":"\/modules\/admin\/design\/img\/default\/teacher_thumb.jpg"}]}
P.s：抱歉我的英文=）
答案 0 :(得分：2)
我认为您的问题是每次单击按钮时，都会创建一个新商店，并在此过程中创建一个新的Reader对象。
getStore: function(){
this.store = new Ext.data.Store({
....
因此，如果您点击按钮，会发生什么：
grid.getStore().reload();
//GridInstance.createANewStoreForMe(andCreateANewReaderForYourself).reload
因此，新创建的商店获取与原始商店完全相同的结果。 你应该做的是在初始化期间在对象命名空间（this）中创建存储，而不是之后：
MyApp.MyClass = Ext.extend(Ext.grid.Grid, {
initComponent: function () {
this.store = new Ext.data.Store({
...
});
// create config object
var config = {
store : store,
...
};
// apply config
Ext.apply(this, Ext.apply(this.initialConfig, config));
// call parent
MyApp.MyClass.superclass.initComponent.call(this);
} // eo function initComponent
,getStore: function() {
return this.store;
// Or this.getStore(); in the case of this class (Grid which is always able to return it's own store)
}
}); // eo extend
var myGrid = new MyApp.MyClass({});