Combos remotos y carga de formularios
Hola a todos <!-- s:D --><!-- s:D --> , he estado haciendo y deshaciendo con extjs <!-- s:lol: --><!-- s:lol: --> pero aprendiendo mucho en cada intento y logro. Tengo un formulario que carga su información desde base de datos, en dicho formulario hay dos combos y uno depende del otro, acá pongo el código:
<script type="text/javascript" language="Javascript">
var form = new Ext.form.FormPanel({
border:false,
labelWidth: 100,
autoShow: false,
defaults: { xtype:'textfield' },
items:[
{
xtype: 'fieldset',
title: 'Datos generales',
defaults: { xtype:'textfield' },
items: [
{
fieldLabel:'Nombres',
name:'t_nombres',
id:'t_nombres',
itemId:'t_nombres',
anchor: '100%'
},
{
fieldLabel:'Apellidos',
name:'t_apellidos',
id:'t_apellidos',
itemId:'t_apellidos',
anchor: '100%'
},
{
xtype:'combo',
fieldLabel:'Sexo',
name:'t_sexo',
id:'t_sexo',
itemId:'t_sexo',
triggerAction:'all',
store:[
['M','Masculino'],
['F','Femenino'],
['N','No especificado']
]
}
]
},
{
xtype: 'fieldset',
title: 'Datos de nacimiento',
defaults: { xtype:'combo' },
items: [
{
xtype:'datefield',
fieldLabel:'Fecha',
name:'f_nacimiento',
id:'f_nacimiento',
itemId:'f_nacimiento',
format:'d/m/Y'
},
{
fieldLabel:'Estado',
name:'id_estado_nac',
id:'id_estado_nac',
itemId:'id_estado_nac',
triggerAction:'all',
store:new Ext.data.JsonStore({
url:'include/misc/combo.get.php',
method: 'POST',
autoLoad: true,
baseParams: {
fields: 'id_estado_ven, t_nombre',
table: 'tblmya_estado_ven'
},
root: 'data',
totalProperty: 'total',
fields: [
{ name:'id', mapping: 0 },
{ name:'texto', mapping: 1 }
],
sortInfo: {
field: 'texto',
direction: 'ASC'
}
}),
valueField: 'id',
displayField: 'texto',
listeners: {
scope: this,
select: function(cmb, record, index){
cboestado = Ext.getCmp('id_estado_nac');
cbomunicipio = Ext.getCmp('id_municipio_nac');
cbomunicipio.enable();
cbomunicipio.clearValue();
cbomunicipio.getStore().load({
params:{
fields: 'id_municipio_ven, t_nombre, id_estado_ven',
table: 'tblmya_municipio_ven',
condition: 'id_estado_ven='+record.get('id')
}
});
}
}
},
{
fieldLabel:'Municipio',
name:'id_municipio_nac',
id:'id_municipio_nac',
itemId:'id_municipio_nac',
triggerAction:'all',
disabled:true,
autoWidth: true,
mode:'local',
emptyText:'Seleccione un estado',
store:new Ext.data.JsonStore({
url:'include/misc/combo.get.php',
method: 'POST',
autoLoad: true,
baseParams: {
fields: 'id_municipio_ven, t_nombre',
table: 'tblmya_municipio_ven'
},
root: 'data',
totalProperty: 'total',
fields: [
{ name:'id', mapping: 0 },
{ name:'texto', mapping: 1 },
{ name:'extra', mapping: 2 }
],
sortInfo: {
field: 'texto',
direction: 'ASC'
}
}),
valueField: 'id',
displayField: 'texto',
listeners: {
scope: this,
expand:function(combo){
combo.getStore().load({
params:{
fields: 'id_municipio_ven, t_nombre',
table: 'tblmya_municipio_ven',
condition: 'id_estado_ven='+Ext.getCmp('id_estado_nac').getValue()
}
});
},
beforeload: function(store){
store.baseParams = {
fields: 'id_municipio_ven, t_nombre',
table: 'tblmya_municipio_ven',
condition: 'id_estado_ven='+Ext.getCmp('id_estado_nac').getValue()
};
}
}
}
]
},
{
xtype: 'fieldset',
title: 'Otros datos',
defaults: { xtype:'combo' },
items: [
{
xtype:'textarea',
fieldLabel:'Dirección',
name:'t_direccion',
id:'t_direccion',
itemId:'t_direccion',
anchor: '100%'
},
{
xtype:'textfield',
fieldLabel:'E-mail',
name:'t_email',
id:'t_email',
itemId:'t_email',
vtype:'email',
anchor: '100%'
},
{
xtype:'checkbox',
fieldLabel:'Condición',
boxLabel:'Activo',
name:'l_activo',
id:'l_activo',
itemId:'l_activo',
anchor:'100%'
}
]
}
]
});
var win = new Ext.Window({
id: 'wusuario',
itemId: 'wusuario',
title: 'Datos de usuario',
bodyStyle: 'padding:10px;background-color:#fff;',
width: 400,
autoHeight: true,
items: form,
renderTo: App.mainPanel.body,
buttons: [{
text: 'Cargar datos',
handler: function(button, event){
form.getForm().load({
method:'POST',
url: 'tests/loadfromdatabase.get.php',
timeout: 30,
params:{id:<?php echo $_POST['id'] ?>},
success: function(form, action){
for(var i=0; i<form.items.length; i++ ){
if( form.items.items[i].getXType()=='combo' )
form.items.items[i].enable();
}
},
failure: function(form, action){
alert(action.result.message);
}
});
}
}]
}).show();
win.center();
</script>
Explico un poco: el código anterior es de una pag que llamo de manera asíncrona, es una pag php dado que le paso como parámetro vía POST el valor del id del registro a cargar, ésta página a su vez llama mediante el load a otra pag php para cargar los datos del formulario, además los combos se cargan desde otra pag php.
El formulario funciona casi sin ningún problema, realmente lo que busco son 2 cosas:
1.- <!-- s:D --><!-- s:D --> Saber si una mejor forma de colocar el código que tengo.
2.- <!-- s:roll: --><!-- s:roll: --> Poder corregir un bug: una vez cargados los datos, cambio el valor del primer combo, entonces en el segundo combo se limpia el valor, se vacía la lista y se vuelve a cargar con los valores dependientes del valor del primer combo, pero, una vez hecho esto, vuelvo a hacer click en el botón cargar datos, los carga bien a excepción del segundo combo, pues me coloca el valor como texto (el valor es numérico) y debe ser el texto no el valor lo que se muestre.
Usuario no registrado
15/12/2009
Normalmente eso sucede cuando no existe el value en el combo, asegurate de que cuando asignas el valor al combo este contenga el value que le estas asignando dentro de la lista de opciones.
saludos
Crysfel Villa
15/12/2009
[quote]Normalmente eso sucede cuando no existe el value en el combo, asegurate de que cuando asignas el valor al combo este contenga el value que le estas asignando dentro de la lista de opciones.[/quote]
Gracias a esto, me puse a pensar en como se supone que se comporta el formulario, y luego de deshacer y rehacer, de echar a perder y acomodar nuevamente, lo he conseguido, este es el código resultante <!-- s:ugeek: --><!-- s:ugeek: --> :
<script type="text/javascript" language="Javascript">
var form = new Ext.form.FormPanel({
border:false,
labelWidth: 100,
autoShow: false,
defaults: { xtype:'textfield' },
items:[
{
xtype: 'fieldset',
title: 'Datos generales',
defaults: { xtype:'textfield' },
items: [
{
fieldLabel:'Nombres',
name:'t_nombres',
id:'t_nombres',
itemId:'t_nombres',
anchor: '100%'
},
{
fieldLabel:'Apellidos',
name:'t_apellidos',
id:'t_apellidos',
itemId:'t_apellidos',
anchor: '100%'
},
{
xtype:'combo',
fieldLabel:'Sexo',
name:'t_sexo',
id:'t_sexo',
itemId:'t_sexo',
triggerAction:'all',
store:[
['M','Masculino'],
['F','Femenino'],
['N','No especificado']
]
}
]
},
{
xtype: 'fieldset',
title: 'Datos de nacimiento',
defaults: { xtype:'combo' },
items: [
{
xtype:'datefield',
fieldLabel:'Fecha',
name:'f_nacimiento',
id:'f_nacimiento',
itemId:'f_nacimiento',
format:'d/m/Y'
},
{
fieldLabel:'Estado',
name:'id_estado_nac',
id:'id_estado_nac',
itemId:'id_estado_nac',
triggerAction:'all',
store:new Ext.data.JsonStore({
url:'include/misc/combo.get.php',
method: 'POST',
autoLoad: true,
baseParams: {
fields: 'id_estado_ven, t_nombre',
table: 'tblmya_estado_ven'
},
root: 'data',
totalProperty: 'total',
fields: [
{ name:'id', mapping: 0 },
{ name:'texto', mapping: 1 }
],
sortInfo: {
field: 'texto',
direction: 'ASC'
}
}),
valueField: 'id',
displayField: 'texto',
listeners: {
beforequery: function(query){
query.combo.lastQuery = null;
},
select: function(cmb, record, index){ //(3)
cbom = Ext.getCmp('id_municipio_nac');
cbom.enable();
if( record.get('id')!=cmb.getValue() ) cbom.clearValue();
cbom.getStore().load({
params:{
fields: 'id_municipio_ven, t_nombre',
table: 'tblmya_municipio_ven',
condition: 'id_estado_ven='+record.get('id')
}
});
}
}
},
{
fieldLabel:'División',
name:'id_municipio_nac',
id:'id_municipio_nac',
itemId:'id_municipio_nac',
triggerAction:'all',
disabled:true,
autoWidth: true,
emptyText:'Seleccione un estado',
store:new Ext.data.JsonStore({
url:'include/misc/combo.get.php',
method: 'POST',
root: 'data',
totalProperty: 'total',
fields: [
{ name:'id', mapping: 0 },
{ name:'texto', mapping: 1 }
],
sortInfo: {
field: 'texto',
direction: 'ASC'
}
}),
valueField: 'id',
displayField: 'texto',
listeners: {
expand: function(cbom){ //(2)
cboe = Ext.getCmp('id_estado_nac');
if( cboe.getValue()!='' ){
cbom.enable();
cbom.getStore().load({
params:{
fields: 'id_municipio_ven, t_nombre',
table: 'tblmya_municipio_ven',
condition: 'id_estado_ven='+cboe.getValue()
}
});
}
}
}
}
]
},
{
xtype: 'fieldset',
title: 'Otros datos',
defaults: { xtype:'combo', anchor:'100%' },
items: [
{
xtype:'textarea',
fieldLabel:'Dirección',
name:'t_direccion',
id:'t_direccion',
itemId:'t_direccion'
},
{
xtype:'textfield',
fieldLabel:'E-mail',
name:'t_email',
id:'t_email',
itemId:'t_email',
vtype:'email'
},
{
xtype:'checkbox',
fieldLabel:'Condición',
boxLabel:'Activo',
name:'l_activo',
id:'l_activo',
itemId:'l_activo'
}
]
}
],
listeners: {
beforeaction: function(form, action){ //(1)
if(action.type=='load'){
cboe = Ext.getCmp('id_estado_nac');
cbom = Ext.getCmp('id_municipio_nac');
cbom.enable();
cbom.getStore().load({
params:{
fields: 'id_municipio_ven, t_nombre',
table: 'tblmya_municipio_ven'
}
});
}
}
}
});
var win = new Ext.Window({
id: 'wusuario',
itemId: 'wusuario',
title: 'Datos de usuario',
bodyStyle: 'padding:10px;background-color:#fff;',
width: 400,
autoHeight: true,
items: form,
renderTo: App.mainPanel.body,
buttons: [{
text: 'Cargar datos',
handler: function(button, event){
form.getForm().load({
method:'POST',
url: 'tests/loadfromdatabase.get.php',
timeout: 30,
params:{id:<?php echo $_POST['id'] ?>},
failure: function(form, action){
Ext.msg.alert(action.result.message);
}
});
}
}]
}).show();
win.center();
</script> Para no hacer la cosa complicada con una explicación extensa <!-- s:geek: --><!-- s:geek: --> , el error era que al momento de ejecutarse el load del formulario, el combo id_municipio_nac estaba poblado con los datos anteriores lo que excluía casi siempre al nuevo valor a cargar, dando como resultado que el combo mostrara el código en vez del texto. La corrección que se hizo fue que el formulario cargara todos los valores del combo id_municipio_nac cada vez que se hiciera la carga de datos (load del formulario) [color=#FF0000](1)[/color] y filtrarlos cada vez que el usuario listara el combo id_municipio_nac [color=#FF0000](2)[/color] además de adecuar dicho combo cuando el usuario seleccionara un valor en id_estado_nac [color=#FF0000](3)[/color]
Gracias stock por darme luz para encontrar la solución <!-- s:D --><!-- s:D --> Ahora puedo dormir tranquilo <!-- s:lol: --><!-- s:lol: -->
Invitado
15/12/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.