Templates y Temas para ExtJS y Sencha Touch Bleext!
Bleextop! un desktop OpenSource para Ext4 y CodeIgniter http://bit.ly/pUwLJO
[Solcuionado]Combos Dinamicos + Grid
  • Vote Up0Vote Down mehparramehparra July 2009
    Posts: 64
    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.
  • 16 Answers sorted by
  • Vote Up0Vote Down CrysfelCrysfel July 2009
    Posts: 897
    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
  • Vote Up0Vote Down mehparramehparra July 2009
    Posts: 64
    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 :( 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 :(

    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();
    });
    }
    });

  • Vote Up0Vote Down elcrespoelcrespo July 2009
    Posts: 158
    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 store del grid (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 combo

    O

    //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
  • Vote Up0Vote Down mehparramehparra July 2009
    Posts: 64
    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 :(, dejo el archivo haber sipueden ayudarme.
  • Vote Up0Vote Down elcrespoelcrespo July 2009
    Posts: 158
    Estuve mirando tu código y encontré algunas cosas:

    1) en el código

    listeners:{
    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
  • Vote Up0Vote Down CrysfelCrysfel July 2009
    Posts: 897
    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
  • Vote Up0Vote Down elcrespoelcrespo July 2009
    Posts: 158
    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
  • Vote Up0Vote Down mehparramehparra July 2009
    Posts: 64
    Muchas Gracias Stock y Crespo. Claro que de la seguridad me encargo yo. Grcias ^^
  • Vote Up0Vote Down mehparramehparra August 2009
    Posts: 64
    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?
  • Vote Up0Vote Down elcrespoelcrespo August 2009
    Posts: 158
    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 filter1


    ahora 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 $filter

    tal vez esa idea te ayude.

    salu2

    Crespo
  • Vote Up0Vote Down mehparramehparra August 2009
    Posts: 64
    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')}});
    });
  • Vote Up0Vote Down CrysfelCrysfel August 2009
    Posts: 897
    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.
  • Vote Up0Vote Down mehparramehparra August 2009
    Posts: 64
    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.
  • Vote Up0Vote Down elcrespoelcrespo August 2009
    Posts: 158
    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
  • Vote Up0Vote Down mehparramehparra August 2009
    Posts: 64
    Gracias Stock, Gracias Crespo, Salío con el getValue, como no lo pude haber utilizado 8-) meresco la orca jejeje, gracias otra vez.
  • Vote Up0Vote Down elcrespoelcrespo August 2009
    Posts: 158
    me alegra que hayas podido resolverlo ;)

    salu2

    Crespo

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Login with Facebook Sign In with Twitter

Sign In Apply for Membership

In this Discussion

Poll

No poll attached to this discussion.