PDA

View Full Version : [FIXED-18][3.0rc2+]Textfield in Menu - various issues



mjlecomte
20 Jun 2009, 6:35 PM
Ext version tested:

Ext 3.0rc2+ rev 4498


Browser versions tested against:

IE8
FF3 (firebug 1.3.0.10 installed)


Operating System:

WinXP Pro


Description:

See steps to reproduce below


Test Case:

Modify the example/menu/menu.js as follows:


var combo = new Ext.form.ComboBox({
...
iconCls: 'no-icon'
});

var myText = new Ext.form.TextField({
emptyText: 'Select a state...',
selectOnFocus: true,
width: 135,
iconCls: 'calendar'
});

var menu = new Ext.menu.Menu({
id: 'mainMenu',
style: {
overflow: 'visible' // For the Combo popup
},
items: [
myText,
combo, // A Field in a Menu




Steps to reproduce the problem:

In FF: enter some text in the field, then collapse menu and come back in. I was unable to, or had difficulty selecting and entering text
In FF: selectOnFocus doesn't seem to work at all
In FF or IE the iconCls position is too high up and too far to the left
In IE you have to click around the iconCls to have the field editor get focus (this may be just a current limitation?)


The result that was expected:

see steps to reproduce


The result that occurs instead:

see steps to reproduce


Screenshot or Video:

attached


Debugging already done:

none


Possible fix:

For the icon position this seems to help with IE8 and FF3:


.x-menu-list-item-indent .x-menu-item-icon {
top: 6px;
left: 6px;
}

mjlecomte
21 Jun 2009, 7:34 PM
Actually, replace that menu example with the code below and I think the problem is exposed a little better. Basically if there's multiple textfields adjacent to each other in the menu, the icons will get bunched up.

Here's the css that seemed to patch it up fairly well, at least with FF3 (IE8 the icon position is too low vertically):


.x-menu-list-item-indent .x-menu-item-icon {
position: relative;
top: 3px;
left: 3px;
margin-right: 10px;
}
li.x-menu-list-item-indent {
padding-left:0px;
}
li.x-menu-list-item div {
display: inline;
}





Here's the test code:


Ext.onReady(function(){
Ext.QuickTips.init();

var tb = new Ext.Toolbar();
tb.render('toolbar');

var menu = new Ext.menu.Menu({});

menu.add({
xtype: 'textfield',
iconCls: 'bmenu' // <-- icon
});

menu.add({
xtype: 'textfield',
iconCls: 'bmenu' // <-- icon
});

menu.add({
text: 'textfield',
iconCls: 'bmenu' // <-- icon
});

menu.add({
xtype: 'textfield',
iconCls: 'bmenu' // <-- icon
});

tb.add({
text: 'Button w/ Menu',
iconCls: 'bmenu', // <-- icon
menu: menu // assign menu by instance
});

tb.doLayout();

});

danh2000
1 Sep 2009, 11:05 PM
I don't know if it's cool to do this, or if it will add any weight to the bug report, but I've also had problems with this:

http://extjs.com/forum/showthread.php?t=79313

danh2000
11 Sep 2009, 2:52 PM
This fixed GXT bug looks very similar:

http://www.extjs.com/forum/showthread.php?t=80195

ludoo
23 Sep 2009, 1:13 AM
Hi,

By adding a default value in the config of the newly created Textfield, selection is no more possible in FF.
Bug appears only in FF3.5.3 as i tried under (and yorks well) under Chrome, IE Opera and safari...

{
xtype:'textfield',
emptyText: 'Select a state...',
selectOnFocus: true,
width: 135,
iconCls: 'calendar',
value : 'text here...' //<- add a default text
}

Eric24
11 Oct 2009, 6:52 PM
Any update on this bug fix? It's become a critical path for me and I've not been able to come up with any work-around.

danh2000
19 Oct 2009, 4:26 PM
I'd love to see menu fixed up before the next release if possible?
Thanks

evant
19 Oct 2009, 10:55 PM
Fix applied to svn in rev #5516 for patch release 3.1.

danh2000
20 Oct 2009, 12:03 AM
Thanks Evan!

Eric24
20 Oct 2009, 5:59 AM
Thanks Evan! What's the planned release date for 3.1?

mjlecomte
21 Oct 2009, 3:18 AM
Thanks Evan! What's the planned release date for 3.1?

See http://www.extjs.com/products/extjs/commitlog.php

I assume you realize you could build your own right now as well.

Nigel
6 Mar 2011, 10:13 AM
Hi
You should be aware that the following section of CSS in the solution above

li.x-menu-list-item div {
display: inline;
}
messes up the display of panels within menus. It took me three hours to find this out after my Saki File UploadPanel menu went awry!

Regards
Nigel