Ok, so a lot of posts I make are not so much about “hey, look at this cool thing I figured out” as much as it is saving a reminder of myself for how to do something when I inevitably forget it later on :)

So for today’s example, the problem I was having was how to make a textfield fill up 100% width of a panel. I think in earlier versions of ExtJS, there was an “autoWidth” option, but alas, it doesn’t work in ExtJS 4. Moreover, using “width: ‘100%'” doesn’t work either, since the width option expects a numeric value.

Turns out, this is pretty stupid and simple. Here’s a quick example:

Ext.define("Gloss.view.search.Form", {
     extend: 	"Ext.form.Panel",
     alias:     "widget.searchform",
     frame:	true,
     items: [
          {
              xtype: 	"textfield",
              anchor:	"100%"
          }
     ],
     initComponent: function() {
          this.callParent(arguments);
     }
});

As you can see, adding in the “anchor: 100%” solves the issue quite nicely. Now, as the container is resized, the textfield will resize as well.