Buenas, vengo trabajando recientemente con extjs y e logrado que mediante un grid y un par de botones guarde elimine y modifique, hasta hay todo bien.
Ahora he hecho 2 tablas una alumno y una curso al hacer clic en el alumno se deberia mostrar los cursos en los que esta inscrito, he logrado mandar los datos al segundo grid pero el problema es que no lo recarga y por lo tanto los datos no se muestran(poniendo el id del alumno en la consulta si los carga).
Mi pregunta es como puedo hacer para refrescar los 2 grid automáticamente al ejecutar.
Selecciono el boton ver cursos y si una fila esta selecionada me manda los el id del curso y eso lo meto en una consulta.
Aqui ven como los datos llegan pero no recarga el grid.
Tengo este que me muestra los alumnos.
Código Javascript
:
Ver originalExt.onReady(function(){
Ext.QuickTips.init();
var grid = 0;
// create the data store
var campos = Ext.data.Record.create([
{name: 'id'},
{name: 'nombre', type: 'string'},
{name: 'edad', type: 'number'},
{name: 'telefono', type: 'number'}
]);
var reader = new Ext.data.JsonReader({
root: 'estudiantes2',
totalProperty: 'total',
},
campos
);
var store = new Ext.data.GroupingStore({
proxy: new Ext.data.HttpProxy({
url: 'estudiantes2.php',
method: 'POST',
id: 'id'
}),
baseParams:{
task: "showdata",
start: 0,
limit: 5,
idprueba: 1
},
reader: reader
});
store.load();
var agregarEstudianteForm = new Ext.form.FormPanel({
id:'agregarEstudianteForm',
url: 'agregarEstudiante.php',
items: [
{
xtype: 'textfield', // Ext.form.TextField Componente que acepta datos alfanumericos
fieldLabel: 'Nombre',
hiddenName: 'nombre',
name:'nombre',
blankText: 'Nombre completo',
allowBlank: false
},
{
xtype: 'textfield', // Ext.form.TextField Componente que acepta datos alfanumericos
fieldLabel: 'Edad',
hiddenName:'edad',
name:'edad',
allowBlank: false
},
{
xtype: 'textfield', // Ext.form.TextField Componente que acepta datos alfanumericos
fieldLabel: 'Telefono',
hiddenName:'telefono',
name:'telefono'
}
]
});
var agregarEstudianteWin = new Ext.Window({
title: 'Nuevo estudiante',
width: 400,
height:300,
modal: true,
closable:false,
bodyStyle:'padding:5px;',
buttonAlign:'center',
items: agregarEstudianteForm,
buttons: [
{
text: 'Guardar',
handler: function(){
if (agregarEstudianteForm.getForm().isValid()) {
agregarEstudianteForm.getForm().submit({
method: 'POST',
waitTitle: 'Validando datos',
waitMsg: 'Enviando datos..',
success: function(form, action){
var data = Ext.util.JSON.decode(action.response.responseText);
alert(data.message.reason);
agregarEstudianteForm.getForm().reset();
store.reload();
},
failure: function(form, action){
var data = Ext.util.JSON.decode(action.response.responseText);
alert('Error\n' + data.errors.reason);
}
});
agregarEstudianteWin.hide();
}
}
},
{
text: 'Cancelar',
handler: function(){ agregarEstudianteWin.hide(); }
}
]
});
function mostrarCurso() {
var seleccionados = grid.selModel.selections.keys;
if(seleccionados.length > 0 ){
if (confirm('Se cargaran los cursos')){
var ids = Ext.encode(seleccionados);
Ext.Ajax.request(
{
waitMsg: 'Cargando ...',
url: 'cursos2.php',
params: {
task: "Show",
ids: ids,
key: 'ids'
},
callback: function (options, success, response) {
if (success) {
var json = Ext.util.JSON.decode(response.responseText);
alert(json.del_count + ' curso(s) cargado(s)');
} else{
alert('Error inesperado \n'+ response.responseText);
}
},
failure:function(response,options){
alert('Error ...');
},
success:function(response,options){
store.removeAll();
store.reload();
}
});
}
} else {
alert('Seleccione al menos un registro para mostrar');
}
}
function eliminarEstudiante() {
var seleccionados = grid.selModel.selections.keys;
if(seleccionados.length > 0 ){
if (confirm('Realmente quiere eliminar los registros selecionados?')){
var ids = Ext.encode(seleccionados);
Ext.Ajax.request(
{
waitMsg: 'Eliminando ...',
url: 'eliminarEstudiante.php',
params: {
task: "delete",
ids: ids,
key: 'id'
},
callback: function (options, success, response) {
if (success) {
var json = Ext.util.JSON.decode(response.responseText);
alert(json.del_count + ' registro(s) eliminado(s)');
} else{
alert('Error inesperado \n'+ response.responseText);
}
},
failure:function(response,options){
alert('Error ...');
},
success:function(response,options){
store.removeAll();
store.reload();
}
});
}
} else {
alert('Seleccione al menos un registro para eliminar');
}
}
function editarEstudiante(grid) {
Ext.Ajax.request({
waitMsg: 'Guardando...',
url: 'editarEstudiante.php',
method: 'POST',
params: {
task: "update",
key: 'id',
keyID: grid.record.data.id,
data: Ext.encode(grid.record.data),//the column name
field: grid.field,
value: grid.value
},
failure:function(response,options){
alert('Error ...');
},
success:function(response,options){
store.reload();
}
});
};
// create the Grid
grid = new Ext.grid.EditorGridPanel({
store: store,
columns: [
{
id :'nombre',
header : 'Nombre',
dataIndex: 'nombre',
editor: new Ext.form.TextField({
allowBlank: false
})
},
{
header : 'Edad',
dataIndex: 'edad',
editor: new Ext.form.TextField({
allowBlank: false
})
},
{
header : 'Telefono',
dataIndex: 'telefono',
editor: new Ext.form.TextField({
allowBlank: false
})
}
],
stripeRows: true,
autoExpandColumn: 'nombre',
height: 350,
width: 300,
title: 'Estudiantes',
tbar:[
{
text: 'Nuevo',
tooltip: 'Nuevo estudiante',
handler: function(){agregarEstudianteWin.show()},
icon: 'add.png',
iconAlign: 'top'
},
{
text: 'Eliminar',
tooltip: 'Eliminar registro',
handler: eliminarEstudiante,
icon: 'delete.png',
iconAlign: 'top'
},
{
text: 'Ver Cursos',
tooltip: 'Ver Cursos',
handler: mostrarCurso,
icon: 'lupa.jpg',
iconAlign: 'top'
}
],
bbar: new Ext.PagingToolbar({
pageSize: 5,
store: store,
displayInfo: true
}),
listeners:{'afteredit':editarEstudiante},
selModel: new Ext.grid.RowSelectionModel({singleSelect:true})
});
// render the grid to the specified div in the page
grid.render('gridn');
});
El otro js es parecido solo que me muesta los cursos.
Y asi los visualizo
Código HTML:
Ver original type="text/css"
href="ext34/resources/css/ext-all.css" />
.izquierda {
float:left;
}
.derecha {
float:left;
width:320px;
}
<div id="gridn" class="derecha"></div> <div id="gridc" class="derecha"></div>
Espero que me puedan orientar un poco.
Saludos.