[Solucionado]Llenar form a partir de un record seleccionado
Hola amigos he leído el tutorial publicado que explica como hacer esto lo he visto un millón de veces y nada, no se que pasa en mi app que cuando le digo al formulario:
formPaciente.getForm().loadRecord(rec);
Pero los combos que tengo en el formulario me muestran el id y no el valor que tienen.
Usuario no registrado
30/09/2009
y los combos ya están precargados? es decir, cuando haces el "loadRecord" los combos ya contienen la lista de opciones a seleccionar?
Crysfel Villa
30/09/2009
si, inclusive si despliego el combo aparecen los valores que quiero pero inicialmente el que em aparece es el id y no el nombre
Invitado
01/10/2009
ok, mira aki pongo el código completo pa que vean y me digan que estoy haciendo mal, jejeje
<script type="text/javascript">
//Variables Globales
var cambio= 0;
var rec,idgrid,ventana,datos;
//Campos que van en la ventana
var mun = new app.ComboMun();
var prov = new app.ComboProv({
listeners: {
'beforeselect': function(cb,rec,index){
mun.clearValue();
mun.store.load({params:{idProv: rec.get('idProvincia')}});
}
}
});
var csexo= new app.ComboSexo();
var raza= new app.ComboRaza();
var nombre = new Ext.form.TextField({
fieldLabel : 'Nombre(s)',
name : 'nombre',
id:'idnombre',
allowBlank : false,
maskRe:/^([a-zA-Z0-9áéíóúñüÑ,. ]+ ?[a-zA-Z0-9áéíóúñüÑ,. ]*)+$/,
blankText : 'Este campo es obligatorio',
listeners:{
change: function(){cambio = 1;}
}
});
var papellido=new Ext.form.TextField({
fieldLabel : 'Primer Apellido',
name : 'apellido1',
id:'idapellido1',
allowBlank : false,
maskRe:/^([a-zA-Z0-9áéíóúñüÑ,. ]+ ?[a-zA-Z0-9áéíóúñüÑ,. ]*)+$/,
blankText : 'Este campo es obligatorio',
listeners:{
change: function(){cambio = 1;}
}
});
var sapellido= new Ext.form.TextField({
fieldLabel : 'Segundo Apellido',
name : 'apellido2',
width: 110,
id:'idapellido2',
allowBlank : false,
maskRe:/^([a-zA-Z0-9áéíóúñüÑ,. ]+ ?[a-zA-Z0-9áéíóúñüÑ,. ]*)+$/,
blankText : 'Este campo es obligatorio',
listeners:{
change: function(){cambio = 1;}
}
});
var hc= new Ext.form.TextField({
fieldLabel : 'Historía Clínica',
name : 'historiaC',
id:'idhc',
allowBlank : false,
blankText : 'Este campo es obligatorio',
listeners:{
change: function(){cambio = 1;}
}
});
var ci= new Ext.form.TextField({
fieldLabel : 'CI',
name : 'ci',
id : 'idci',
allowBlank : false,
maxLength : 11,
maskRe : /^[0-9]+$/,
minLength : 11,
blankText : 'Este campo es obligatorio',
listeners:{
change: function(){cambio = 1;}
}
});
var edad= new Ext.form.TextField({
fieldLabel : 'Edad',
name : 'edad',
id:'idedad',
width : 70,
allowBlank : false,
maskRe : /^[0-9]+$/,
blankText : 'Este campo es obligatorio',
listeners:{
change: function(){cambio = 1;}
}
});
var telf= new Ext.form.TextField({
fieldLabel : 'Teléfono',
name : 'telef',
id:'idtelf',
maskRe : /^[0-9]+$/,
blankText : 'Este campo es obligatorio',
listeners:{
change: function(){cambio = 1;}
}
});
var correo= new Ext.form.TextField({
fieldLabel : 'Correo',
name : 'email',
id:'idcorreo',
vtype:'email',
width: 110,
listeners:{
change: function(){cambio = 1;}
}
});
var adress= new Ext.form.TextArea({
id:'idadress',
name: 'direccion',
height: 100,
fieldLabel:'Dirección',
listeners:{
change: function(){cambio = 1;}
}
});
var formPaciente= new Ext.FormPanel({
border:false,
id: 'frmInsPaciente',
labelAlign : 'top',
frame: true,
items:[{
layout : 'column',
items:[{
columnWidth : .35,
layout : 'form',
items:[nombre,hc,csexo,prov]
},{
columnWidth : .35,
layout : 'form',
items:[papellido,ci,raza,mun]
},{
columnWidth : .30,
layout : 'form',
items:[sapellido,edad,telf,correo]
}]
},{
layout: 'fit',
title:'Dirección',
items:[adress]
}]
});
// function SexoCombo(){
// ventana.findById('frmInsPaciente').findById('idsexo').setValue(csexo.store.data.items[datos].get('sexo'));
// // ventana.findById('frmInsPaciente').findById('idRaza').setValue(raza.store.fields.items[datos].get('raza'));
// console.info(raza.store.data.items[datos]);
// }
function GestionarPaciente(opcion)
{
switch (opcion) {
case 'INS':{
if(!ventana){
ventana= new Ext.Window({
title:'Insertar Paciente',
width: 500,
modal : true,
height: 405,
closable: false,
items:[formPaciente],
buttonAlign : 'right',
buttons : [{
text : 'Aceptar',
icon:'add',
iconCls:'add',
handler : function() {
if (formPaciente.getForm().isValid()) {
formPaciente.form.submit({
url:'index.php/Paciente/insPaciente',
waitTitle: "Enviando Datos",
waitMsg : "Espere un momento por favor......",
failure: function(sender,action){
Ext.utiles.msg('Error', 'No se ha podido insertar <br> Vuelva a Intentarlo');
},
success: function(sender,action) {
Ext.utiles.msg('Mensaje del Sistema', 'Usuario Insertado');
formPaciente.form.reset();
storePacientes.reload();
}
});
}
}
}, {
text : 'Cerrar',
icon:'remove',
iconCls:'remove',
handler : function() {
formPaciente.form.reset();
sm.clearSelections();
CambiarEstadoBotones();
ventana.hide();
}
}]
});
ventana.show();
break;
}else{
ventana.show();
break;
}
break;
}
case 'MOD':{
if(!ventana){
ventana= new Ext.Window({
title:'Modificar Paciente',
width: 500,
modal : true,
height: 405,
closable: false,
items:[formPaciente],
buttonAlign : 'right',
buttons : [{
text : 'Aceptar',
icon:'add',
iconCls:'add',
handler : function() {
if (formPaciente.getForm().isValid()) {
formPaciente.form.submit({
waitTitle: "Enviando Datos",
waitMsg : "Espere un momento por favor......",
failure: function(sender,action){
Ext.utiles.msg('Error', 'No se ha podido insertar <br> Vuelva a Intentarlo');
},
success: function(sender,action) {
Ext.utiles.msg('Mensaje del Sistema', 'Usuario Insertado');
formPaciente.form.reset();
storePacientes.reload();
}
});
}
}
}, {
text : 'Cerrar',
icon:'remove',
iconCls:'remove',
handler : function() {
formPaciente.form.reset();
sm.clearSelections();
CambiarEstadoBotones();
ventana.hide();
}
}]
});
ventana.show();
formPaciente.getForm().loadRecord(rec);
// SexoCombo();
break;
}else{
ventana.show();
formPaciente.getForm().loadRecord(rec);
// SexoCombo();
break;
}
break;
}
}
}
//Store para Mostrar datos
var storePacientes= new app.StorePacientes();
storePacientes.load();
//Botones de la Grid
var btnEliminar= new Ext.Button({
disabled: true,
id:'btnEliminar',
text: 'Eliminar',
tooltip:'Eliminar Paciente',
iconCls:'user_delete',
handler: function(){
EliminarPaciente();
}
});
var btnModificar=new Ext.Button({
text: 'Modificar',
id:'btnModificar',
disabled: true,
tooltip:'Modificar Paciente',
iconCls:'user_edit',
handler: function(){
GestionarPaciente('MOD');
}
});
var btnInsertar= new Ext.Button({
text: 'Nuevo',
id:'btnInsertar',
tooltip:'Nuevo Paciente',
iconCls:'user_add',
handler: function(){
GestionarPaciente('INS');
}
});
//Acción sobre selección de una fila
var sm = new Ext.grid.RowSelectionModel({
singleSelect : true,
listeners : {
rowselect : On_RowClick
}
});
function On_RowClick(sm,indiceFila, record){
rec=record;
datos=indiceFila;
CambiarEstadoBotones();
};
function EstaSelect(){
return sm.hasSelection();
}
function CambiarEstadoBotones(){
if(EstaSelect()){
btnEliminar.enable();
btnModificar.enable();
}else{
btnEliminar.disable();
btnModificar.disable();
}
}
//Acción para eliminar un paciente
function EliminarPaciente(){
Ext.MessageBox.show({
title: 'Eliminar',
msg:'¿Desea eliminar el paciente?',
buttons: Ext.MessageBox.OKCANCEL,
fn: elimina,
icon: Ext.MessageBox.QUESTION
});
function elimina(btnPresionado){
if(btnPresionado=='ok'){
Ext.Ajax.request({
url:'index.php/Paciente/deletePaciente',
method:'POST',
params:{
idPaciente: sm.getSelected().get('idPaciente')
},
success: function(sender,action){
Ext.utiles.msg('Mensaje del Sistema', 'Usuario Eliminado');
storePacientes.reload();
sm.clearSelections();
CambiarEstadoBotones();
},
failure: function(sender,action){
Ext.utiles.msg('Error', 'No se ha podido eliminar <br> Vuelva a Intentarlo');
}
})
}else{
sm.clearSelections();
CambiarEstadoBotones();
}
}
}
//Grid Con los datos de los pacientes
var pacientesGrid= new Ext.grid.GridPanel({
id: 'gridPacientes',
height:350,
store: storePacientes,
loadMask: {msg: 'Cargando datos'},
minHeight:200,
split:true,
sm: sm,
autoScroll: true,
border: true,
columns:[
new Ext.grid.RowNumberer(),
{
header:'História Clínica',
dataIndex:'historiaC'
},
{
hidden: true,
hideable: false,
dataIndex: 'idPaciente'
},{
header:'Nombre',
dataIndex:'nombre'
},{
header:'Primer Apellido',
dataIndex:'apellido1'
},{
header:'Segundo Apellido',
dataIndex:'apellido2'
},{
header:'Carnet Identidad',
dataIndex:'ci'
}],
tbar:[btnInsertar,'-',btnModificar,'-',btnEliminar],
stripeRows: true,
bbar : new Ext.PagingToolbar({
pageSize : 25,
store: storePacientes
})
});
//pane contenedor de la grid
var panelGridPacientes= new Ext.Panel({
id:'panelGridPcientes',
baseCls: 'x-plain',
layout: 'fit',
items: [pacientesGrid]
});
app.tab_clientes=Ext.getCmp('gestPaciente');
app.tab_clientes.add(panelGridPacientes);
app.tab_clientes.doLayout();
</script>
//Código del combo Sexo que está por supuesto en otro archivo
app.ComboSexo = function(config) {
var config = config || {};
var datos = [['0','Femenino'], ['1','Masculino']];
var campos= ['idsexo','sexo'];
var storeSexo = new Ext.data.SimpleStore({fields: campos, data : datos});
Ext.applyIf(config,{
name:'sexo',
id:'idsexo',
hiddenName:'sexo',
fieldLabel: 'Sexo',
displayField:'sexo',
store : storeSexo,
mode: 'local',
emptyText: 'Seleccione...',
triggerAction: 'all',
selectOnFocus:true,
forceSelection:true,
allowBlank:false,
width: 100
});
// call the superclass's constructor
app.ComboSexo.superclass.constructor.call(this, config);
};
Ext.extend(app.ComboSexo, Ext.form.ComboBox);
Invitado
01/10/2009
Pon el el combo el atributo valueField : 'idsexo'
Ya me dirás si ese era el problema. <!-- s;) --><!-- s;) -->
Invitado
01/10/2009
efectivamente amigo ese era el problema con ese combo pero ahora me quedan los de raza,provincia y municipio que los tengo casi idénticos a el de raza y no funcionan siguen mostrando el id, aki te pongo el código de ellos.
/***************** COMBO RAZA ******************/
app.ComboRaza= function(config){
var config= config || {};
var storeRaza= new Ext.data.JsonStore({
url:'index.php/Combos/getJSONRaza',
root:'datos',
totalProperty:'cant',
fields: app.razaRecord
});
Ext.applyIf(config,{
name:'raza',
id:'idRaza',
valueField:'idRaza',
hiddenName:'raza',
fieldLabel: 'Raza',
store : storeRaza,
displayField:'raza',
mode: 'remote',
emptyText: 'Seleccione...',
triggerAction: 'all',
selectOnFocus:true,
forceSelection:true,
allowBlank:false,
width: 100
});
app.ComboRaza.superclass.constructor.call(this, config);
};
Ext.extend(app.ComboRaza, Ext.form.ComboBox);
/***************** COMBO PROVINCIA ******************/
app.ComboProv= function(config){
var config= config || {};
var storeProvincia= new Ext.data.JsonStore({
url: 'index.php/Combos/getJSONProvincia',
root:'datos',
totalProperty:'cant',
fields: app.provinciaRecord
});
Ext.applyIf(config,{
name:'idProvincia',
id:'idProv',
fieldLabel: 'Provincia',
displayField:'provincia',
hiddenName:'idProvincia',
valueField:'idProvincia',
store : storeProvincia,
mode: 'remote',
emptyText: 'Seleccione...',
triggerAction: 'all',
selectOnFocus:true,
forceSelection:true,
allowBlank:false,
width: 140
});
app.ComboProv.superclass.constructor.call(this, config);
};
Ext.extend(app.ComboProv, Ext.form.ComboBox);
/***************** COMBO Municipios ******************/
app.ComboMun= function(config){
var config= config || {};
var storeMun= new Ext.data.JsonStore({
url: 'index.php/Combos/getJSONMunicipio',
root:'datos',
totalProperty:'cant',
fields: app.municipioRecord,
baseParams:{idProv: 0}
});
Ext.applyIf(config,{
name:'idMunicipio',
fieldLabel: 'Municipio',
displayField:'municipio',
hiddenName:'idMunicipio',
valueField:'idMunicipio',
store : storeMun,
mode: 'local',
emptyText: 'Seleccione...',
triggerAction: 'all',
allowBlank:false,
width: 140
});
app.ComboMun.superclass.constructor.call(this, config);
};
Ext.extend(app.ComboMun, Ext.form.ComboBox);
Invitado
01/10/2009
¿Conoces a alguien que pueda responder esta pregunta? Comparte el link en Twitter o Facebook
Es necesario registrarse para poder participar en el foro! Si ya tienes una cuenta puedes entrar y comentar en este foro.