[Solcuionado]Combos Dinamicos + Grid
Hola que tal, Quisiera un ejemplo como lleno combobox desde php y mysql con Extjs. deacuerdo al item dinamico de la lista, me liste un grid tomando en cuenta el filtro del combobox.
ponle un listener al combo para cuando sea seleccionado se dispare... luego, dentro de esta función simplemente haces un "load" al store del grid con los parámetros que necesites filtrar.
cmb.on('select',function(combo,record,index){ grid.getStore().load({params: {filter: record.get('value')}}); })saludos
Lo probe así, aun que tambien lo eh probado de muchas formas. metiedole parametro a la funcion, pero mi problema es con dos tablas, las dos tablas tienes un campo en comun que es "idespecialidad" y debe funcionar cunado filtro por parametro con la funcion que me escribiste stock pero no funciona <!-- s:( --><!-- s:( --> y los datos dinamicos si me cargan el combo idespecialidad me carga y tmb me carga el grid si el load lo pongo por ejemplo al ultimo tambien me carga el grid con los datos, pero cuando aplico la funcion del combo no pasa nada cuando selecciono los valores del combito <!-- s:( --><!-- s:( -->
Acá el codigo Php
function ListarCombo1() { $query = "SELECT * FROM t_especialidad"; $result = mysql_query($query); while($rec = mysql_fetch_array($result)){ $arr[] = $rec; } $jsonresult = JEncode($arr); echo '({"total":"'.$nbrows.'","results":'.$jsonresult.'})'; } function ListarGrid() { $query = "SELECT * FROM t_consulta"; $result = mysql_query($query); while($rec = mysql_fetch_array($result)){ $arr[] = $rec; } $jsonresult = JEncode($arr); echo '({"total":"'.$nbrows.'","results":'.$jsonresult.'})'; }El codigo Ext
var ColumnModel; var EditorGrid; var DatastoreCombo1; var DatastoreLista; var programa; Ext.onReady(function(){ Ext.QuickTips.init(); //data del combo DatastoreCombo1 = new Ext.data.Store({ id: 'DatastoreCombo1', proxy: new Ext.data.HttpProxy({ url: 'michito.php', method: 'POST' }), baseParams:{envio: "ListarCombo1"}, reader: new Ext.data.JsonReader({ root: 'results' },[ {name: 'idespecialidad', type: 'int', mapping: 'idespecialidad'}, ]) }); //Combo dentro de un listiner que carga datos del store listeners: { combo1 = new Ext.form.ComboBox({ id: 'Combo1', fieldLabel:'Programa', name:'Combo1', //forceSelection: true, store: DatastoreCombo1, emptyText:'Seleccione', triggerAction: 'all', editable:false, displayField:'idespecialidad', valueField: 'idespecialidad' }); } //datos del grid que esta relacionado con idespecialidad DatastoreLista = new Ext.data.Store({ id: 'DatastoreLista', proxy: new Ext.data.HttpProxy({ url: 'michito.php', method: 'POST' }), baseParams:{envio: "ListarGrid"}, reader: new Ext.data.JsonReader({ root: 'results' },[ {name: 'username', type: 'string', mapping: 'username'}, {name: 'idespecialidad', type: 'int', mapping: 'idespecialidad'}, ]) }); //columnas ColumnModel = new Ext.grid.ColumnModel( [{ header: 'Nombre', dataIndex: 'username', width: 300 },{ header: 'Nombre', dataIndex: 'idespecialidad', width: 300 }] ); //el grid ColumnModel.defaultSortable= true; EditorGrid = new Ext.grid.EditorGridPanel({ id: 'EditorGrid', store: DatastoreLista,// DatastoreLista, cm: ColumnModel, autoScroll:true, enableColLock:false, clicksToEdit:1, width:682, height:238, selModel: new Ext.grid.RowSelectionModel({singleSelect:false}) }); //La funcion para seleccionar un item del combo y te liste los datos filtrados DatastoreCombo1.on('select',function(DatastoreCombo1,record,index){ EditorGrid.getStore().load({params: {filter: record.get('idespecialidad')}}); DatastoreLista.load(); }); programa=new Ext.Window({ title: 'IIMP PROGRAMA', bodyStyle:'padding: 8px', width:854, height:374, items: [combo1,EditorGrid], layout:'form' }); //DatastoreLista.load(); programa.show(); });PUSE EL COMBO DE ESTA FORMA TAMBIEN, PERO ME SALE ERROR: error:missing : after property id DatastoreCombo1.on('select',function(Combo1,record,index){\n
combo1 = new Ext.form.ComboBox({ id: 'Combo1', fieldLabel:'Programa', name: 'Combo1', forceSelection: true, store: DatastoreCombo1, emptyText:'Seleccione', triggerAction: 'all', displayField:'idespecialidad', valueField: 'idespecialidad', editable:false, mode:'local', listeners: { DatastoreCombo1.on('select',function(DatastoreCombo1,record,index){ EditorGrid.getStore().load({params: {filter: record.get('idespecialidad')}}); DatastoreLista.load(); }); } });
mira no creo que debas colocar tu combo dentro del listener..
listeners: { combo1 = new Ext.form.ComboBox({ id: 'Combo1', fieldLabel:'Programa', name:'Combo1', //forceSelection: true, store: DatastoreCombo1, emptyText:'Seleccione', triggerAction: 'all', editable:false, displayField:'idespecialidad', valueField: 'idespecialidad' });lo que puedes hacer es colocar el combo fuera :
var combo1 = new Ext.form.ComboBox({ id: 'Combo1', fieldLabel:'Programa', name:'Combo1', //forceSelection: true, store: DatastoreCombo1, emptyText:'Seleccione', triggerAction: 'all', editable:false, displayField:'idespecialidad', valueField: 'idespecialidad' });y dentro del listener hacer la recarga del [b]store del grid[/b] (como te lo explico stock) que acabamos de hacer:
listeners: { select:function(combo,record,index){ grid.getStore().load({params: {filter: record.get('value')}}); }El problema que te da tu codigo:
combo1 = new Ext.form.ComboBox({ id: 'Combo1', fieldLabel:'Programa', name: 'Combo1', forceSelection: true, store: DatastoreCombo1, emptyText:'Seleccione', triggerAction: 'all', displayField:'idespecialidad', valueField: 'idespecialidad', editable:false, mode:'local', listeners: { DatastoreCombo1.on('select',function(DatastoreCombo1,record,index)//<-- es listener es al comobobox no al Store{ EditorGrid.getStore().load({params: {filter: record.get('idespecialidad')}}); DatastoreLista.load(); });Es que estas tratando declarando un listener al Store "DatastoreCombo1", y lo debes declarar es al combobox y la declaración de un listener debe tener el formato que te coloque más arriba.
combobox.on('select',function(DatastoreCombo1,record,index){//aca el código}); //<-- esto si agregas el listener después de declarar el comboO
//de esta manera si quieres hacerlo dentro de la declaración del combo listener: { select: function(DatastoreCombo1,record,index){ //acá el código } }Trata de resolver esos puntos y nos cuentas cómo te fue. Salu2 Crespo
Bueno lo puse como me dijiste Crespo pero nada, Con una sola tabla si al parecer llama ah Load, es decir cuando llamo al Load de el combo en el Listiner alparecer si funciona pero no me serviria de nada, pero cuando llamo al otro store, no pasa nada <!-- s:( --><!-- s:( -->, dejo el archivo haber sipueden ayudarme.
Estuve mirando tu código y encontré algunas cosas:
1) en el código
listener[b]s[/b]:{
select: function(DatastoreCombo1,record,index){
EditorGrid.getStore().load({params: {filter: record.get('idespecialidad')}});
//DatastoreLista.load();
}}
te había faltado la s.. creo que fue error mio al colocar el código
2) cuando dices:
EditorGrid.getStore().load({params: {filter: record.get('idespecialidad')}});lo que estas haciendo es enviando un parámetro que se llama filter al archivo michito.php, que debe ser el encargado de devolver las consultas, entonces debes recibir ese parámetro llamado filter y deacuerdo al contenido que tenga devolver la consulta correspondiente, por ejemplo para este caso deberías modificar tu función
function ListarGrid()paraque quede de la siguiente manera:
function ListarGrid() { $filter="1=1"; //<-- inicio el valor de la variable filtro con una comparación que siempre será positiva if(isset($_REQUEST['filter'])){ //<-- si he enviado la variable filter $filter=" idespecialidad = ".$_REQUEST['filter']; //<-- le digo que solo traiga los que tengan un idespecialidad igual al que viene en la variable 'filter' } //$idespecialidad=$_POST['idespecialidad']; $query = "SELECT * FROM t_consulta where ".$filter; //<--agrego a la consulta el where y concateno la variable filter $result = mysql_query($query); while($rec = mysql_fetch_array($result)){ $arr[] = $rec; } $jsonresult = JEncode($arr); echo '({"total":"'.$nbrows.'","results":'.$jsonresult.'})'; }De esta manera todo debe estar funcionando perfecto, ya lo probé en mi pc y hace correctamente el filtrado. Te dejo anexo el archivo con los cambios que le hice.. acuerdate de arreglar o remplazar el index por el original.. Espero te haya servido la explicación.. Salu2 Crespo
Solo recuerden tener cuidado con el SQL Injection, el código PHP de elcrespo es bulnerable a un ataque de este tipo, no utilices ese código en producción, recuerda que aqui en el foro solo te damos la idea principal y tu eres el responsable de implementar seguridad y demas cosas.
saludos
hazle caso a stock, solo se te muestra algo paraque te guíes, ya después tu podrás declarar algún procedimiento almacenado que evite el riesgo de SQL Injection
salu2
Crespo
Retomando un poco el tema, eh intentado de muchas formas, pero no me sale, como seria si tengo dos filtros en un combobox. ejemplo:
$filter1=""; $filter2=""; if( isset($_REQUEST['filter1'])){ $filter1=$_REQUEST['filter1']; } elseif(isset($_REQUEST['filter2'])){ $filter2=$_REQUEST['filter2']; } el query del grid. $query = " SELECT coalesce( ( SELECT DISTINCT 1 FROM tb_cm_agenda WHERE id_programa = tp.id_programa AND id_contacto =".$id_usuario." AND in_tipo =2 ), 0 ) AS in_agenda, tp.id_programa, date_format( tp.dt_fecha, '%d/%m/%Y %h:%i %p' ) dt_fecha, tp.st_titulo, tp.st_cuerpo, tt.st_nombre AS str_grupo, tb.st_nombre AS str_sala FROM `tb_cm_programa` tp INNER JOIN tb_tablamaestra tt ON tp.id_grupo = tt.id_tabla INNER JOIN tb_tablamaestra tb ON tp.id_sala = tb.id_tabla WHERE tp.in_activo =1 AND date_format( tp.dt_fecha, '%d/%m/%Y' ) = '".$filter1."' AND tp.id_grupo = ".$filter2." ORDER BY tp.dt_fecha, tp.id_grupo, tp.id_sala, tp.st_titulo ";Ahora los combos
combo1 = new Ext.form.ComboBox({ id: 'combo1', fieldLabel:'Fecha', name: 'combo1', forceSelection: true, store: DatastoreCombo1, emptyText:'Seleccione', triggerAction: 'all', displayField:'dt_fecha', valueField: 'dt_fecha', hiddenName : 'dt_fecha', editable:false, listeners:{ select: function(DatastoreCombo1,record,index){ EditorGrid.getStore().load({params: {filter1: record.get('dt_fecha')}}); //Ext.Msg.alert("ID: "+ record.get('dt_fecha')); //DatastoreLista.load(); }} }); combo2 = new Ext.form.ComboBox({ id: 'combo2', fieldLabel:'Grupos', name: 'combo2', forceSelection: true, store: DatastoreCombo2, emptyText:'Seleccione', triggerAction: 'all', displayField:'st_nombre', valueField: 'id_grupo', hiddenName : 'id_grupo', editable:false, listeners:{ select: function(DatastoreCombo2,record,index){ EditorGrid.getStore().load({params: {filter2: record.get('id_grupo')}}); // Ext.Msg.alert("ID: "+ record.get('id_grupo')); //DatastoreLista.load(); }} });Los combos son independientes, no tienen relacion alguna, pero los dos si tienen relacion con al grid, el problema es qué si saco cualquiera linea de estas dos me funciona a la perfeccion. AND date_format( tp.dt_fecha, '%d/%m/%Y' ) = '".$filter1."' AND tp.id_grupo = ".$filter2." Pero quiero que funciona con los dos filtros y solo me funciona con uno, eh probado los dos por separado y si funcionan, habra una manera de hacerlo?
creo que lo que esta ocurriendo es que estas llamando el listener select en cada uno de los combos y solo estas enviando el valor de cada combo:
EditorGrid.getStore().load({params: {filter2: record.get('id_grupo')}}); //<-- acá deberías enviar tambien el valor del filter1ahora sino hay nada seleccionado en uno de los filtros deberias iniciar cada variable con algun valor asi:
$filter1="1 = 1";y si existe la variable filtes colocarle:
$filter1= "date_format( tp.dt_fecha, '%d/%m/%Y' ) ='".$filter1"' "y luego en tu consulta quedaría el and:
AND $filtertal vez esa idea te ayude. salu2 Crespo
Lo puse asi, pero no me sale, como te digo, si quito uno de los 2 filtros en el query de mysql y en el extjs , me sale la aplicacion bien , pero solo con un combo, lo pongo con 2 combos y ya no sale nada de nada.
combo1.on('select',function(DatastoreCombo1,record,index){ EditorGrid.getStore().load({params: {filter1: record.get('dt_fecha')}}); EditorGrid.getStore().load({params: {filter2: record.get('id_grupo')}}); }); combo2.on('select',function(DatastoreCombo2,record,index){ EditorGrid.getStore().load({params: {filter1: record.get('dt_fecha')}}); EditorGrid.getStore().load({params: {filter2: record.get('id_grupo')}}); });
prueba así:
combo1.on('select',function(DatastoreCombo1,record,index){ EditorGrid.getStore().load({ params: { filter1: record.get('dt_fecha'), //envias los dos filtros filter2: record.get('id_grupo') //en la MISMA petición } }); });Es que estas haciendo dos peticiones al mismo tiempo, por lo tanto solo una funciona.
Lo probe así tambien.
combo1.on('select',function(DatastoreCombo1,record,index){ EditorGrid.getStore().load({ params: { filter1: record.get('dt_fecha'), filter2: record.get('id_grupo') } }); }); combo2.on('select',function(DatastoreCombo2,record,index){ EditorGrid.getStore().load({ params: { filter1: record.get('dt_fecha'), filter2: record.get('id_grupo') } }); });Y me sale esto. seleccionando el combo fecha: envio: ListarGrid -> el grid que se tiene que disparar filter1 15/09/2009 -> el valor del primer combo filter2 -> vacio el otro combo igual. pero viceversa. asumo que el valor de la fecha si esta detectando por el echo de que el evento es datastorecombo1, donde ahi solo hay fecha.
lo que sucede, es que tienes que recuperarlos de los combobox correspodientes, es decir:
params: { filter1: combo1.getValue(), filter2: combo2.getValue() }trata de esa manera
Gracias Stock, Gracias Crespo, Salío con el getValue, como no lo pude haber utilizado <!-- s8-) --><!-- s8-) --> meresco la orca jejeje, gracias otra vez.
¿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.