PDA

View Full Version : Linked Combos Extension



mdavis6890
30 Jan 2011, 7:50 PM
I wrote some code to generalize linked combos. It has some weaknesses and I'd like to get your feedback:

SelectBox Extension:


IDB.selectbox.SelectBox = Ext.extend(Ext.ux.form.SelectBox, {
clearFilterOnReset:false,
triggerAction: 'all',
lastQuery: '',
linkToCombo : undefined,
//Thanks to Condor for this afterRender code which fixes the selectBox
afterRender : function() {
Ext.ux.form.SelectBox.superclass.afterRender.apply(this, arguments);
if(Ext.isWebKit) {
this.el.swallowEvent('mousedown', true);
}
this.el.unselectable();
this.innerList.unselectable();
this.trigger.unselectable();
this.innerList.on('mouseup', function(e, target, options) {
if( target.id && target.id == this.innerList.id ) {
return;
}
this.onViewClick();
}, this);
this.mun(this.view, 'containerclick', this.onViewClick, this);
this.mun(this.view, 'click', this.onViewClick, this);

this.innerList.on('mouseover', function(e, target, options) {
if( target.id && target.id == this.innerList.id ) {
return;
}
this.lastSelectedIndex = this.view.getSelectedIndexes()[0] + 1;
this.cshTask.delay(this.searchResetDelay);
}, this);

this.trigger.un('click', this.onTriggerClick, this);
this.trigger.on('mousedown', function(e, target, options) {
e.preventDefault();
this.onTriggerClick();
}, this);

this.on('collapse', function(e, target, options) {
Ext.getDoc().un('mouseup', this.collapseIf, this);
}, this, true);

this.on('expand', function(e, target, options) {
Ext.getDoc().on('mouseup', this.collapseIf, this);
}, this, true);
},
linkFilter : function() {
if(this.linkToCombo) {
var linkedCombo = this.ownerCt.getComponent(this.linkToCombo.comboID);
this.getStore().filter([{
property : this.linkToCombo.filterField,
value : linkedCombo.getValue(),
exactMatch : true
}]);
}
},
initComponent : function() {
IDB.selectbox.SelectBox.superclass.initComponent.call(this);
if(this.linkToCombo) {
var linkedCombo = this.ownerCt.getComponent(this.linkToCombo.comboID);
this.mon(linkedCombo, {
scope : this,
select : function() {
this.clearValue();
this.fireEvent('select');
}
});
this.on({
'expand' : {
fn: this.linkFilter,
scope: this
}
});
}
}
});
Ext.reg('IDB.selectbox.SelectBox', IDB.selectbox.SelectBox);


Usage:


{
fieldLabel: 'Rack',
xtype : 'IDB.selectbox.Rack',
name : 'rack',
itemId : 'rackCombo',
linkToCombo : {
comboID : 'rowCombo',
filterField : 'row_id'
}
}


The main challenge that I don't know how to get around is that I can't use 'this.getComponent('rowCombo')' to pass the combo by reference, since that combo isn't created yet when I'm creating all the form items. As a result, I pass it's itemID as a string, and try to get a reference to it in the abstract class. This only works (in my code) if the two combos are siblings.

Any suggestions for making this work better or be more generalizable would be greatly appreciated.

Thanks,
Michael

mdavis6890
31 Jan 2011, 4:35 PM
From all the posts I've seen about linked combos, I think this is a useful feature. Anybody else? Or have I duplicated effort?