View Full Version : How to enlarge a Docked textfield in panel?

20 Mar 2012, 8:36 AM
I have a textfield docked in a panel , I am trying to modify the width of the textfield...well...Sounds easy but I have tried so many way such as config string with width and css style , and even setSize or setWidth methods but in vain eventually . In fact , those just modifies the width of <div> tag which wraps the input tag , but not input itself. see the following code.

this.fillterfield = new Ext.form.TextField({
style: 'width: 100%',
centered : true,

xtype: 'toolbar',
ui: 'gray',
items: this.fillterfield

and here comes the html

<div id="ext-comp-1037" class=" x-field x-field-text" style="width: 100%; ">
<div class="x-form-field-container">
<input id="ext-gen1074" type="text" name="ext-comp-1037" class="x-input-text">

just wondering why , is there anyway to enlarge a ducked textfield ?( Sure it does right?:">)

20 Mar 2012, 9:47 AM
new Ext.Panel({
fullscreen : true,
html : 'Test',
dockedItems : [
xtype : 'toolbar',
dock : 'top',
ui : 'gray',
items : {
xtype : 'textfield',
flex : 1

28 Mar 2012, 6:42 AM
Thanks but its not working on me
I am still trying to figure it out :(