Results 1 to 2 of 2

Thread: basic question regarding combobox and stores

  1. #1

    Default basic question regarding combobox and stores

    Hello everyone,

    I purchased a module which now I am in need of manually modifying. This module uses ext js 3.0.2, which I have never used before.

    I want to create a dynamic combobox (a child combobox which loads depending on values selected in a parent combobox). These comboboxes are static, the values are NOT loaded from a database.

    I found two links that I thought might help me:

    http://www.extjs.com/learn/Tutorial:...rial_for_Ext_2 (this is for version 2 but might work)

    http://www.extjs.com/forum/showthrea...inked+combobox

    My idea is to filter the child combobox using a listener in the parent combobox which calls the function store.filter . My problem is that this function receives as first argument the name of the store field but I dont know how to create store fields with names (yes, I am really noob).

    Please, can you point me how to:
    - Create static stores specifying field names. I prefer to dont use JSON or Ajax as I dont have experience with this, or is is really needed?
    - How to correctly call the store.filter function

    Many thanks in advance for your time.

    This is my code:

    Code:
    var fs = new Ext.FormPanel({
            frame:            true,
            title:            "Iver S.A. - Busqueda / Search",
            id:                "lqmForm94",
            labelAlign:        "left",
            labelWidth:        120,
            waitMsgTarget:    true,
            defaultType:    "textfield",
            fileUpload:        false,
            bodyStyle:        "padding:5px 5px 0",
            width:            "auto",
            buttonAlign:    "left",
            items: [     
    
            {
            fieldLabel: 'Categoria',
            name: 'combolqm_Categoria',
            xtype: 'combo',
            mode: 'local',
            typeAhead: true,
            triggerAction: 'all',
            minListWidth: 182,
            forceSelection: true,
            hiddenName: 'lqm_Categoria[]',
            emptyText: '- Seleccione -',
            store:[['','- Seleccione -','0'],['Aditivos','Aditivos','1'],['Equipos e Instrumentos de laboratorio','Equipos e Instrumentos de laboratorio','2'],['Maquinarias','Maquinarias','3'],['Otros','Otros','4'],['Pigmentos','Pigmentos','5'],['Resinas','Resinas','6']],
            cls: 'input',
            listeners:{select:{fn:function(combo, value) {
                            var comboGrupo = Ext.getCmp('combolqm_Grupo');        
                            comboGrupo.clear();
                            comboGrupo.store.filter(??, ??I WANT TO RETRIEVE THE THIRD COLUMN HERE OF COMBO combolqm_Categoria);
                            }}
                        }                 
        },
    
        {
            fieldLabel: 'Grupo',
            name: 'combolqm_Grupo',
            xtype: 'combo',
            mode: 'local',
            typeAhead: true,
            triggerAction: 'all',
            minListWidth: 182,
            forceSelection: true,
            hiddenName: 'lqm_Grupo[]',
            emptyText: '- Seleccione -',
            store:[['','- Seleccione -','0'],['ABRASION','ABRASION','2'],['ACIDO ACETICO','ACIDO ACETICO','4'],['ACIDO FOSFORICO TG Y FG','ACIDO FOSFORICO TG Y FG','4'],['ACIDO NITRICO','ACIDO NITRICO','4'],['ACIDOS HUMICOS Y FULVICOS','ACIDOS HUMICOS Y FULVICOS','4'],['ACRILICOS','ACRILICOS','6'],['ADHESION Y ELASTICIDAD','ADHESION Y ELASTICIDAD','2'],['ADITIVOS DE LUBRICANTES','ADITIVOS DE LUBRICANTES','4'],['AGENTES REOLOGICOS','AGENTES REOLOGICOS','1'],['ANHIDRIDO FTALICO','ANHIDRIDO FTALICO','4'],['ANHIDRIDO MALEICO','ANHIDRIDO MALEICO','4'],['ANTICORROSIVOS','ANTICORROSIVOS','5'],['ANTIESPUMANTES','ANTIESPUMANTES','1'],['ANTIPIEL','ANTIPIEL','1'],['APARIENCIA','APARIENCIA','2'],['APLICACION','APLICACION','2'],['BALANZAS','BALANZAS','2'],['BLANQUEADORES OPTICOS','BLANQUEADORES OPTICOS','1'],['BRILLO','BRILLO','2'],['CADMIO','CADMIO','5'],['CARBONATO DE POTASIO','CARBONATO DE POTASIO','4'],['CATALIZADORES','CATALIZADORES','1'],['CERAS','CERAS','1'],['CIANURO DE SODIO','CIANURO DE SODIO','4'],['CLOROFORMO','CLOROFORMO','4'],['CLORURO DE METILENO','CLORURO DE METILENO','4'],['COLOFONIAS','COLOFONIAS','6'],['COLOR','COLOR','2'],['COMPLEJOS METALICOS','COMPLEJOS METALICOS','5'],['CORROSION','CORROSION','2'],['DEFORMACION','DEFORMACION','2'],['DENSIDAD','DENSIDAD','2'],['DENSITOMETRIA','DENSITOMETRIA','2'],['DESAIREANTES','DESAIREANTES','1'],['DISPERSANTES','DISPERSANTES','1'],['DISPERSION','DISPERSION','2'],['DISPERSOS','DISPERSOS','5'],['DUREZA','DUREZA','2'],['ENDURECEDORES','ENDURECEDORES','6'],['EPOXICAS','EPOXICAS','6'],['ESPESANTES','ESPESANTES','1'],['ESPESOR DE PELICULA','ESPESOR DE PELICULA','2'],['ESPUMANTES','ESPUMANTES','1'],['EXTENDEDORES','EXTENDEDORES','5'],['FENOL','FENOL','4'],['FENOLICAS','FENOLICAS','6'],['FIBRAS DE CELULOSA','FIBRAS DE CELULOSA','1'],['FLUORESCENTES','FLUORESCENTES','5'],['FOSFORESCENTES','FOSFORESCENTES','5'],['GLITTERS','GLITTERS','5'],['HIDROFUGANTES','HIDROFUGANTES','1'],['HIDROXIDO DE ALUMINIO','HIDROXIDO DE ALUMINIO','4'],['HIDROXIDO DE COBALTO','HIDROXIDO DE COBALTO','4'],['HIDROXIDO DE POTASIO','HIDROXIDO DE POTASIO','4'],['HUMECTANTES','HUMECTANTES','1'],['HUMEDAD','HUMEDAD','2'],['INORGANICOS','INORGANICOS','5'],['ISOCIANATOS','ISOCIANATOS','6'],['LIGNOSULFONATOS','LIGNOSULFONATOS','2'],['MALEICAS','MALEICAS','6'],['MATEANTES','MATEANTES','1'],['MELAMINICAS','MELAMINICAS','6'],['METALICOS','METALICOS','5'],['MICROESFERAS DE VIDRIO PARA DEMARCACION VIAL','MICROESFERAS DE VIDRIO PARA DEMARCACION VIAL','4'],['MICROESFERAS DE VIDRIO PARA MOLIENDA','MICROESFERAS DE VIDRIO PARA MOLIENDA','4'],['MOLIENDA / DISPERSION','MOLIENDA / DISPERSION','2'],['NITROCELULOSA','NITROCELULOSA','6'],['NIVELANTES','NIVELANTES','1'],['OPACIDAD','OPACIDAD','2'],['ORGANICOS','ORGANICOS','5'],['OXIDO DE COBALTO','OXIDO DE COBALTO','4'],['OXIDO DE NIQUEL','OXIDO DE NIQUEL','4'],['PERLADOS','PERLADOS','5'],['PEROXIDO DE HIDROGENO','PEROXIDO DE HIDROGENO','4'],['PET','PET','6'],['PLASTIFICANTES','PLASTIFICANTES','1'],['POLIAMIDA NO REACTIVA','POLIAMIDA NO REACTIVA','6'],['POLIESTER','POLIESTER','6'],['POLIESTER SATURADO','POLIESTER SATURADO','6'],['POLIESTIRENO','POLIESTIRENO','6'],['POLIETILENO DE ALTA DENSIDAD','POLIETILENO DE ALTA DENSIDAD','6'],['POLIETILENO DE BAJA DENSIDAD','POLIETILENO DE BAJA DENSIDAD','6'],['POLIOLES','POLIOLES','6'],['POLIPROPILENO','POLIPROPILENO','6'],['POLIURETANICAS','POLIURETANICAS','6'],['POLVO DE ZINC','POLVO DE ZINC','4'],['POROSIDAD / PINHOLE','POROSIDAD / PINHOLE','2'],['PRESERVANTES','PRESERVANTES','1'],['PVC','PVC','6'],['RESINAS DE SILICONA','RESINAS DE SILICONA','6'],['RESINAS ESPECIALES','RESINAS ESPECIALES','6'],['RUGOSIDAD','RUGOSIDAD','2'],['SECADO','SECADO','2'],['SECANTES','SECANTES','1'],['SODA ASH','SODA ASH','4'],['SODA CAUSTICA','SODA CAUSTICA','4'],['SULFATO DE COBALTO','SULFATO DE COBALTO','4'],['SULFATO DE NIQUEL','SULFATO DE NIQUEL','4'],['TOLUEN SULFON AMIDA','TOLUEN SULFON AMIDA','6'],['TRATAMIENTO DE METALES','TRATAMIENTO DE METALES','1'],['UREICAS','UREICAS','6'],['VINILICAS','VINILICAS','6'],['VISCOSIDAD','VISCOSIDAD','2']],
            cls: 'input',
            lastQuery:''
        }       ]
        });

  2. #2

    Default

    Update:

    Solved the name issue , I didint place the "displayField" property so the SimpleStore wasnt working.

    But, still having problem with the listener... it is NOT filtering even if i "hard code" the value.

    Any help will be highly appreciated

    Code is as follows:

    Code:
    Ext.onReady( function(){
    
    
        var fs = new Ext.FormPanel({
            frame:            true,
            title:            "Iver S.A. - Busqueda / Search",
            id:                "lqmForm94",
            labelAlign:        "left",
            labelWidth:        120,
            waitMsgTarget:    true,
            defaultType:    "textfield",
            fileUpload:        false,
            bodyStyle:        "padding:5px 5px 0",
            width:            "auto",
            buttonAlign:    "left",
            items: [   
    
        {
            fieldLabel: 'Categoria',
            name: 'combolqm_Categoria',
            xtype: 'combo',
            mode: 'local',
            typeAhead: true,
            triggerAction: 'all',
            minListWidth: 250,
            forceSelection: true,
            hiddenName: 'lqm_Categoria[]',
            emptyText: '- Seleccione -',        
            store:new Ext.data.SimpleStore({
                   data: [['','- Seleccione -',''],['Aditivos','Aditivos','1'],etc.....],
                  fields: ['cdesc1','cdesc2','idcat']
                }),
            cls: 'input',
            listeners:{select:{fn:function(combo, value) {
                            var comboGrupo = Ext.getCmp('combolqm_Grupo');        
                            comboGrupo.clearValue(); 
              comboGrupo.store.filter('idgrupo', combo.getStore().getAt(2)); // I want the value of column 'idcat' of combo  combolqm_Categoria here                     
                            }}
                        },
            displayField: 'cdesc2'
    },
        {
            fieldLabel: 'Grupo',
            name: 'combolqm_Grupo',
            xtype: 'combo',
            mode: 'local',
            typeAhead: true,
            triggerAction: 'all',
            minListWidth: 250,
            forceSelection: true,
            hiddenName: 'lqm_Grupo[]',
            emptyText: '- Seleccione -',
            store:new Ext.data.SimpleStore({
                   data: [['','- Seleccione -'],['ABRASION','ABRASION','2'],etc.....],
                  fields: ['gdesc1','gdesc2','idgrupo']
                }),    
            cls: 'input',
            displayField: 'gdesc2',
            lastQuery:''
        }   ]
        });

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •