PDA

View Full Version : Can't select any row in GridPanel



jesfre
17 Mar 2009, 11:51 AM
I have a newbie problem with a GridPanel (gridResultados).
I have a search window, 1 textfield, 1 button, 1 grid.
The grid has a dataStore named storeResultados, but this is not loaded since the window open event, but that is loaded when the user types in the textfield and does click on the button.
After the search complete, the grid shows the found data, however It's imposible to select any row.
Selection works only if the storeResultados is loaded in the opening of the window.

My code.


this.cm = new Ext.grid.ColumnModel([
new Ext.grid.RowNumberer(),
{dataIndex: 'idBitacora', sortable: true, header: 'ID',width:100},
{dataIndex: 'fecha', sortable: true, header: this.msg.fecha,width:100},
{dataIndex: 'usuario', sortable: true, header: this.msg.usuario,width:100},
{dataIndex: 'modulo', sortable: true, header: this.msg.modulo,width:150},
{dataIndex: 'accion', sortable: true, header: this.msg.accion,width:100},
{dataIndex: 'descripcion', sortable: true, header: this.msg.descripcion,width:250}
]);
this.pagingToolbar = new Ext.PagingToolbar({
pageSize: this.pageSize,
displayInfo: true,
// displayMsg: 'Total: {2} registros. De {0} a {1}',
emptyMsg: 'Cero',
store: this.resultadoStore
});
this.gridResultados = new Ext.grid.GridPanel({
id: 'gridResultados',
border: false,
autoWidth: true,
height:280,
ds: this.resultadoStore,
cm: this.cm,
loadMask: true,
viewConfig: {forceFit:true},
bbar: this.pagingToolbar,
sm: new Ext.grid.RowSelectionModel({singleSelect:true}),
listeners:{
rowdblclick: this.showDetalle.createDelegate(this)
}
});
The search event:


buscarEvent: function() {
Mensaje.esperar(this.msg.buscando);
this.gridResultados.store = this.helper.findQuery(this.txtQuery.getValue());
this.gridResultados.getStore().proxy.reset();
this.gridResultados.getStore().reload();
this.gridResultados.getStore().on('load',function(s,r,o){

Ext.Msg.hide();
this.gridResultados.getView().refresh();
this.gridResultados.setVisible(true);
}.createDelegate(this));
}
What's wrong?

Tanks in advance...

mjlecomte
17 Mar 2009, 12:56 PM
You've only shown part of your code, but looks like you're creating some kind of class. You probably have a bug in your code somewhere.

Read through this in entirety:
http://extjs.com/learn/Ext_Forum_Help#Posting_a_working_showcase

jesfre
17 Mar 2009, 1:02 PM
Thanks for reply.
Yes, the code is from a class named Bitacora.
There is the entire code.



Ext.namespace('bitacora');

bitacora.Bitacora = new Class({
msg: {
titulo: Ziidi.getProperty('bitacora.titulo'),
fecha: Ziidi.getProperty('bitacora.resultado.fecha'),
usuario: Ziidi.getProperty('bitacora.resultado.usuario'),
modulo: Ziidi.getProperty('bitacora.resultado.modulo'),
accion: Ziidi.getProperty('bitacora.resultado.accion'),
descripcion: Ziidi.getProperty('bitacora.resultado.descripcion'),
//Acciones
buscar: Ziidi.getProperty('common.buscar'),
cerrar: Ziidi.getProperty('common.cerrar'),
buscando: Ziidi.getProperty('common.buscando')
},
resultadoStore: null,
helper: null,
selectedRow: null,
initialize: function(initialConfig){
Ext.apply(this, initialConfig);
this.pageSize = 10;
this.helper = new bitacora.BitacoraHelper({context:this.context});
this.resultadoStore = this.helper.findQuery('jesfre');
this.resultadoStore.load();
this.txtQuery = new Ext.form.TextField({
id: 'txtQuery',
fieldLabel: this.msg.buscar,
emptyText: this.msg.buscar,
value:'',
width:300,
border: false
});
this.btnBuscar = new Ext.Button({
id: 'btnBuscar',
text: this.msg.buscar,
handler: this.buscarEvent.createDelegate(this)
});
this.panel1 = new Ext.Panel({
id: 'panel1',
layout: 'form',
items: [this.txtQuery, this.btnBuscar]
});

this.cm = new Ext.grid.ColumnModel([
new Ext.grid.RowNumberer(),
{dataIndex: 'idBitacora', sortable: true, header: 'ID',width:100},
{dataIndex: 'fecha', sortable: true, header: this.msg.fecha,width:100},
{dataIndex: 'usuario', sortable: true, header: this.msg.usuario,width:100},
{dataIndex: 'modulo', sortable: true, header: this.msg.modulo,width:150},
{dataIndex: 'accion', sortable: true, header: this.msg.accion,width:100},
{dataIndex: 'descripcion', sortable: true, header: this.msg.descripcion,width:250}
]);
this.pagingToolbar = new Ext.PagingToolbar({
pageSize: this.pageSize,
displayInfo: true,
// displayMsg: 'Total: {2} registros. De {0} a {1}',
emptyMsg: 'Cero',
store: this.resultadoStore
});
this.gridResultados = new Ext.grid.GridPanel({
id: 'gridResultados',
border: false,
autoWidth: true,
height:280,
ds: this.resultadoStore,
cm: this.cm,
loadMask: true,
viewConfig: {forceFit:true},
bbar: this.pagingToolbar,
sm: new Ext.grid.RowSelectionModel({singleSelect:true}),
listeners:{
rowdblclick: this.showDetalle.createDelegate(this)
}
});
this.window = Ziidi.desktop.createWindow({
id:'winBitacora',
title:'Nueva ventana',
layout:'form',
width:800,
height:400,
minimizable:true,
maximizable:true,
modalWindow: true,
plain:'false',
buttons: [
{
text: this.msg.cerrar,
handler: this.cancelEvent.createDelegate(this)
}
],
items: [this.txtQuery, this.btnBuscar,this.gridResultados]
});
this.window.on({
show: function(){
// this.gridResultados.getBottomToolbar().loading.handler = function() {
// this.resultadoStore.proxy.reset();
// this.resultadoStore.reload();
// }.createDelegate(this);
}.createDelegate(this)
});
this.window.show();
},
cancelEvent: function() {
;
},
buscarEvent: function() {
Mensaje.esperar(this.msg.buscando);
this.gridResultados.store = this.helper.findQuery(this.txtQuery.getValue());
// this.resultadoStore.load({params:{start:0, limit:this.pageSize}});
this.gridResultados.getStore().proxy.reset();
this.gridResultados.getStore().reload();
this.gridResultados.getStore().on('load',function(s,r,o){
//
//// this.gridResultados.getBottomToolbar().loading.handler = function() {
//// this.gridResultados.getStore().proxy.reset();
//// this.gridResultados.getStore().reload();
//// }.createDelegate(this);
//
Ext.Msg.hide();
this.gridResultados.getView().refresh();
//// this.gridResultados.setVisible(true);
}.createDelegate(this));
},
showDetalle: function() {
// var bitacora = this.gridResultados.getSelectionModel().getSelected().data;
// var idBitacora = bitacora.idBitacora;
// var store = this.helper.getDetalle(idBitacora);
// store.load();

var txaDetalle = new Ext.form.TextArea({
id: 'txaDetalle',
width: 100,
height: 100
});
var xmlWindow = Ziidi.desktop.createWindow({
title: 'XML',
bodyStyle: 'padding: 0px',
height: 400,
width: 400,
layout: 'form',
parentWindow: this.window,
modalWindow: true,
minimizable: false,
maximizable: true,
modalWindow: true,
resizable:true,
items:[txaDetalle]
});
xmlWindow.on({
show: function(){
var bitacora = this.gridResultados.getSelectionModel().getSelected().data;
var idBitacora = bitacora.idBitacora;
var store = this.helper.getDetalle(idBitacora);
alert(store);
var record = store.getAt(0);
var detalle = record.data.detalle;
txaDetalle.setValue(detalle);
}.createDelegate(this)
});
xmlWindow.show();
}
});
new bitacora.Bitacora({context:Ziidi.CONTEXT_PATH});

mjlecomte
17 Mar 2009, 1:09 PM
I'd suggest take your code down to a simple proof of concept that does almost nothing then slowly add to it until you break it.

jesfre
18 Mar 2009, 9:43 AM
Yes, I did...
And nothing.

jesfre
18 Mar 2009, 5:58 PM
The problem were found in this first line:


this.gridResultados.store = this.helper.findQuery(this.txtQuery.getValue());

That is because new instances of Ext.data.Store have been created.
The findQuery(...) function of my Helper class returns a new Store.

the solution is this.


...
this.gridResultados.getStore().proxy= new Ext.data.HttpProxy({url:this.context+'/administracion/bitacora/findQuery.do'});
this.gridResultados.getStore().load({params:{start:0, limit:this.pageSize, query:this.txtQuery.getValue()}});
...


Thanks for reply...