PDA

View Full Version : [OPEN-532] Rendering issues with 'x' clear icon



dloomer
8 Nov 2010, 6:18 PM
A few rendering issues with the 'x' icon have been detailed in a similar thread for an issue with the icon not being displayed, but the particular issue that is the namesake of that thread has been fixed so I'm opening a separate bug report for the way the icon is rendered.

I'll focus just on SearchFields and TextFields displayed in a Toolbar. If Kitchen Sink is modified so that the SearchField and TextField elements in the Toolbar tab of the Forms demo are configured as showClear=true, as such:



title: 'Toolbars',
styleHtmlContent: true,
xtype: 'form',
scroll: 'vertical',
html: "A human being should be able to change a diaper, plan an invasion, butcher a hog, conn a ship, design a building, write a sonnet, balance accounts, build a wall, set a bone, comfort the dying, take orders, give orders, cooperate, act alone, solve equations, analyze a new problem, pitch manure, program a computer, cook a tasty meal, fight efficiently, die gallantly. - RAH",
dockedItems: [{
xtype: 'toolbar',
dock: 'top',
items: [{
xtype: 'searchfield',
placeHolder: 'Search',
name: 'searchfield',
showClear: true
}]
},
{
xtype: 'toolbar',
dock: 'top',
items: [{
xtype: 'textfield',
placeHolder: 'Text',
name: 'searchfield',
showClear: true
}]
},
{
xtype: 'toolbar',
dock: 'top',
items: [{
xtype: 'select',
name: 'options',
options: [
{text: 'This is just a big select', value: '1'},
{text: 'Another select item', value: '2'}
]
}]
}]


The 'x' icon renders pretty poorly:

http://www.sencha.com/forum/attachment.php?attachmentid=23212&d=1289248124

User 'Animal' in the other 'x' icon bug thread also has made some comments on rendering of the icon that he may share either here or in a separate bug report.

Animal
8 Nov 2010, 10:45 PM
The way that icon is inserted into the DOM right now, it's like a TriggerField. The icon is after the input field, and width settings needs to take it into account.

I would probably use an element positioned over the top of the last 2em of the input field. And style the input field with padding-right: 2em to leave space for it.

BrendanC
9 Nov 2010, 10:23 AM
Thanks for the bug report.

dloomer
17 Nov 2010, 6:57 AM
Still not fixed in 1.0.

sinoptik
15 Jul 2011, 2:35 AM
Still not fixed in 1.1.0

hotdp
9 Aug 2011, 12:35 AM
Is there anyone who had a good fix for this? I really need this functionality...

jbrek
20 Jan 2012, 8:00 AM
I need this feature works too.

Thanks in advance.