PDA

View Full Version : Extending ComboBox.



joao_candido
8 May 2009, 9:24 AM
Im trying to extend the ComboBox to a new combo object because I need a beforeexpand event in my combo, so Ive done as followed:



Ext.ux.form.newCombo = Ext.extend(Ext.form.ComboBox, {
initComponent:function() {
// call parent init component
Ext.ux.form.newCombo.superclass.initComponent.apply(this, arguments);

// add custom events
this.addEvents("beforeexpand", "expand");
},
expand: function () {
this.fireEvent("beforeexpand", this);
Ext.ux.form.newCombo.superclass.fireEvent("expand", this);
}
});


The problem is that when the newCombo expand event is called, Ive got the error that its superclass events doesnt exists.

Anyone could help me how to fix it?

Thanks in advance.

joao_candido
8 May 2009, 11:11 AM
Ive solved it by myself.

Take a look at the solition:



Ext.ux.form.newCombo = Ext.extend(Ext.form.ComboBox, {
initComponent:function() {
// call parent init component
Ext.ux.form.newCombo.superclass.initComponent.apply(this, arguments);

// add custom events
this.addEvents("beforeexpand", "aftercollapse");
},
expand: function () {
this.fireEvent("beforeexpand", this);
Ext.ux.form.newCombo.superclass.expand.apply(this);
this.fireEvent("expand", this)
},
collapse: function () {
Ext.ux.form.newCombo.superclass.collapse.apply(this);
this.fireEvent("aftercollapse", this);
this.fireEvent("collapse", this)
}
});

dj
9 May 2009, 4:51 AM
Firering the collapse and expand events is not required in your sub-class. that's done in Ext.form.ComboBox already. Right now they get fired twice.
Also a before* event normally gives the listener the opportunity to cancel the action by returning false in the listener function.


Ext.ux.form.newCombo = Ext.extend(Ext.form.ComboBox, {
initComponent:function() {
// call parent init component
Ext.ux.form.newCombo.superclass.initComponent.apply(this, arguments);

// add custom events
this.addEvents("beforeexpand", "aftercollapse");
},
expand: function () {
if (this.fireEvent("beforeexpand", this)) {
Ext.ux.form.newCombo.superclass.expand.apply(this);
}
},
collapse: function () {
Ext.ux.form.newCombo.superclass.collapse.apply(this);
this.fireEvent("aftercollapse", this);
}
});

wesho
3 Jun 2009, 6:02 AM
Firering the collapse and expand events is not required in your sub-class. that's done in Ext.form.ComboBox already. Right now they get fired twice.
Also a before* event normally gives the listener the opportunity to cancel the action by returning false in the listener function.


Ext.ux.form.newCombo = Ext.extend(Ext.form.ComboBox, {
initComponent:function() {
// call parent init component
Ext.ux.form.newCombo.superclass.initComponent.apply(this, arguments);

// add custom events
this.addEvents("beforeexpand", "aftercollapse");
},
expand: function () {
if (this.fireEvent("beforeexpand", this)) {
Ext.ux.form.newCombo.superclass.expand.apply(this);
}
},
collapse: function () {
Ext.ux.form.newCombo.superclass.collapse.apply(this);
this.fireEvent("aftercollapse", this);
}
});


I'm trying to use the "beforeexpand" event so have removed "aftercollapse". I have noticed that the event is fired twice everytime I try to expand the ComboBox. Firstly through:


EventManager() < EventManager() < expand() < initComponent() < initComponent() < initComponent() < camelFn() < getViewWidth()and the second time:


EventManager() < EventManager() < expand() < initComponent() < EventManager() < EventManager() < SimpleStore() < ScriptTagProxy()The second stack trace is when the ComboBox has to have the Store loaded. It's interesting since at the first "beforeexpand" only the first item of the ComboBox is shown, as if it has to do fire another "expand" before the rest can be shown. Once completely loaded the event is only fired once every time before expansion using the first stack trace.

Can I have the "beforeexpand" event only fire once in all cases?

Thanks already.

dj
5 Jun 2009, 1:13 AM
try changing the expand method to


expand: function () {
if(this.isExpanded() || !this.hasFocus){
return;
}
if (this.fireEvent("beforeexpand", this)) {
Ext.ux.form.newCombo.superclass.expand.apply(this);
}
}

wesho
8 Jun 2009, 12:22 AM
Works great. Indeed I see it in the original expand function of ComboBox. Thanks!