View Full Version : Expand text box to fill field

29 Jun 2010, 1:15 PM
Attached you can see the code I attempted as well as the screenshot it produced. I'm looking to basically get what the iphone version of the target.com site does, expands the search box until it hits the button on the end. Any help would be appreciated.

30 Jun 2010, 8:37 PM
I tried using layout:'fit' but apparently that won't expand a searchfield, probably only works for panels and such. Perhaps that limitation should be documented? Maybe I'll just size it with javascript if it's not doable out of the box. Let me know if anyone has any ideas, thanks!

1 Jul 2010, 11:55 AM
Here is the code to get the layout you want.

onReady: function() {
var searchField = {
xtype: 'searchfield',
name: 'Search',
placeholder: 'Search',
flex: 1

var searchButton = {
iconCls: 'search',
ui: 'mask'

var searchBar = {
xtype: 'toolbar',
dock: 'top',
items: [searchField, searchButton]

new Ext.Panel({
fullscreen: true,
dockedItems: searchBar

There is however a problem in the css that makes input fields not take up the space of their container. This is css that you can use to work around that.

input {
display: block;
width: 100%;

1 Jul 2010, 12:06 PM
Thanks for the code, I'll use the workaround for now. If the css issue is slated to be corrected, please move this over to the bugs forum and open a ticket so I can get notified through the forum update when I can remove the workaround. Thanks!

P.S. Perhaps flex should be added as a config option to the component documentation, so the different number values explained (what happens if I put a 2 in, or 9998347... lol)

1 Jul 2010, 12:15 PM
flex should be documented in the BoxLayout documentation. You can read this forum thread for a detailed explanation on boxlayout (which is used by a toolbar). http://www.sencha.com/forum/showthread.php?102989-docked-toolbar-and-button-positioning.-align-attribute-is-ignored.&p=482946#post482946

1 Jul 2010, 12:18 PM
I saw flex in the layout doc, but I just suggested that because it's an actual config option, so I figured the config options should all be listed. Thanks again for the help

1 Jul 2010, 12:20 PM
The css has been added to the library so this will be automatically fixed in the next release.

9 Aug 2010, 8:04 AM
The text box is still not getting 100% width applied to it in the sencha style sheet, I still have to manually set it.

new Ext.Panel({ fullscreen: true, layout: 'hbox', items: [{ xtype: 'searchfield', flex: 1, style: 'border:1px solid red;'}] });