PDA

View Full Version : [Ext.ux.InfoPanel/Accordion] DateField error warning on custom width



rkues
10 Aug 2007, 7:36 AM
Hi,

I found something here that I think might be a bug. Everytime I create a DateField with "width: 'auto'", it works perfectly. But when I create a DateField with custom width, like "width: 65", the warning icon (if I leave the field blank) displays on top of DateField. Example attached.

Using FF 2.0, ExtJS 1.1 stable.


Thanks,
Richard.

mystix
10 Aug 2007, 7:41 AM
this shouldn't be a bug.

when you use a custom width, you'll have to handle space allocation manually.

judging from your screenshot, you're probably allocating inadequate space to the DateField.
using the FireBug CSS inspector, try upping the width in 10px increments, starting from 65.

rkues
10 Aug 2007, 9:24 AM
hi mystix,

thanks for your reply. i made a second test based on your arguments, but the error seems to continue. there are 2 DateFields in a fieldset, one with "width: 'auto'" and the other one with 'width: 105', inside a column with 'width: 248'. screenshot attached.


cheers,
richard.

ps: other form fields, like text fields with custom widths works perfectly.

additional info: ext 1.1 stable standalone; windows xp pro sp2, ff 2.0.0.6

mystix
10 Aug 2007, 9:31 AM
ahhh... i see... i think i know why...

it seems like the width of the DateField's trigger isn't being taken into consideration during calculations...
have you tried your test case in IE6/7 or Opera?

also, if you could post your test case here that would help.

jack.slocum
10 Aug 2007, 10:50 AM
There's a related threadin this forum where someone had a similar issue. It had to do with modifying one CSS value while not updating another.

rkues
10 Aug 2007, 10:53 AM
hi mystix,

just installed opera and tested the case in it, also in ff and ie. screenshots attached. the code is quite simple, and i've added textfields to give a better idea of it. also noticed that when DateField is with "width: 'auto'", the error icon goes to the right limit of the fieldset.


advsearch.column({width:248, labelWidth:60});

advsearch.fieldset(
{legend: 'DateField Test'},
new Ext.form.DateField({
name: 'date1',
fieldLabel: 'Auto',
allowBlank: false,
width: 'auto'
}),
new Ext.form.DateField({
name: 'date2',
fieldLabel: 'Custom',
allowBlank: false,
width: 105
}),
new Ext.form.TextField({
fieldLabel: 'Custom',
name: 'text1',
allowBlank: false,
width: 105
}),
new Ext.form.TextField({
fieldLabel: 'Auto',
name: 'text2',
allowBlank: false,
width: 'auto'
})
);

advsearch.end();

all my code in this app are far beyond 1k lines, strictly tied with django, so it can be hard for me to put it all here. if this isn't enough and it's worth the attention, please, let me know ;)

cheers,
richard.

rkues
10 Aug 2007, 11:03 AM
There's a related threadin this forum where someone had a similar issue. It had to do with modifying one CSS value while not updating another.

hi jack,

i was unable to find the datefield thread you mentioned using the forums search engine. could you please provide the link? thanks in advance.

cheers,
richard.

jack.slocum
10 Aug 2007, 5:36 PM
I just noticed you have a width: 'auto'. That is not supported for DateField or ComboBox (or any TriggerField). You must supply a valid width.

rkues
10 Aug 2007, 5:44 PM
I just noticed you have a width: 'auto'. That is not supported for DateField or ComboBox (or any TriggerField). You must supply a valid width.

hi jack,

thanks for your reply. the problem also occurs if i apply a valid width to the DateField, as you can notice in the code i provide in a previews post in this topic, with screenshots.

cheers,
richard.

jack.slocum
10 Aug 2007, 8:38 PM
What is different between your set up and the ones in the examples which work correctly?

rkues
11 Aug 2007, 7:40 AM
What is different between your set up and the ones in the examples which work correctly?

hi jack,

the fact is that even with a real width, the warning icon message of the DateField displays on top of the calendar trigger button. here's a piece of code, with a DateField and a TextField, both with width set to 105, and a screenshot attached:


advsearch.column({width:248, labelWidth:60});

advsearch.fieldset(
{legend: 'DateField Test'},
new Ext.form.DateField({
name: 'date1',
fieldLabel: '105px',
allowBlank: false,
width: 105
}),
new Ext.form.TextField({
fieldLabel: '105px',
name: 'text1',
allowBlank: false,
width: 105
})
);

advsearch.end();

as you can see in the screenshots, it looks like the extra width of the calendar trigger is not being taken in consideration when calculating the margin of the warning button. the same error occurs in ff2, opera9 and ie6.

and the difference from examples ... i don't know, there's nothing spetacular in my code. it's just a form inside a contentpanel.


cheers,
richard.

jack.slocum
11 Aug 2007, 9:40 AM
There has to be some kind of difference. If you can track that down, it will help to isolate the condition that causes the problem. Otherwise, there is no way we can fix it since it works perfectly in the code we have it in. Make sense?

rkues
12 Aug 2007, 12:50 PM
hi jack,

of course it makes sense :) i had isolated the problem today, and it seems to be a relation with the accordion/infopanel community extension. not the css (that even disabled seems to cause this DateField malfunction), but with the code itself. DateField works fine outside a infopanel/accordion. (sigh)

this topic can be moved to community extensions forum or it needs to be recreated there?


cheers,
richard.

jsakalos
13 Aug 2007, 3:54 PM
hi jack,

of course it makes sense :) i had isolated the problem today, and it seems to be a relation with the accordion/infopanel community extension. not the css (that even disabled seems to cause this DateField malfunction), but with the code itself. DateField works fine outside a infopanel/accordion. (sigh)

this topic can be moved to community extensions forum or it needs to be recreated there?


cheers,
richard.

Do you render date field to a collapsed panel? If so that is the problem. Move rendering to expand event handler.

While panel is collapsed it's display:none so no sizes are available.

Hope this helps.

rkues
13 Aug 2007, 7:28 PM
hi jozef,

thanks for your reply. your explanation makes a lot of sense :) the fact is that i have two accordions, one with a basic search and the another with advanced search, both with DateFields ... even if i start one of then expanded, the other one will be collapsed, and then the error will occur once again ... is there a way to make this work, even collapsed?

cheers,
richard.

jsakalos
14 Aug 2007, 1:09 AM
hi jozef,

thanks for your reply. your explanation makes a lot of sense :) the fact is that i have two accordions, one with a basic search and the another with advanced search, both with DateFields ... even if i start one of then expanded, the other one will be collapsed, and then the error will occur once again ... is there a way to make this work, even collapsed?

cheers,
richard.

What I usually do is lazy creating/rendering of components on panel expand or, even later, on animationcompleted. Same is true for forms, form controls, grids, etc.