PDA

View Full Version : Combobox lost focus event after tabpanel changed tab



J@y
25 Aug 2009, 3:20 AM
I have a live search box (using combobox) in my main panel's tbar.

Under the tbar I've add a tabpanel in the main panel.

The problem is, when I switch between different tab pages, the focus of the search box was lost...

The drop down list no longer automatically expand even I type the input in the combobox. (however the search box works fine at startup, I mean b4 the tab changed)

here is my code structure:

Main panel:


Ext.onReady(function(){
var mainPanel = new Ext.Panel({
id: 'home-main',
applyTo: 'mainTab',
layout:'fit',
width: 600,
autoHeight: true,
cls: 'x-ckw-mainContainer',
header: false,
tbar: [
'<span style="font-weight: bold; color: white;">Enter Symbol: </span>', ' ',new Ext.app.SearchField()
],
items: MainPanel
});

});
tabpanel:


XXX.Tabs.Main = Ext.extend(Ext.TabPanel, {
....

initComponent: function() {
...

this.items = [
tab_a,
tab_b,
tab_c,
tab_d,
tab_e
];

...
}
});Live Search box:


Ext.app.SearchField = Ext.extend(Ext.form.ComboBox, {
store: stockSearch,
mode:'remote',
displayField: 'tCode',
valueField: 'RIC',
typeAhead: false,
loadingText: '',
minChars: 1,
queryParam: 'tCode',
queryDelay: 100,
width: 200,
listWidth: 300,
pageSize:10,
//hideTrigger:true,
tpl: resultTpl,
itemSelector: 'tr.search-item',
listeners: {
select: function(cb, record, index) {
stockInfo.load({params: {tCode:record.data.tCode}});
},

specialkey: function(f, e) {
if(e.getKey() == e.ENTER){
this.onTrigger2Click();
this.collapse();
this.reset();
}
}

},
onTrigger1Click : function() {
this.collapse();
this.reset(); // clear contents of combobox
this.fireEvent('cleared'); // send notification that contents have been cleared
},
onTrigger2Click : function() {
var v = this.getRawValue();
if(v.length < 1){
this.onTrigger1Click();
return;
}
stockInfo.load({params: {tCode:v}});
},
initComponent: function() {

//even I added below codes to force the focus, still no luck
var hasFocus = this.hasFocus;
this.hasFocus = null;
this.store.load({
callback: function(){
if(this.hasFocus === null){
this.hasFocus = hasFocus;
}
}
});

this.triggerConfig = {
tag:'span', cls:'x-form-twin-triggers', cn:[
{tag: "img", src: Ext.BLANK_IMAGE_URL, cls: "x-form-trigger x-form-clear-trigger"},
{tag: "img", src: Ext.BLANK_IMAGE_URL, cls: "x-form-trigger x-form-search-trigger"}
]};
Ext.app.SearchField.superclass.initComponent.call(this);
},

getTrigger: Ext.form.TwinTriggerField.prototype.getTrigger,
initTrigger: Ext.form.TwinTriggerField.prototype.initTrigger

});
Deeply appreciate for your help!

J@y
25 Aug 2009, 3:29 AM
Now I find that when I click on somewhere of the tab pages(content place), the combobox's focus comes back...

why? is it a bug?

Animal
25 Aug 2009, 3:42 AM
Clicking on the document always blurs any input which might be focussed. It's what HTML does.

You will have to add a tabchange listener to programmatically focus it.

J@y
25 Aug 2009, 3:48 AM
Clicking on the document always blurs any input which might be focussed. It's what HTML does.

You will have to add a tabchange listener to programmatically focus it.

I think the same as you, but even I put combobox.focus(true) in the tabchange listeners, the combobox still lost the focus after tab change (but I can see the text in the combobox has been highlighted...)

The problem is, even the combobox has been focused, but the trigger is still in sleep...
(you can see the trigger icon doesn't activate even you click on the combobox textfield)

But if I press the "down arrow" by keyboard, the trigger works again!

J@y
25 Aug 2009, 4:13 AM
finally I figure out that once you click on the tab strips, the combobox trigger will lost focus.

if you click anywhere on the web page (yes, anywhere except the tab), the combobox trigger works again...

any idea?

PS: IE6,7,8 works perfect, but safari and firefox (2 and 3) got suffered

PS2: in firebug I notice something:

The correct CSS of the focused trigger field should be "x-form-field-wrap x-form-field-trigger-wrap x-trigger-wrap-focus".
But after tag changed, the CSS becomes "x-form-field-wrap x-form-field-trigger-wrap".
When I click anywhere of the web page, it activates the trigger field's focus again...

Animal
25 Aug 2009, 5:24 AM
finally I figure out that once you click on the tab strips, the combobox trigger will lost focus.



That's what I said

J@y
25 Aug 2009, 5:36 AM
That's what I said
So how can I make the focus again?

The combobox still lose focus even I call the combobox.focus() in the tabchange listener...

I stunked here for almost a day, please help:((

Animal
25 Aug 2009, 5:44 AM
By adding a tabchange listener and explicitly focussing it.

Again, as I said.

J@y
25 Aug 2009, 5:56 AM
By adding a tabchange listener and explicitly focussing it.

Again, as I said.

As I said before, I can make the combobox be focused, but only the textfield get focused, not together with triggers.

in my tabpanel:


listeners: {
tabchange : function(tabPanel, newTab) {
stockSearch.focus(true, 200);
}
},
I can see the text in textfield has been highlighted, but the trigger is still being inactivate...
The problem is, when the trigger lost focus, the drop down list will not expand automatically even I type the text in the box. (But actually the ajax call has been sent during typing)


IE6,7,8 doesn't have this problems, only firefox and safari get suffered.

Animal
25 Aug 2009, 6:11 AM
I don't understand all that.

Triggers do not get focus. Input fields do.

There is some other problem you have, but I don't know what it is.

ldashevskiy
4 Feb 2014, 12:05 PM
Got it to work like this:


tabchange: function(tabPanel, tab){
if ( tab.title == 'Create' ){
var focusTask = new Ext.util.DelayedTask( cbWorkspace.onTrigger1Click, cbWorkspace );
focusTask.delay( 10 );
}
}