PDA

View Full Version : PagingToolbar refresh button reloads the last store



loginfabio
6 Oct 2012, 9:44 AM
Hello,

I'm quite new with EXTJS4 and MVC and I'm trying to write an application with:
- a grid showing records from a "master" table
- each row can open a window with a grid showing records from a "detail" table
with a pagingtoolbar working on detail store.

Opening many detail-windows I obtain correct records, but while refreshing
the grid, I always have the same records, the records of the last window opened.



/* for master table */
Ext.define('ExtComm.model.Master', {
extend: 'Ext.data.Model',
fields: ['idr','npr','dtr','dsi','dsd','rii','rin','sei','sen','sse','ogg',
'tei','ten','dtv','ris']
});

Ext.define('ExtComm.store.Masters', {
extend: 'Ext.data.Store',
requires: 'ExtComm.model.Master',
model: 'ExtComm.model.Master',
proxy: {
type: 'ajax',method:'POST',
url: 'data/app.php',
actionMethods :{read:'POST'},extraParams:{op:'elRichieste'},
reader: {type:'json',root:'richieste',totalProperty:'totale'}
}
});

/*For detail table*/
Ext.define('ExtComm.model.Detail', {
extend: 'Ext.data.Model',
fields: ['li','ri','so','sn','dt','st','no']
});

Ext.define('ExtComm.store.Details', {
extend: 'Ext.data.Store',
requires: 'ExtComm.model.Detail',
model: 'ExtComm.model.Detail',
proxy: {
type: 'ajax',method:'POST',
url: 'data/app.php',
actionMethods :{read:'POST'},extraParams:{op:'elLogRichieste'},
reader: {type:'json',root:'logrichieste',totalProperty:'totale'}
}
});

/*the view file...*/
Ext.define('ExtComm.view.richieste.ScdDetail', {
extend: 'Ext.window.Window',
alias: 'widget.scddetail',
id:'scddetail',
title:'Detail ',layout:'fit',
width: 640,height: 480,resizable:false,recData:{idr:0},
items:[
{xtype:'tabpanel',border: false,
items: [
{xtype:'panel',width:394,style:'margin:5px',
border:false,bodyStyle:'font-size:11px;',title:'Basic Template',
html: '<p><i>Apply the template to see results here</i></p>',
listeners: {
render: function() {
var tpl = Ext.create('Ext.Template',
'<div class="scrKey">Prog...</div>',
'<div class="scrValue">{npr} (id. {idr})</div>',
.....
'<div class="scrKeyB">Obj</div>',
'<div class="scrValueB">{ogg}</div>');
tpl.overwrite(this.body, this.up('window').recData);
this.doComponentLayout();
}
}},
{xtype:'gridpanel',title:'Row Details',
store:'Details',
forceFit: true,
columns: [
{text:'Data', dataIndex:'dt', hideable: true, width:70},
{text:'Soggetto', dataIndex:'sn', width:70},
{text:'Nota', dataIndex:'no'}],
dockedItems : [{
xtype : 'pagingtoolbar',
store:'Details',
pageSize : 5,
dock : 'bottom',
displayInfo : true,
displayMsg: 'Displaying topics {0} - {1} of {2}',
emptyMsg : 'No data to display'
}]
}
]}
],
buttonAlign:'center',
buttons:[{text:'Chiudi'}]
});

/*the controller file for window...*/
Ext.define('ExtComm.controller.richieste.ScdDetail', {
extend: 'Ext.app.Controller',
views: ['richieste.ScdDetail'],
init: function() {
this.control({
'scddetail gridpanel' : {
beforerender : this.onSchedaRender
},
'scdrichiesta button[text=Chiudi]': {
click: this.btnChiudi
}
});
},
btnChiudi : function(val) {
val.up('window').close();
},
onSchedaRender : function(val) {
var idRi = val.up('window').recData.idr ;
var newStore = Ext.create('ExtComm.store.Details',{
storeId:'stDetails_'+idRi
});
newStore.getProxy().setExtraParam('ri',idRi) ;
newStore.load();

var pgTb = val.down('pagingtoolbar') ;
pgTb.bindStore(newStore);

val.reconfigure(newStore);
}
});

/*in the master grid view a function open the detail window*/
...
var vieDetail = function(val) {
if(!Ext.getCmp('scddetail_'+val.data.idr)) {
var winDetail = Ext.create('ExtComm.view.richieste.ScdDetail',{
id:'scddetail_'+val.data.idr,
title:'Detail '+val.data.idr,recData:val.data
});
winDetail.show();
}
else
Ext.getCmp('scddetail_'+val.data.idr).show();
};
...


I think I can't change the pagingtoolbar store, any idea?

Thanks in advance

scottmartin
6 Oct 2012, 1:28 PM
but while refreshing the grid,

Can you clarify this statement?

Have you verified the headers/response on the NET tab?
I see you are using 'id' in your code. Are you sure you are not stepping on yourself?

Scott.

vietits
6 Oct 2012, 5:38 PM
Your problem maybe due to all proxies of Details stores share the same extraParams. Try to fix Details store definition like below:


Ext.define('ExtComm.store.Details', {
extend: 'Ext.data.Store',
requires: 'ExtComm.model.Detail',
model: 'ExtComm.model.Detail',
proxy: {
type: 'ajax',method:'POST',
url: 'data/app.php',
actionMethods :{read:'POST'},
//extraParams:{op:'elLogRichieste'}, <- all proxies share the same extraParams
reader: {type:'json',root:'logrichieste',totalProperty:'totale'}
},
constructor: function(){
var me = this;
me.proxy.extraParams = {op:'elLogRichieste'}; // each proxy has its own extraParams
me.callParent(arguments);
}
});

Or


Ext.define('ExtComm.store.Details', {
extend: 'Ext.data.Store',
requires: 'ExtComm.model.Detail',
model: 'ExtComm.model.Detail',
// proxy: {
// type: 'ajax',method:'POST',
// url: 'data/app.php',
// actionMethods :{read:'POST'},
// extraParams:{op:'elLogRichieste'},
// reader: {type:'json',root:'logrichieste',totalProperty:'totale'}
// },
constructor: function(){
var me = this;
me.proxy = {
type: 'ajax',method:'POST',
url: 'data/app.php',
actionMethods :{read:'POST'},
extraParams:{op:'elLogRichieste'},
reader: {type:'json',root:'logrichieste',totalProperty:'totale'}
};
me.callParent(arguments);
}
});

loginfabio
7 Oct 2012, 12:58 AM
It works :D

Thanks a lot!!!