PDA

View Full Version : basic question regarding combobox and stores



avo_liao
8 Oct 2009, 10:45 AM
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:Linked_Combos_Tutorial_for_Ext_2 (this is for version 2 but might work)

http://www.extjs.com/forum/showthread.php?t=63938&highlight=linked+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 donīt 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:


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:''
} ]
});

avo_liao
8 Oct 2009, 12:56 PM
Update:

Solved the name issue :D, 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:


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:''
} ]
});