PDA

View Full Version : TabIndex on extended control



VATigers
19 Mar 2009, 7:12 AM
I am extending the Label control to provide some events, tooltip, css and tabindex.

I could not get the tabindex to work . Can someone guide me and point out the missing




Ext.BoxLabel = Ext.extend(Ext.form.Label, {
constructor: function(config) {
config = config || {};
config.tooltipType = 'qtip';
Ext.BoxLabel.superclass.constructor.apply(this, arguments); //Adding events to the BoxLabel
this.addEvents({
"blur": true,
"click": true,
"mouseover": true
});
},
//End of Ext.fmplugins.BoxLabel Constructor
//Overriding the 'OnRender' method to attach the events, tooltip and css
onRender: function() {
theBox = this;
this.constructor.superclass.onRender.apply(this, arguments); //If a css class is defined for the control, attach it.
if (this.cls) {
theBox.addClass(this.cls);
}
if (this.tooltip) {
if (typeof this.tooltip == 'object') {
Ext.QuickTips.register(Ext.apply({
target: this.id
},
this.tooltip));
} else {
this.el.dom.qtip = this.tooltip;
}
}
if (this.tabIndex !== undefined) {
//this is not working
this.el.dom.tabIndex = this.tabIndex;
}
if (!theBox.disabled) {
this.el.on('blur',
function(e) {
theBox.fireEvent('blur');
});
this.el.on('click',
function(e) {
theBox.fireEvent('click');
});
this.el.on('mouseover',
function(e) { //Attach a css class when the mouse hovers the
//control
if (this.overCls) {
theBox.addClassOnOver(this.overCls);
}
theBox.fireEvent('mouseover');
}); //closure of mouseover
}
} //closure of OnRender
});

VATigers
20 Mar 2009, 5:40 AM
Any suggestions on this ?