PDA

View Full Version : problem with ext.paging toolbar + this.store



nibblas
22 Nov 2010, 12:37 AM
hy

i have ma preconfigured Panel KleinArtikelGrid where i use a paging toolbar.
to define the store i have to use Ext.StoreMgr.get('storeid') because this.store returns an undefined error.

Can somebody explain me why this.store's not working?


CRM.panels.MappedKLeinArtikelGrid = Ext.extend(Ext.grid.EditorGridPanel,{
// constructor properties
initComponent:function(){
Ext.apply(this,{
width :200,
clicksToEdit :2,
enableColLock :false,
layout :'fit',
stripeRows :true,
listeners :{
afteredit :editMappedKLeinArtikel
},
sm : new Ext.grid.RowSelectionModel({
singleSelect: false
}),
store :new Ext.data.JsonStore({
proxy :new Ext.data.HttpProxy({
url : 'php/kleinartikel.php',
method : 'POST'
}),
fields :[{

name :'ID',
mapping :'ID'
},
{
name : 'Beschreibung',
mapping : 'Beschreibung'
},
{
name : 'KleinartikelAnzahl',
mapping : 'KleinartikelAnzahl'
}

],
root :'results',
id :'MappedKLeinArtikelStore',
autoLoad : true,
baseParams :{
task: 'LISTINGMAPPED',
start:0,
limit:15,
lieferscheinID: 1
},
idProperty: 'ID'
}),
cm :new Ext.grid.ColumnModel(
[{ header: 'ID',
width:50,
dataIndex: 'ID',
hidden:true
},{
header: 'Beschreibung',
dataIndex: 'Beschreibung',
width:150
},
{
header: 'KleinartikelAnzahl',
dataIndex: 'KleinartikelAnzahl',
width:150,
editor: new Ext.form.TextField({ // rules about editing
allowBlank: false,
maxLength: 20,
store:this.store,
mode: 'remote',
triggerAction: 'all',
selectOnFocus:true
//maskRe: /([a-zA-Z0-9\s]+)$/ // alphanumeric + spaces allowed
})

}]
),
tbar: [{
text :'Neu',
tooltip :'Neuer MappedKLeinArtikel',
iconCls :'add', // this is defined in our styles.css
handler : displayMappedKLeinArtikelCreateWindow
},'-',
{
text :'Löschen',
tooltip :'MappedKLeinArtikel Löschen',
iconCls :'remove',
handler :confirmDeleteMappedKLeinArtikel
//handler: displayFormWindow
}, '-', {
text: 'Search',
tooltip: 'Advanced Search',
handler: startAdvancedSearch,
iconCls:'search'
},'-',
new Ext.app.SearchField({
store: this.store,
width: 120
})

],
bbar: new Ext.PagingToolbar({
pageSize: 15,
store: this.store,
displayInfo: true
})
});
CRM.panels.MappedKLeinArtikelGrid.superclass.initComponent.apply(this,arguments);
},
onRender:function(){
this.store.load({params:{start:0,limit:15}});
CRM.panels.MappedKLeinArtikelGrid.superclass.onRender.apply(this,arguments);
}
});
Ext.reg("MappedKLeinArtikelGrid",CRM.panels.MappedKLeinArtikelGrid);

Condor
22 Nov 2010, 12:50 AM
It's the order in which javascript executes.

It first creates the entire config object, including store and pagingtoolbar and then applies it to this (with Ext.apply). So when the pagingtoolbar is created, 'this.store' is still undefined.

You should use:

initComponent: function(){
var store = new Ext.data.JsonStore({
...
});
Ext.apply(this, {
store: store,
bbar: new Ext.PagingToolbar({
store: store,
...
}),
...
});
...

nibblas
22 Nov 2010, 2:04 AM
thx condor!

in the same file as the preconfigured class above, i have an update function

After update the store gets reloaded. Actually i use the storemanager Ext.StoreMgr.get('storeID').reload()
Because there are many instances of MappedKLeinArtikelGrid i cant define a fix ID. (MappedKLeinArtikelGrid is used in a tabpanel, each tabpanel contains an instance of MappedKLeinArtikelGrid)

How can i access the store of MappedKLeinArtikelGrid (defined in initComponent as mentioned above) from my update function?

To use a itemId for the store and acess it by CRM.panels.MappedKLeinArtikelGrid.getComponent('itemID')?


function editMappedMobiliarArtikel(oGrid_event){
Ext.Ajax.request({
waitMsg : 'Please wait...',
url : 'php/mobiliar.php',
params : {
task : "MOBEDIT",
id :oGrid_event.record.data.ID,
preis :oGrid_event.record.data.Einkaufspreis,
mobStatus :oGrid_event.record.data.MobiliarStatusID,
hersteller :oGrid_event.record.data.Hersteller,
hjahr :oGrid_event.record.data.HJahr,
typ :oGrid_event.record.data.Typ

},
success: function(response){
var result=eval(response.responseText);
switch(result){
case 1:
Ext.StoreMgr.get('MappedMobiliarArtikelStore').commitChanges();
Ext.StoreMgr.get('MappedMobiliarArtikelStore').reload({params:{start:0,limit:15}});
break;
default:
Ext.MessageBox.alert('Warning',
'Konnte MappedMobiliarArtikel nicht editieren.');
break;
}
},
failure: function(response){
var result=response.responseText;
Ext.MessageBox.alert('error','could not connect to the database.retry later');
}
});

}

thx in advance

cheers nibblas

nibblas
22 Nov 2010, 2:07 AM
thx condor!

in the same file as the preconfigured class above, i have an update function

After update the store gets reloaded. Actually i use the storemanager Ext.StoreMgr.get('storeID').reload()
Because there are many instances of MappedKLeinArtikelGrid i cant define a fix ID. (MappedKLeinArtikelGrid is used in a tabpanel, each tabpanel contains an instance of MappedKLeinArtikelGrid)

How can i access the store of MappedKLeinArtikelGrid (defined in initComponent as mentioned above) from my update function?

To use a itemId for the store and acess it by CRM.panels.MappedKLeinArtikelGrid.getComponent('itemID')?


function editMappedMobiliarArtikel(oGrid_event){
Ext.Ajax.request({
waitMsg : 'Please wait...',
url : 'php/mobiliar.php',
params : {
task : "MOBEDIT",
id :oGrid_event.record.data.ID,
preis :oGrid_event.record.data.Einkaufspreis,
mobStatus :oGrid_event.record.data.MobiliarStatusID,
hersteller :oGrid_event.record.data.Hersteller,
hjahr :oGrid_event.record.data.HJahr,
typ :oGrid_event.record.data.Typ

},
success: function(response){
var result=eval(response.responseText);
switch(result){
case 1:
Ext.StoreMgr.get('MappedMobiliarArtikelStore').commitChanges();
Ext.StoreMgr.get('MappedMobiliarArtikelStore').reload({params:{start:0,limit:15}});
break;
default:
Ext.MessageBox.alert('Warning',
'Konnte MappedMobiliarArtikel nicht editieren.');
break;
}
},
failure: function(response){
var result=response.responseText;
Ext.MessageBox.alert('error','could not connect to the database.retry later');
}
});

}thx in advance

cheers nibblas

nibblas
22 Nov 2010, 7:12 AM
thx a lot condor!

the preconfigured class above has an update method named editMappedKLeinArtikel.

As you can see i access the store by StoreMgr. Because there could be many instances of MappedKLeinArtikelGrid i can't use storeID.
So how can i acess the store of MappedKLeinArtikelGrid from my update method?


function editMappedKLeinArtikel(oGrid_event){
Ext.Ajax.request({
waitMsg : 'Please wait...',
url : 'php/kleinartikel.php',
params : {
task : "UPDATEMAPPED",
id :oGrid_event.record.data.ID,
anzahl :oGrid_event.record.data.KleinartikelAnzahl
},
success: function(response){
var result=eval(response.responseText);
switch(result){
case 1:
Ext.StoreMgr.get('MappedKLeinArtikelStore').getStore().commitChanges();
Ext.StoreMgr.get('MappedKLeinArtikelStore').getStore().reload({params:{start:0,limit:15}});
break;
default:
Ext.MessageBox.alert('Warning',
'Konnte MappedKLeinArtikel nicht editieren.');
break;
}
},
failure: function(response){
var result=response.responseText;
Ext.MessageBox.alert('error','could not connect to the database.retry later');
}
});

}



thx in advance

cheers nibblas

Condor
22 Nov 2010, 7:55 AM
What is oGrid_event? Does it contain a reference to the grid and/or store? In that case you can simply use it in the success handler.

nibblas
22 Nov 2010, 9:08 AM
ok got that, oGrid_Event is an edit event object cointaing


grid - This grid
record - The record being edited
field - The field name being edited
value - The value being set
originalValue - The original value for the field, before the edit.
row - The grid row index
column - The grid column index


but how can i acess from new oder delete method?

i have to pass also an object or reference to the gridpanel...

the hanlder passes following data
The handler is passed the following parameters

b : ButtonThis Button.

e : EventObjectThe click event.



but i need a reference to the grid.... may i can handle this and set the scope to grid and not as default to button?


tbar: [{
text :'Neu',
tooltip :'Neuer MappedKLeinArtikel',
iconCls :'add', // this is defined in our styles.css
handler : displayMappedKLeinArtikelCreateWindow
},'-',
{
text :'Löschen',
tooltip :'MappedKLeinArtikel Löschen',
iconCls :'remove', // this is defined in our styles.css
handler :confirmDeleteMappedKLeinArtikel
},/*'-',

Condor
22 Nov 2010, 9:48 AM
var grid = btn.findParentByType('grid');

nibblas
23 Nov 2010, 12:51 AM
good idea! thx!!

so only the new method is left...

The call for handler displayMappedKLeinArtikelCreateWindow

{
text :'Neu',
tooltip :'Neuer MappedKLeinArtikel',
iconCls :'add', // this is defined in our styles.css
handler : displayMappedKLeinArtikelCreateWindow
}so a reference should be passed over a function (displayMappedKLeinArtikelCreateWindow) to a window

(MappedKLeinArtikelCreateWindow) to a form(MappedKLeinArtikelCreateForm) and from there to the create method

(CreateNewMappedKLeinArtikel)

maybe i have to work with refs?



var MappedKLeinArtikelCreateForm;
var MappedKLeinArtikelCreateWindow;
//Form
MappedKLeinArtikelCreateForm = new Ext.FormPanel({
bodyStyle :'padding:5px;',
width :200,
items :[{
xtype :'combo',
store :new Ext.data.JsonStore({
id :'combostore_MappedKLeinArtikel',
proxy: new Ext.data.HttpProxy({
url:'php/kleinartikel.php',
method:'POST'
}),
fields :[{
name :'ID',
mapping :'ID'
},{
name :'Beschreibung',
mapping :'Beschreibung'
}],
root :'results',
baseParams:{
task:'KleinartikelCombo'
},
idProperty: 'ID'
}),
displayField:'Beschreibung',
valueField :'ID',
editable :false,
autoLoad :true,
mode :'remote',
forceSelection:true,
triggerAction:'all',
fieldLabel :'Kleinartikel',
emptyText :'Select Kleinartikel',
selectOnFocus:true,
id :'MappedKLeinArtikel_combo_KleinArtikel'
},
{
xtype :'textfield',
fieldLabel :'Anzahl',
name :'anzahl',
allowBlank : false,
id :'MappedKLeinartikel_anzahl'

}],
buttons :[{
text :'save and close',
handler :CreateNewMappedKLeinArtikel
},{
text :'abbrechen',
handler :function(){
MappedKLeinArtikelCreateWindow.hide();
}
}]

});
//--------------------------------------------------------------------------------
//Window
MappedKLeinArtikelCreateWindow = new Ext.Window({
id :'MappedKLeinArtikelCreateWindow',
title :'Neue MappedKLeinArtikel',
closable:false,
modal :true,
width :320,
height :150,
plain :true,
layout :'fit',
items :MappedKLeinArtikelCreateForm
});
//--------------------------------------------------------------------------------
//functions
//reset new MappedKLeinArtikel formf
function resetMappedKLeinArtikelCreateForm(){
Ext.getCmp('MappedKLeinArtikel_combo_KleinArtikel').clearValue();
Ext.getCmp('MappedKLeinartikel_anzahl').setValue('');
};
//check if validatet
function isMappedKLeinArtikelCreateFormValid(){
return(Ext.getCmp('MappedKLeinArtikel_combo_KleinArtikel').isValid() &&
Ext.getCmp('MappedKLeinartikel_anzahl').isValid());
};
//show,disable und reset form
function displayMappedKLeinArtikelCreateWindow(){
if(!MappedKLeinArtikelCreateWindow.isVisible()){
resetMappedKLeinArtikelCreateForm();

MappedKLeinArtikelCreateWindow.show();
}else{
MappedKLeinArtikelCreateWindow.toFront();
}
};
//Ajax call neue MappedKLeinArtikel
function CreateNewMappedKLeinArtikel(){
if(isMappedKLeinArtikelCreateFormValid()){
Ext.Ajax.request({
waitMsg : 'Please wait...',
url : 'php/kleinartikel.php',
params: {
task :"CREATEMAPPED",
kleinartikelID :Ext.getCmp('MappedKLeinArtikel_combo_KleinArtikel').getValue(),
lieferscheinID :Ext.getCmp('LieferscheinTree').getSelectionModel().getSelectedNode().id,
anzahl :Ext.getCmp('MappedKLeinartikel_anzahl').getValue()
},
success : function(response){
var result=eval(response.responseText);
switch(result){
case 1:
/*Ext.MessageBox.alert('Creation OK',
'Firma erfolgreich hinzugefügt.');*/
CRM.panels.MappedKLeinArtikelGrid.getComponent('MappedKLeinArtikelStore').getStore().reload();
MappedKLeinArtikelCreateWindow.hide();
break;
default:
Ext.MessageBox.alert('Warning',
'Konnte MappedKLeinArtikel nicht hinzufügen.');
break;
}
},
failure: function(response){
var result=response.responseText;
Ext.MessageBox.alert('error','could not connect to the database.retry later');
}
});
} else {
Ext.MessageBox.alert('Warning',
'Your Form is not valid!');
}
};or maybe i'm tottaly wrong with my design...

how would you create cud methods for an xtype grid?

thx in advance

Condor
23 Nov 2010, 1:05 AM
You should store a reference to the grid store in the window, e.g.

function displayMappedKLeinArtikelCreateWindow(btn) {
MappedKLeinArtikelCreateWindow.store = btn.findParentByType('grid').getStore();
...
function CreateNewMappedKLeinArtikel() {
...
MappedKLeinArtikelCreateWindow.store.reload();
...

ps. If your post gets moderated you really don't need to post it 5 times! Just wait for a moderator to approve your original post (send me a PM if it takes too long).

nibblas
23 Nov 2010, 1:24 AM
yeah, i'm sorry didn't realized what's goin wrong, because sometimes my answer appears directly, sometimes not....

thx a lot!