PDA

View Full Version : ComboBox -> beforeLoad-event and setTpl()



tobiu
22 Apr 2009, 2:45 PM
hi together,

i guess this is something, most of the users do not need.
it is nothing more than a kind of hack,
but i need to use a ComboBox to display icons or text and switch between these templates.

since i am using one store for several ComboBoxes and GridFilters, i can not just use a listener on the store for his loading-event.

here we go:



Ext.override(Ext.form.ComboBox, {
onBeforeLoad : function(){
this.fireEvent('beforeLoad', this);

if(!this.hasFocus){
return;
}
this.innerList.update(this.loadingText ?
'<div class="loading-indicator">'+this.loadingText+'</div>' : '');
this.restrictHeight();
this.selectedIndex = -1;
}
});


Ext.override(Ext.DataView, {
setTpl : function(tpl){
if(tpl == '')tpl = '<tpl for="."><div class="x-combo-list-item">{n}</div></tpl>';
this.tpl = tpl;
if(typeof this.tpl == "string"){
this.tpl = new Ext.XTemplate(this.tpl);
}
}
});


the {n} is really ugly, but the view does not know about the ComboBox - config "displayField". if there is a way, please tell me ;)

example-usage:



myCombo = new Ext.form.ComboBox({
...
,tpl : imageTpl
,listeners : {
beforeLoad : function(box) {
console.log('beforeLoad');
box.view.setTpl('');
}
}
});


kind regards, tobiu

tobiu
22 Apr 2009, 2:54 PM
version2 with the displayField...



Ext.override(Ext.form.ComboBox, {
onBeforeLoad : function(){
this.fireEvent('beforeLoad', this, this.displayField);

if(!this.hasFocus){
return;
}
this.innerList.update(this.loadingText ?
'<div class="loading-indicator">'+this.loadingText+'</div>' : '');
this.restrictHeight();
this.selectedIndex = -1;
}
});


Ext.override(Ext.DataView, {
setTpl : function(tpl, displayField){
if(tpl == '')tpl = '<tpl for="."><div class="x-combo-list-item">{' + displayField + '}</div></tpl>';
this.tpl = tpl;
if(typeof this.tpl == "string"){
this.tpl = new Ext.XTemplate(this.tpl);
}
}
});


example-usage:



myCombo = new Ext.form.ComboBox({
...
,tpl : imageTpl
,listeners : {
beforeLoad : function(box, displayField) {
console.log('beforeLoad');
box.view.setTpl('', displayField);
}
}
});