PDA

View Full Version : Grid not load records



mhmorales
11 Nov 2009, 11:15 PM
Hello, i am a newbie with extjs.

Hi have two problems with my code.

1. The grid can not load records (in my firebug, I can see that the store is loaded).

2. I have problem with the edition actions, the window is not rendered the first time that enter in te page.

My code



<script type="text/javascript">

Ext.namespace('Usuarios');

/** Defino record para el listado y edicion de usuarios *********************************************************/

Usuarios.record = Ext.data.Record.create([
{name: 'idUsuario', type: 'int'},
'nombre', //{name: 'nombre', type: 'string'},
'apellido', //{name: 'apellido', type: 'string'},
'email', //{name: 'email', type: 'string'},
'clave', //{name: 'clave', type: 'string'},
{name: 'idEmpresa', type: 'int'},
'empresa', //{name: 'empresa', type: 'string'},
'codEstado',//{name: 'codEstado', type: 'string'},
'estado', //{name: 'estado', type: 'string'},
'codRol', //{name: 'codRol', type: 'string'},
'rol', //{name: 'rol', type: 'string'},
]);

/** Defino reader para el listado y edicion de usuarios *********************************************************/

Usuarios.reader = new Ext.data.JsonReader({
root: 'data',
// successProperty: 'success',
totalProperty: 'totalCount',
id: 'idUsuario'
}, Usuarios.record);


/** Defino store para el listado de usuarios ********************************************************************/

Usuarios.listadoStore = new Ext.data.JsonStore({
remoteSort: true,
autoLoad: true,
reader: Usuarios.reader,
url: 'usuarios/listar',
proxy: new Ext.data.HttpProxy({url:'usuarios/listar'}),
sortInfo: {field: 'idUsuario', direction: 'desc'}
});

//Usuarios.listadoStore.setDefaultSort('idUsuario', 'desc');

/** Defino ColModel para el listado de usuarios *****************************************************************/

Usuarios.listadoColModel = new Ext.grid.ColumnModel([
{
id: 'usuario.idUsuario',
header: 'ID',
dataIndex: 'idUsuario',
width: 30,
sortable: true
}, {
id:'usuario.nombre',
header: "Nombre",
dataIndex: 'nombre',
sortable: true
}, {
id:'usuario.apellido',
header: "Apellido",
dataIndex: 'apellido',
sortable: true
}, {
id:'usuario.email',
header: "Email",
dataIndex: 'email',
sortable: true
}, {
id:'usuario.empresa',
header: "Empresa",
dataIndex: 'empresa',
sortable: true
}, {
id:'usuario.estado',
header: "Estado",
dataIndex: 'estado',
width: 60,
sortable: true
}, {
id:'usuario.rol',
header: "Rol",
dataIndex: 'rol',
sortable: true
}
]);

/** Defino grilla para el listado de usuarios *******************************************************************/

Usuarios.listadoGrid = new Ext.grid.GridPanel({

loadMask: true,
colModel: Usuarios.listadoColModel,
store: Usuarios.listadoStore,

selModel: new Ext.grid.RowSelectionModel({
singleSelect: true
}),

viewConfig: {
forceFit: true
},

bbar: new Ext.PagingToolbar({
pageSize: 25,
store: Usuarios.listadoStore,
displayInfo: true,
displayMsg: 'Mostrando registros {0} - {1} of {2}',
emptyMsg: "No hay registros"
}),

tbar: [{
scope: this,
text: 'Nuevo usuario',
handler: Usuarios.nuevoUsuarioAccion,
iconCls: 'add'
}, {
scope: this,
text: 'Editar usuario',
handler: Usuarios.editarUsuarioAccion,
iconCls: 'client_edit_icon'
}, {
scope: this,
text: 'Eliminar usuario',
handler: Usuarios.eliminarUsuarioAccion,
iconCls: 'client_delete_icon'
}]
});

app.LenguetaUsuarios = Ext.getCmp('administracion_usuarios');
app.LenguetaUsuarios.add(Usuarios.listadoGrid);
app.LenguetaUsuarios.doLayout();

/** Defino formulario para el edicion de usuarios ***************************************************************/

Usuarios.edicionForm = new Ext.FormPanel({
frame : true,
reader: Usuarios.reader,
items: [{
name: 'idUsuario',
xtype: 'hidden'
}, {
fieldLabel: 'Nombre',
xtype: 'textfield',
name: 'nombre',
allowBlank: false
}, {
fieldLabel: 'Apellido',
xtype: 'textfield',
name: 'apellido',
allowBlank: false
}, {
fieldLabel: 'Email',
xtype: 'textfield',
name: 'email',
allowBlank: false
}, {
fieldLabel: 'Clave',
xtype: 'textfield',
name: 'clave',
allowBlank: false
}, {
fieldLabel: 'Empresa',
xtype: 'textfield',
name: 'idEmpresa',
allowBlank: false
}, {
fieldLabel: 'Estado',
xtype: 'textfield',
name: 'codEstado',
allowBlank: false
}, {
fieldLabel: 'Rol',
xtype: 'textfield',
name: 'codRol',
allowBlank: false
}]
});

/** Defino ventana para el edicion de usuarios ******************************************************************/

Usuarios.edicionWindow = new Ext.Window({
layout: 'fit',
modal: true,
title: 'Editar Usuario',
closeAction: 'hide',
resizable: false,
plain: true,
border: false,
width: 300,
height: 222,
items: [
Usuarios.edicionForm
]
});

/** Defino accion para nuevo usuario ****************************************************************************/

Usuarios.nuevoUsuarioAccion = function() {
console.log(Usuarios.listadoGrid.getSelectionModel().getSelected());
Usuarios.edicionWindow.show();
}

/** Defino accion para editar usuario ***************************************************************************/

Usuarios.editarUsuarioAccion = function() {
if (Usuarios.listadoGrid.getSelectionModel().getCount() == 0) {
return;
}

var usuarioRecord = Usuarios.listadoGrid.getSelectionModel().getSelected();

Usuarios.edicionForm.getForm().load({
url: 'usuarios/editar',
method: 'POST',
params: {
id: usuarioRecord.id
},
waitMsg: 'Cargando'
});


Usuarios.edicionWindow.show();
}

/** Defino accion para eliminar usuario *************************************************************************/

Usuarios.eliminarUsuarioAccion = function() {
console.log(Usuarios.listadoGrid.getSelectionModel().getSelected());
Usuarios.edicionWindow.show();
}

/****************************************************************************************************************/

</script>



The firebug console display



{totalCount: 100, data: [{"idUsuario":100,"nombre":"Marcelo","apellido":"Torres","email":"mhmorales@ecnex.com","clave":"elrbsest","idEmpresa":0,"codEstado":"ACTIVO","codRol":"ADMIN_SIS","empresa":null,"rol":"Administrador del sistema","estado":"Activo"},{"idUsuario":99,"nombre":"Marcelo","apellido":"Torres","email":"mhmorales@ecnex.com","clave":"elrbsest","idEmpresa":0,"codEstado":"ACTIVO","codRol":"ADMIN_SIS","empresa":null,"rol":"Administrador del sistema","estado":"Activo"},{"idUsuario":98,"nombre":"Marcelo","apellido":"Torres","email":"mhmorales@ecnex.com","clave":"elrbsest","idEmpresa":0,"codEstado":"ACTIVO","codRol":"ADMIN_SIS","empresa":null,"rol":"Administrador del sistema","estado":"Activo"},{"idUsuario":97,"nombre":"Marcelo","apellido":"Torres","email":"mhmorales@ecnex.com","clave":"elrbsest","idEmpresa":0,"codEstado":"ACTIVO","codRol":"ADMIN_SIS","empresa":null,"rol":"Administrador del sistema","estado":"Activo"},{"idUsuario":96,"nombre":"Marcelo","apellido":"Torres","email":"mhmorales@ecnex.com","clave":"elrbsest","idEmpresa":0,"codEstado":"ACTIVO","codRol":"ADMIN_SIS","empresa":null,"rol":"Administrador del sistema","estado":"Activo"},{"idUsuario":95,"nombre":"Marcelo","apellido":"Torres","email":"mhmorales@ecnex.com","clave":"elrbsest","idEmpresa":0,"codEstado":"ACTIVO","codRol":"ADMIN_SIS","empresa":null,"rol":"Administrador del sistema","estado":"Activo"},{"idUsuario":94,"nombre":"Marcelo","apellido":"Torres","email":"mhmorales@ecnex.com","clave":"elrbsest","idEmpresa":0,"codEstado":"ACTIVO","codRol":"ADMIN_SIS","empresa":null,"rol":"Administrador del sistema","estado":"Activo"},{"idUsuario":93,"nombre":"Marcelo","apellido":"Torres","email":"mhmorales@ecnex.com","clave":"elrbsest","idEmpresa":0,"codEstado":"ACTIVO","codRol":"ADMIN_SIS","empresa":null,"rol":"Administrador del sistema","estado":"Activo"},{"idUsuario":92,"nombre":"Marcelo","apellido":"Torres","email":"mhmorales@ecnex.com","clave":"elrbsest","idEmpresa":0,"codEstado":"ACTIVO","codRol":"ADMIN_SIS","empresa":null,"rol":"Administrador del sistema","estado":"Activo"},{"idUsuario":91,"nombre":"Marcelo","apellido":"Torres","email":"mhmorales@ecnex.com","clave":"elrbsest","idEmpresa":0,"codEstado":"ACTIVO","codRol":"ADMIN_SIS","empresa":null,"rol":"Administrador del sistema","estado":"Activo"},{"idUsuario":90,"nombre":"Marcelo","apellido":"Torres","email":"mhmorales@ecnex.com","clave":"elrbsest","idEmpresa":0,"codEstado":"ACTIVO","codRol":"ADMIN_SIS","empresa":null,"rol":"Administrador del sistema","estado":"Activo"},{"idUsuario":89,"nombre":"Marcelo","apellido":"Torres","email":"mhmorales@ecnex.com","clave":"elrbsest","idEmpresa":0,"codEstado":"ACTIVO","codRol":"ADMIN_SIS","empresa":null,"rol":"Administrador del sistema","estado":"Activo"},{"idUsuario":88,"nombre":"Marcelo","apellido":"Torres","email":"mhmorales@ecnex.com","clave":"elrbsest","idEmpresa":0,"codEstado":"ACTIVO","codRol":"ADMIN_SIS","empresa":null,"rol":"Administrador del sistema","estado":"Activo"},{"idUsuario":87,"nombre":"Marcelo","apellido":"Torres","email":"mhmorales@ecnex.com","clave":"elrbsest","idEmpresa":0,"codEstado":"ACTIVO","codRol":"ADMIN_SIS","empresa":null,"rol":"Administrador del sistema","estado":"Activo"},{"idUsuario":86,"nombre":"Marcelo","apellido":"Torres","email":"mhmorales@ecnex.com","clave":"elrbsest","idEmpresa":0,"codEstado":"ACTIVO","codRol":"ADMIN_SIS","empresa":null,"rol":"Administrador del sistema","estado":"Activo"},{"idUsuario":85,"nombre":"Marcelo","apellido":"Torres","email":"mhmorales@ecnex.com","clave":"elrbsest","idEmpresa":0,"codEstado":"ACTIVO","codRol":"ADMIN_SIS","empresa":null,"rol":"Administrador del sistema","estado":"Activo"},{"idUsuario":84,"nombre":"Marcelo","apellido":"Torres","email":"mhmorales@ecnex.com","clave":"elrbsest","idEmpresa":0,"codEstado":"ACTIVO","codRol":"ADMIN_SIS","empresa":null,"rol":"Administrador del sistema","estado":"Activo"},{"idUsuario":83,"nombre":"Marcelo","apellido":"Torres","email":"mhmorales@ecnex.com","clave":"elrbsest","idEmpresa":0,"codEstado":"ACTIVO","codRol":"ADMIN_SIS","empresa":null,"rol":"Administrador del sistema","estado":"Activo"},{"idUsuario":82,"nombre":"Marcelo","apellido":"Torres","email":"mhmorales@ecnex.com","clave":"elrbsest","idEmpresa":0,"codEstado":"ACTIVO","codRol":"ADMIN_SIS","empresa":null,"rol":"Administrador del sistema","estado":"Activo"},{"idUsuario":81,"nombre":"Marcelo","apellido":"Torres","email":"mhmorales@ecnex.com","clave":"elrbsest","idEmpresa":0,"codEstado":"ACTIVO","codRol":"ADMIN_SIS","empresa":null,"rol":"Administrador del sistema","estado":"Activo"},{"idUsuario":80,"nombre":"Marcelo","apellido":"Torres","email":"mhmorales@ecnex.com","clave":"elrbsest","idEmpresa":0,"codEstado":"ACTIVO","codRol":"ADMIN_SIS","empresa":null,"rol":"Administrador del sistema","estado":"Activo"},{"idUsuario":79,"nombre":"Marcelo","apellido":"Torres","email":"mhmorales@ecnex.com","clave":"elrbsest","idEmpresa":0,"codEstado":"ACTIVO","codRol":"ADMIN_SIS","empresa":null,"rol":"Administrador del sistema","estado":"Activo"},{"idUsuario":78,"nombre":"Marcelo","apellido":"Torres","email":"mhmorales@ecnex.com","clave":"elrbsest","idEmpresa":0,"codEstado":"ACTIVO","codRol":"ADMIN_SIS","empresa":null,"rol":"Administrador del sistema","estado":"Activo"},{"idUsuario":77,"nombre":"Marcelo","apellido":"Torres","email":"mhmorales@ecnex.com","clave":"elrbsest","idEmpresa":0,"codEstado":"ACTIVO","codRol":"ADMIN_SIS","empresa":null,"rol":"Administrador del sistema","estado":"Activo"},{"idUsuario":76,"nombre":"Marcelo","apellido":"Torres","email":"mhmorales@ecnex.com","clave":"elrbsest","idEmpresa":0,"codEstado":"ACTIVO","codRol":"ADMIN_SIS","empresa":null,"rol":"Administrador del sistema","estado":"Activo"}]}


can you help me?

Sorry, my english is not good.

carol.ext
12 Nov 2009, 6:53 AM
I doubt your store is loading the data you see in firebug. JsonStore (http://www.extjs.com/deploy/dev/docs/?class=Ext.data.JsonStore) does not use the reader that you include in the config, it creates a reader from the config. Take a look at the documentation, no reader listed in the JsonStore config options.

Instead of Ext.data.JsonStore use Ext.data.Store.


/** Defino reader para el listado y edicion de usuarios *********************************************************/

Usuarios.reader = new Ext.data.JsonReader({
root: 'data',
// successProperty: 'success',
totalProperty: 'totalCount',
id: 'idUsuario'
}, Usuarios.record);


/** Defino store para el listado de usuarios ********************************************************************/

Usuarios.listadoStore = new Ext.data.JsonStore({ // change to Ext.data.Store
remoteSort: true,
autoLoad: true,
reader: Usuarios.reader,
url: 'usuarios/listar',
proxy: new Ext.data.HttpProxy({url:'usuarios/listar'}),
sortInfo: {field: 'idUsuario', direction: 'desc'}
});

MaximGB
12 Nov 2009, 7:03 AM
Try to set an explicit height for the grid panel, it might be that your grid is loaded but it has 0 height. If having set the height you'll see the grid rows then you should set up a layout properly.