PDA

View Full Version : Paging button on PagingToolbar create another grid panel... :-(



ale4684
28 Apr 2010, 7:18 AM
I've a tabbed panel that contain a GridPanel on the first tab and the gridPanel has a Paging toolbar .

When I push the paging button to see the next 25 elements the grid update the elements but ALSO "halves" itself (so I get 2,3,4,... n*((n-1)/2) istances of TabbedPanel on the screen ) ...

:((:((:((:((:((:((:((:((

Is it a bug or what else?

Here there is the code :


PuntiStore = new Ext.data.JsonStore({
root:'punti',
totalProperty: 'totalCount',
proxy: new Ext.data.HttpProxy
({
method: 'POST',
url: 'listener.php?metodo=listaPuntiLimit'
}),
fields: ['id', 'lat', 'lon', 'descrizione'],
autoLoad:true,
listeners:{

load: function(w,r,o){

//toolbar
var toolBar = new Ext.PagingToolbar({
pageSize:25,
store:PuntiStore,
displayInfo:false,
displayMsg: 'Displaying topics {0} - {1} of {2}',
emptyMsg:'no data'
});

//disabilita refresh grid
toolBar.refresh.hide();

//pulsante cancellazione toolbar
var sbun = new Ext.Toolbar.Button({
pressed: false,
enableToggle: false,
text: ' Elimina punto di interesse ',
id: 'rimuoviPOI',
cls: '',
handler: function(){
var selectedItem = grid.getSelectionModel().getSelected();
myID=selectedItem.get('id');
myurl="listener.php?metodo=cancellaPunto&id="+myID;

//begin hiddenform
hiddenForm.getForm().submit({
clientValidation: true,
url: myurl,
method:'GET',
success: function(form, action) {
document.location.href =document.location.href;
},

failure: function(form, action) {
switch (action.failureType) {

case Ext.form.Action.CLIENT_INVALID:
Ext.Msg.alert('Failure', 'Form fields may not be submitted with invalid values');
break;

case Ext.form.Action.CONNECT_FAILURE:
Ext.Msg.alert('Failure', 'Ajax communication failed');
break;

case Ext.form.Action.SERVER_INVALID:
Ext.Msg.alert('Failure', action.result.msg);
}
}
});

}
});




//pulsante modifica toolbar
var sbunMod = new Ext.Toolbar.Button({
pressed: false,
enableToggle: false,
text: ' Modifica punto di interesse ',
id: 'modificaPOI',
cls: '',
handler: function(){
var selectedItem = grid.getSelectionModel().getSelected();
myID=selectedItem.get('id');
descrizione="+myDescrizione;
myurl="listener.php?metodo=modificaPunto&id="+myID;

winModifica.show();

}
});


grid = new Ext.grid.GridPanel({
title: 'Lista dei punti di interesse (POI) presenti nel sistema',
ds: PuntiStore,
stripeRows: true,
enableColumnHide : false,
cm: myCm,
enableColLock: false,
loadMask: false,
width:800,
height: 500,
frame:false,
bbar:toolBar
});

grid.getBottomToolbar().add('-',sbun);
grid.getBottomToolbar().add('-',sbunMod);


//hiddenForm
hiddenForm = new Ext.form.FormPanel({

id:'hiddenform'
,title: 'Gestione punti di interesse'
,monitorValid:false
,bodyStyle:'padding:0px'
,border:false
,frame:false
,items:
[grid]
});

//tabs
tabs2 = new Ext.TabPanel({
renderTo: document.body,
activeTab: 0,
width:800,
height:600,
closable: false,
resizable: true,
plain: true,
border: false,
defaults:{autoScroll: true},
items:
[
hiddenForm,formPanelPunti,formUtente
]
});

}
}

});
//end store grid

//PuntiStore.load({params:{start:0,limit:toolbar.pagesize}});

});



:-/:-/:-/

Thanks a lot

Alessandro

cnelissen
28 Apr 2010, 8:23 AM
Probably because you are creating the tabpanel and the forms inside of the stores load event. Which means every time you page your dataset, the tabpanel is being recreated. You need to move all of that outside of the load callback. I.e.:



PuntiStore = new Ext.data.JsonStore({
root:'punti',
totalProperty: 'totalCount',
proxy: new Ext.data.HttpProxy({
method: 'POST',
url: 'listener.php?metodo=listaPuntiLimit'
}),
fields: ['id', 'lat', 'lon', 'descrizione']
});

//toolbar
var toolBar = new Ext.PagingToolbar({
pageSize:25,
store:PuntiStore,
displayInfo:false,
displayMsg: 'Displaying topics {0} - {1} of {2}',
emptyMsg:'no data'
});

//disabilita refresh grid
toolBar.refresh.hide();

//pulsante cancellazione toolbar
var sbun = new Ext.Toolbar.Button({
pressed: false,
enableToggle: false,
text: ' Elimina punto di interesse ',
id: 'rimuoviPOI',
cls: '',
handler: function(){
var selectedItem = grid.getSelectionModel().getSelected();
myID=selectedItem.get('id');
myurl="listener.php?metodo=cancellaPunto&id="+myID;

//begin hiddenform
hiddenForm.getForm().submit({
clientValidation: true,
url: myurl,
method:'GET',
success: function(form, action) {
document.location.href =document.location.href;
},
failure: function(form, action) {
switch (action.failureType) {
case Ext.form.Action.CLIENT_INVALID:
Ext.Msg.alert('Failure', 'Form fields may not be submitted with invalid values');
break;

case Ext.form.Action.CONNECT_FAILURE:
Ext.Msg.alert('Failure', 'Ajax communication failed');
break;

case Ext.form.Action.SERVER_INVALID:
Ext.Msg.alert('Failure', action.result.msg);
}
}
});
}
});

//pulsante modifica toolbar
var sbunMod = new Ext.Toolbar.Button({
pressed: false,
enableToggle: false,
text: ' Modifica punto di interesse ',
id: 'modificaPOI',
cls: '',
handler: function(){
var selectedItem = grid.getSelectionModel().getSelected();
myID=selectedItem.get('id');
descrizione="+myDescrizione";
myurl="listener.php?metodo=modificaPunto&id="+myID;

winModifica.show();
}
});

toolbar.add('-',sbun);
toolbar.add('-',sbunMod);

var grid = new Ext.grid.GridPanel({
title: 'Lista dei punti di interesse (POI) presenti nel sistema',
ds: PuntiStore,
stripeRows: true,
enableColumnHide : false,
cm: myCm,
enableColLock: false,
loadMask: false,
width:800,
height: 500,
frame:false,
bbar:toolBar
});

//hiddenForm
var hiddenForm = new Ext.form.FormPanel({
id:'hiddenform'
,title: 'Gestione punti di interesse'
,monitorValid:false
,bodyStyle:'padding:0px'
,border:false
,frame:false
,items:
[grid]
});

//tabs
tabs2 = new Ext.TabPanel({
renderTo: document.body,
activeTab: 0,
width:800,
height:600,
closable: false,
resizable: true,
plain: true,
border: false,
defaults:{autoScroll: true},
items: [
hiddenForm,formPanelPunti,formUtente
]
});

PuntiStore.load({params:{start:0,limit:toolbar.pagesize}});

ale4684
29 Apr 2010, 1:31 PM
Thanks a lot, now it works :-)
:)):)):)):)):)):)):)):)):)):))