PDA

View Full Version : Component template and events



seek
5 Aug 2010, 4:44 AM
Hi all.
I have a little question about template component, and relative events...
In my component template I have defined this event:


zoneComboBox = Ext.extend(Ext.form.ComboBox, {
.....
xtype: 'combo',
disableKeyFilter: true,
editable: false,
forceSelection: true,
triggerAction: 'all',
typeAhead: false,
mode: 'local',
initComponent: function(){
Ext.ux.upperTextField.superclass.initComponent.apply(this, arguments);
},
listeners: {
beforequery: function(qe){
qe.combo.store.load();
}
}
});

And when I use it, I whould to be executed after beforequery of the base class, then the event in the instantiation:


{fieldLabel:'Zona',
name:'cbZona',
id:'cbZona',
xtype:'Sil.mag.zoneComboBox',
store: listOfZoneDS,
listeners: {
beforequery: function(qe){
qe.combo.store.filterBy(
function(record) {
return record.get('codMagazzino') == Ext.getCmp('cbMagazzino').getValue();
}
)
}
}
}


Thanks all
Seek

Condor
5 Aug 2010, 5:23 AM
combobox already has filtering build-in when using mode:'local'.

You could use the following code to load the store once before filtering:

mode: 'local',
triggerAction: 'query',
listeners: {
beforequery: function(qe){
qe.combo.store.load({
callback: function(){
qe.combo.doQuery(qe.query, qe.forceAll);
}
});
return false;
},
single: true
}

seek
5 Aug 2010, 6:51 AM
combobox already has filtering build-in when using mode:'local'.
You could use the following code to load the store once before filtering:

mode: 'local',
triggerAction: 'query',
listeners: {
beforequery: function(qe){
qe.combo.store.load({
callback: function(){
qe.combo.doQuery(qe.query, qe.forceAll);
}
});
return false;
},
single: true
}

Thanks for your attention Condor, but that's not work for me.
In this specific case, I need it for master/detail combo...how can I use it correctly in mode:'local', filtering records after fetch without changing the store of combo?

Thanks

Condor
5 Aug 2010, 6:56 AM
You would normally solve this (in mode:'remote') by adding a baseParam to the detail combobox store and let the server only return the matching records, e.g.

combo1.on('change', function(c, v){
combo2.store.setBaseParam('filterParam', v);
combo2.clearValue();
delete combo2.lastQuery;
});

You can also do this in mode:'local', but you would have to configure your combobox with:

mode: 'local',
triggerAction: 'all',
lastQuery: ''
and preload the store.

seek
5 Aug 2010, 8:12 AM
.....
You can also do this in mode:'local', but you would have to configure your combobox with:

mode: 'local',
triggerAction: 'all',
lastQuery: ''
and preload the store.

I'm in this case, and this is my custom component:


zoneComboBox = Ext.extend(Ext.form.ComboBox, {
fieldLabel: 'Zona',
anchor: "100%",
xtype: 'combo',
displayField:'codZona',
valueField:'codZona',
tpl:'<tpl for="."><div class="x-combo-list-item">{codMagazzino}.{codZona}</div></tpl>',
disableKeyFilter: true,
editable: false,
forceSelection: true,
triggerAction: 'all',
typeAhead: false,
mode: 'local',
lastQuery: '',
initComponent: function(){
Ext.ux.upperTextField.superclass.initComponent.apply(this, arguments);
}
});
Ext.reg('SilzoneComboBox', zoneComboBox);

And I want to reload data in the combo's store every time users click on trigger button (in any condition: master/detail, stand alone, ecc...) and so it's nice to have this in component base class.

Thanks
Seek