PDA

View Full Version : Ext.ux.form.FieldAutoExpand



Artur Bodera (Joust)
27 Mar 2008, 2:54 AM
Hi there!

Just posted my first plugin to the community. I've created a whole bunch of extensions and I think it's the right time to share some of them.

For starters, in base Ext 2 fields inside FormPanel were bound to their pre-defined width. I've created a simple to use plugin, which will expand all or select field, to match the FormPanel size.

Just throw it in to your config, in plugins: [] and you're done...

http://extjs.com/learn/Extension:FieldAutoExpand

http://extjs.com/learn/w/images/e/e5/FieldAutoExpand_large.png

Have fun!

mdissel
27 Mar 2008, 1:17 PM
Nice, i didn't test it but what happens if you have multiple columns?

jerrybrown5
28 Mar 2008, 12:23 AM
This is nice. I do have a couple of ideas. Normally you would use a defaults:{width:x} on the parent container. However, on times when you have mixed fields some with labels and some without I can see how this would come in handy. Also, I am not sure that you would want to extend the right side to stop at different points based on whether there is validation or not. Personally, I always try to stop the fields at the same point on the right.

Regards,
Jerry

tof
28 Mar 2008, 1:51 AM
Isn't this the same thing as anchor:'100%' ?

mjlecomte
28 Mar 2008, 6:18 AM
Suggestion: change subject of your thread which is currently Ext.ux.grid.FieldAutoExpand to Ext.ux.form.FieldAutoExpand

JorisA
29 Mar 2008, 5:00 AM
Uhm yeah I believe anchor:'100%' does the same...
thnx for sharing anyway ;)

Artur Bodera (Joust)
30 Mar 2008, 10:30 AM
It will take validation icons into account. It also checks if you have specific label shown or hidden. You can have multiple types of fields, mixed with "fixed" or "auto" widths.

Anchor:100% ? This requires that you dump your formLayout or at least put anchor layout inside formLayout which is getting deep. Here you just throw in the plugin and it's done.

Artur Bodera (Joust)
30 Mar 2008, 10:33 AM
Suggestion: change subject of your thread which is currently Ext.ux.grid.FieldAutoExpand to Ext.ux.form.FieldAutoExpand
I couldn't find option to rename my thread. Any suggestions ?

jsakalos
30 Mar 2008, 11:24 AM
Edit first post and click button "Go Advanced"

jerrybrown5
30 Mar 2008, 9:06 PM
I like the idea of having an anchor plugin. It could process the anchor field on the current level and on all child items. Why should the anchor layout have all of the fun on a feature that so obviously needs to be everywhere? I am even in favor of adding it as an override to Ext.Component since I believe it is that useful.

Artur Bodera (Joust)
31 Mar 2008, 1:18 AM
Jerry - that's not a bad idea. Actually, it looks pretty easy to extrapolate my plugin to work with all Ext.Container-s. As long as I can extract the parent container, I can try to fit widths.
There is one little caveat - as you can see in my plugin code, the getBox() is not always accurate, because of specific offsets, floats, margins and paddings in various places. I'll take a look at that. Might be useful, before The Team implements it internally in Ext core.

ps: Thanks Jozef!

tarini
2 May 2008, 6:03 AM
Guys I've a problem with this plugin...

If I create a FormPanel contains a TabPanel the plugin doesn't work and it throws this exception:

this.form.getEl().down(".x-form-item") has no properties

for each Field element in the form...

do you know a solution??

tarini
21 May 2008, 8:45 AM
no one has the same problem as mine?

kazukin6
25 May 2008, 1:32 AM
Guys I've a problem with this plugin...

If I create a FormPanel contains a TabPanel the plugin doesn't work and it throws this exception:

this.form.getEl().down(".x-form-item") has no properties

for each Field element in the form...

do you know a solution??

Replace this line


this.width4 = this.form.getEl().down('.x-form-item').getSize(true).width + this.offsetFix;
from the original script with


var p = f.findParentByType("fieldset");
if(!p)
{
p = f.findParentByType("form");
}
if(!p || !p.getEl())
{
return;
}

var pSize = p.getEl().getSize(true).width;
if(pSize ==0)
{
return;
}
this.width4 = pSize + (this.offsetFix * 4);

JorisA
1 Jun 2008, 4:02 AM
It will take validation icons into account. It also checks if you have specific label shown or hidden. You can have multiple types of fields, mixed with "fixed" or "auto" widths.

Anchor:100% ? This requires that you dump your formLayout or at least put anchor layout inside formLayout which is getting deep. Here you just throw in the plugin and it's done.

In fact FormLayout extends anchorlayout, so its not getting that deep after all. It's always nice to have additional plugins and improvements for ExtJs but I think this one doesn't add that much functionality...

galdaka
9 Jun 2008, 9:20 AM
Jerry - that's not a bad idea. Actually, it looks pretty easy to extrapolate my plugin to work with all Ext.Container-s. As long as I can extract the parent container, I can try to fit widths.
There is one little caveat - as you can see in my plugin code, the getBox() is not always accurate, because of specific offsets, floats, margins and paddings in various places. I'll take a look at that. Might be useful, before The Team implements it internally in Ext core.

ps: Thanks Jozef!

What about this?

I think this extension would be transform in Ext.ux.FielAutoExpand for expand it in any container like a toolbar.

Thanks in advance,

sj137
9 Apr 2010, 1:16 AM
at line 137
change to:


if(!f.hideLabel && this.form.labelAlign != 'top'){
if(f.msgTarget == 'side')
var width = this.width1;
else
var width = this.width2;
}else{
if(f.msgTarget == 'side')
var width = this.width3;
else
var width = this.width4;
}

sj137
9 Apr 2010, 2:17 AM
if you want to use auto width on a grow field

at line 108
change to:



if((f.width == 'auto' || !f.width) && !(f.grow && !f.useAutoWidth))
this.autoWidthFields[this.autoWidthFields.length] = f;



and add a config param "useAutoWidth:true" to your field