PDA

View Full Version : Update JsonStore from a button handler in the tbar of a grid



amichelin
17 Sep 2010, 12:48 PM
Hi :

I have a grid, that has a tbar with a button.

The most rigth collumn is a checkbox collumn.

When the button is click, the handler button seach each record checked and makes and array tu a php
Back with a number generate in the db, i try tu update a collumn to show the number returned from db.

but i can see the change in the grid.




function CriarLote( oGrid )
{
Ext.MessageBox.confirm(
'Criação de lotes... ',
'Deseja cria o lote com as notas fiscais seleccionadas ?',
function(btn, text)
{
if ( btn == 'yes' )
{
///create an array with cehcked values
....
....

Ext.Ajax.request({
waitMsg: 'Gerando Lotes de Notas Fiscais...',
url: 'nfe_gravar_lotes.php',
method: 'POST',
params: { idempresa: ds.baseParams.idempresa, serie: ds.baseParams.serie,
notas: Ext.util.JSON.encode( aGravar ) },
//the function to be called upon failure of the request
//(404 error etc, ***NOT*** success=false)
failure:function(response,options) {
Ext.MessageBox.alert('Error',' Ocorreu um erro: ' + response.responseText);
oWait.hide();
},//end failure block

//The function to be called upon success of the request
success:function( response, options ) {

if ( typeof response.responseText != 'undefined' )
{
var responseData = Ext.util.JSON.decode( response.responseText);

if ( responseData.success )
{
Ext.MessageBox.show({ title: 'Ingresso... ',
msg: responseData.info,
buttons: Ext.Msg.OK,
icon: Ext.MessageBox.INFO,
fn: function(){
oWait.hide();
// here i try to change the collumn..
ds.each( function ( oRecord )
{
// if is checked...
if ( oRecord.data.idlote == 0 && oRecord.data.marcada == 1 )
{

// first option
oRecord.data.idlote = responseData.nrolote; // get the number from db
ds.commitChanges();
oGrid.getColumnModel().setRenderer( 6, function(n){ return StrZero( n, 7
) } );

// second option
ds.getById( oRecord.data.nronota ).data.idlote = responseData.nrolote;
ds.commitChanges();
oGrid.getColumnModel().setRenderer( 6,
function(n){ return StrZero( n, 7 ) } );


}

});
},
modal: true
});
} else {
Ext.MessageBox.show({ title: 'Ocorreu um erro ',
msg: responseData.info,
buttons: Ext.Msg.OK,
icon: Ext.MessageBox.ERROR,
fn: function(){ oWait.hide(); },
modal: true
});
sErro = responseData.info;
}
} else
Ext.MessageBox.show({ title: 'Ocorreu um erro ',
msg: 'Não foi recebida resposta do servidor',
buttons: Ext.Msg.OK,
icon: Ext.MessageBox.ERROR,
fn: function(){ oWait.hide(); },
modal: true
});

}//end success block
}); //end request



}
}
}
);

}


how to update the store and see in the grid the changes?

Help will be apreciated!!!

Thank in advance

amichelin
18 Sep 2010, 4:26 AM
This is the grid code



function BotoesGrid( oGrid )
{
var oBotaoAdd = new Ext.Button({
fieldLabel: 'Criar Lote',
handler: function(){ CriarLote( oGrid );},
tooltip: 'Criar Lote',
iconCls: 'BtnAdd'
});

return oBotaoAdd;
}
var checkColumn = new Ext.grid.CheckColumn({
header: "",
dataIndex: 'marcada',
width: 30,
menuDisabled: true
});

// create the Data Store
var oStore = new Ext.data.JsonStore({
url: 'nfe_notas_get.php',
totalProperty: 'total',
storeId: 'movsStore',
root: 'notas',
totalProperty: 'total',
idProperty: 'nronota',
successProperty: 'success',
messageProperty: 'errorMsg',
baseParams : { 'idempresa': nIdEmpresa, 'serie': nIdSerie },
fields: [
'nronota', 'serie', 'emissao', 'total', 'nome', 'chave', 'idlote', 'enviado', 'marcada' ]
});

oStore.on( 'exception', function( oDataProxy, sType, sAction, oOptions, oResponse, xArg ){

if ( typeof oResponse.status == 'undefined' )
Ext.MessageBox.alert( 'Erro...', Ext.util.Format.htmlDecode( oStore.reader.jsonData.errorMsg ));

if ( oResponse.status == 404 )
Ext.MessageBox.alert( 'Erro...', 'Falta arquivo que carrega os dados.. Contate a suporte...');

if ( oResponse.status == 200 )
{
oResposta = Ext.util.JSON.decode( oResponse.responseText );

if ( oResposta.errorMsg != '' )
alert( oResposta.errorMsg );
}
});


var grid = new Ext.grid.GridPanel({
width:880,
height:530,
title:'Lista de Notas Fiscais disponíveis para criar lote',
store: oStore,
trackMouseOver:false,
disableSelection:true,
loadMask: true,
tbar: new Ext.Toolbar({
id: 'form_toolbar',
width: 880,
height: 26,
cls: 'border: 1px solid red; '}),
// grid columns
columns:[{
id: 'nronota', // id assigned so we can apply custom css (e.g. .x-grid-col-topic b { color:#333 })
header: "Nro Nota",
dataIndex: 'nronota',
align: 'center',
width: 70,
menuDisabled: true,
renderer: function(n){ return StrZero( n, 7 ) }
},{
header: "Serie",
dataIndex: 'serie',
align: 'center',
width: 70,
menuDisabled: true,
renderer: function(n){ return StrZero( n, 7 ) }
},{
header: "Emissao",
dataIndex: 'emissao',
align: 'center',
width: 70,
menuDisabled: true,
renderer: renderData
},{
header: "Total",
dataIndex: 'total',
align: 'right',
width: 70,
menuDisabled: true
//,
// renderer: function(n){ return n.toFixed(2); }
},{
header: "Nome",
dataIndex: 'nome',
align: 'left',
width: 300,
menuDisabled: true
},{
header: "Chave",
dataIndex: 'chave',
align: 'center',
width: 200,
menuDisabled: true
},{
header: "Lote",
dataIndex: 'lote',
align: 'center',
width: 60,
menuDisabled: true,
renderer: function(n){ return StrZero( n, 7 ) }
}, checkColumn],
plugins: checkColumn,
// paging bar on the bottom
bbar: new Ext.PagingToolbar({
pageSize: 50,
store: oStore,
displayInfo: true,
displayMsg: 'Mostrando Notas Fiscais {0} - {1} de {2}',
emptyMsg: "Não a Notas Fiscais para esta empresa"
})
});

// Adicionadas por extjs 3.2
var oTbar = grid.getTopToolbar();
oTbar.add( BotoesGrid( grid ) ); // create the bottom

oTbar.addText( 'Criar Lote ');
// render it
grid.render('nfegerar');
grid.syncSize();
// trigger the data store load
oStore.load({params:{start:0, limit:50}});



In the within CriarLote( oGrid ) is can see the records data, but not update them

why i can't update records?

amichelin
18 Sep 2010, 6:05 AM
Hi :

I have a grid, that has a tbar with a button.

The most rigth collumn is a checkbox collumn.

When the button is click, the handler button seach each record checked and makes and array tu a php
Back with a number generate in the db, i try tu update a collumn to show the number returned from db.

but i can see the change in the grid.




function CriarLote( oGrid )
{
Ext.MessageBox.confirm(
'Criação de lotes... ',
'Deseja cria o lote com as notas fiscais seleccionadas ?',
function(btn, text)
{
if ( btn == 'yes' )
{
///create an array with cehcked values
....
....

Ext.Ajax.request({
waitMsg: 'Gerando Lotes de Notas Fiscais...',
url: 'nfe_gravar_lotes.php',
method: 'POST',
params: { idempresa: ds.baseParams.idempresa, serie: ds.baseParams.serie,
notas: Ext.util.JSON.encode( aGravar ) },
//the function to be called upon failure of the request
//(404 error etc, ***NOT*** success=false)
failure:function(response,options) {
Ext.MessageBox.alert('Error',' Ocorreu um erro: ' + response.responseText);
oWait.hide();
},//end failure block

//The function to be called upon success of the request
success:function( response, options ) {

if ( typeof response.responseText != 'undefined' )
{
var responseData = Ext.util.JSON.decode( response.responseText);

if ( responseData.success )
{
Ext.MessageBox.show({ title: 'Ingresso... ',
msg: responseData.info,
buttons: Ext.Msg.OK,
icon: Ext.MessageBox.INFO,
fn: function(){
oWait.hide();
// here i try to change the collumn..
ds.each( function ( oRecord )
{
// if is checked...
if ( oRecord.data.idlote == 0 && oRecord.data.marcada == 1 )
{

// first option
oRecord.data.idlote = responseData.nrolote; // get the number from db
ds.commitChanges();
oGrid.getColumnModel().setRenderer( 6, function(n){ return StrZero( n, 7
) } );

// second option
ds.getById( oRecord.data.nronota ).data.idlote = responseData.nrolote;
ds.commitChanges();
oGrid.getColumnModel().setRenderer( 6,
function(n){ return StrZero( n, 7 ) } );


}

});
},
modal: true
});
} else {
Ext.MessageBox.show({ title: 'Ocorreu um erro ',
msg: responseData.info,
buttons: Ext.Msg.OK,
icon: Ext.MessageBox.ERROR,
fn: function(){ oWait.hide(); },
modal: true
});
sErro = responseData.info;
}
} else
Ext.MessageBox.show({ title: 'Ocorreu um erro ',
msg: 'Não foi recebida resposta do servidor',
buttons: Ext.Msg.OK,
icon: Ext.MessageBox.ERROR,
fn: function(){ oWait.hide(); },
modal: true
});

}//end success block
}); //end request



}
}
}
);

}
how to update the store and see in the grid the changes?

Help will be apreciated!!!

Thank in advance

I change the function that update the data in the store.



ds.each( function ( oRecord )
{
if ( oRecord.data.idlote == 0 && oRecord.data.marcada == 1 )
{
record = ds.getById( oRecord.data.nronota );
record.data.idlote = 12;
record.data.marcada = 0;
ds.commitChanges();
oGrid.getColumnModel().setRenderer( 6, function(n){ return StrZero( n, 7 ) } );
}

});




All the modification are made in the store.
But only the checkbox column shows the changes at the moment.

How to force the render of the idlote column to show the new value?

Thanks in advance

troseberry
18 Sep 2010, 9:48 AM
I dont see anywhere that you tell the grid's data store to reload()

amichelin
18 Sep 2010, 2:46 PM
PROBLEM SOLVED
I have a error in the name of a field.


var bAlterado = 0;
ds.each( function ( oRecord )
{
if ( oRecord.data.lote == 0 && oRecord.data.marcada == 1 )
{
record = ds.getById( oRecord.data.nronota ); // y get a reference to a record
record.data.lote = responseData.nrolote; // the dield name is not idlote, is lote
record.data.marcada = 0;
bAlterado = 1;
oGrid.getColumnModel().setRenderer( 6, function(n){ return StrZero( n, 7 ) } );
}
}

if ( Number( bAlterado ) == 1 )
ds.commitChanges();


The commitChange saves in the store and updates the grid, showing the changes.