v1.0 Testing

[Vladimir]

Hi,

1. According documentation: AutoHeight - Note: Setting <tt>autoHeight:true</tt> means that the browser will manage the panel's height based on its contents, and that Ext will not manage it at all. If the panel is within a layout that manages dimensions (<tt>fit</tt>, <tt>border</tt>, etc.) then setting <tt>autoHeight:true</tt> can cause issues with scrolling and will not generally work as expected since the panel will take on the height of its contents rather than the height required by the Ext layout.


So, it is no guarantee that AutoHeight will work always (that proprty mean that will be set the following css rule for control: height: 'auto'). The result can be unexpected becuase it depends from browser and content.
My opinion: preferable way do not use AutoHeight and always use fixed height or use layout. You can always calculate required size on page. For example, if you know that you need to add few buttons which will occupie some place then you can increase the height of control because you know the height of buttons


2. Your original example contains few controls without explicitly height (Window -> Panel -> (Panel, FormPanel)). None of these control don't provide the height. Therefore result of AutoHeight can be unexpected. You need provide height for all of that panels, not only for the window (or try to set AutoHeight for those panels). But your original example works fine in my IE8 (even without height). It says that AutoHeight is unexpected (depends from browser and content)




My opinion: set some predefined height for Window and place another Window's controls inside layout only. It will allow to avoid to set height for subcontrols (window height only required)


By the way, did you try your code outside your application. Try that login window in new page (only that code which you posted, nothing additional). Does the result is same?

[state]

Here is an updated way that I did it, hoping that it would fix the issue (but didn't):

<ext:Window ID="wLogin" runat="server" Title="eSuite Login" Icon="User" Width="315" Modal="true" AutoHeight="true" Center&#111;nload="true" Closable="false" Draggable="false" IDMode="Static">
	<Content>
		<ext:Panel runat="server" Border="false">					
			<Content>
				<ext:Panel runat="server" Border="false" BodyStyle="padding:12px 8px 12px 8px;border-bottom:solid 1px black">
					<Content>
						<img src="/images/logos/eSuite.gif" alt="" border="0" />
					</Content>
				</ext:Panel>
				<ext:FormPanel ID="fpLogin" runat="server" LabelWidth="75" Border="false" BodyStyle="padding:10px;padding-top:16px;" ButtonAlign="Right" Layout="Form" AnchorHorizontal="100%">
					<Items>
						<ext:TextField ID="tUsername" runat="server" FieldLabel="Username" AllowBlank="false" BlankText="Username is a required field." MaxLength="20" MaxLengthText="20" IDMode="Static" TabIndex="0" />
						<ext:TextField ID="tPassword" runat="server" FieldLabel="Password" AllowBlank="false" BlankText="Password is a required field." InputType="Password" MaxLength="50" MaxLengthText="50" IDMode="Static" />
						<ext:Panel runat="server" Border="false" BodyStyle="text-align:center;font-size:10px;padding-top:5px" Hidden="true">
							<Content>
								<ext:HyperLink ID="lForgetPass" runat="server" Text="Forget your Password?" />
							</Content>
						</ext:Panel>
					</Items>
					<Buttons>
						<ext:Button ID="bLogin" runat="server" Text="Login!" Icon="DoorIn">
							<Listeners>
								<Click Handler="LoginManager.login();" />
							</Listeners>
						</ext:Button>
					</Buttons>
				</ext:FormPanel>
			</Content>
			<BottomBar>
				<ext:StatusBar ID="sbStatus" runat="server" CtCls="icon-error" DefaultText="Please login to your eSuite account." />
			</BottomBar>
		</ext:Panel>					
	</Content>
	<Listeners>
		<Show Handler="#{tUsername}.focus(false, 60);" />
	</Listeners>				
</ext:Window>

[geoffrey.mcgill]

Hi state,

When I tested your Window sample yesterday, I suggested adding the .Delay property to slightly delay the Listener from firing and give the controls time to render.


See http://forums.ext.net/showthread.php?postid=21170.aspx


In v0.8.x adding the .Delay would have been a good idea as well.

[state]

Yes. I have tried it in another project all by itself and get the same results.

Well, I understand that the results of AutoHeight can be unpredictable, but BEFORE v1.0, this page worked across all browsers and rendered correctly. Even now, I can replace Coolite v.08 objects and redefine my page back to pre-v1.0 and the page renders fine. It's when I move the page to v1.0 and replace the required keywords that the page no longer renders.


This is just the tip of the iceberg for us. We have 30 more pages that use AutoHeight in some form or fashion that were working fine in v.08. I'm afraid when I start to tackle those pages that we will have the same rendering issues.


FYI, Our application uses the entire webpage and a majority of the objects we won't even know the height of the object (because the objects height needs to be set based on their browser window size).


The biggest problem is that we have a lot of pages with a lot of code written with v.08. Having to go back and "re-code" a lot of pages to accommodate v1.0 specifics is going to be a huge job. So, as you can imagine, I'm trying to find the quickest and easiest way to accomplish this without having to rewrite/write new code to do something that is already working in v.08 (outside required changes, of course). Like I said before, I have done nothing to this page other than change <Body> to <Content> and put the FormLayout anchors into a <Anchors> collection.


We want to upgrade to 1.0 very badly, because of some functionality that ExtJS 3.0 provides, but I don't know if we can upgrade at the cost of a lot of overhead time to make things that are already working in v.08 to work in 1.0.


Thanks.

[state]

Yes, it was added before I reverted back from Team server to previous code.

[geoffrey.mcgill]

Sorry, forgot to mention, but should be obvious... once I added the Delay property, your original sample appeared to render just fine. Of course, you only posted the markup for the Window and if there is other css on the Page that might be affecting things.

[Vladimir]

Hi,

I added AutoHeight="true" for Window in the example which was provided by Geoffrey and it works in all base browsers. Can you update 1.0 version from SVN and retest? If it doesn't help then can you create simple solution, include your local assemblies, zip it and send to the support email (please do not post that solution on the forum ). We will investigate it. Thanks

[state]

Alright. I reverted back, removed all the refactoring that was mentioned before. Started from square one and converted the page back to v.08 and started from a base again.

First, thing I tried. Just adding the Delay to the Focus. This caused the page to render correctly now.


I feel like a fool now. I got caught up in the heat of the moment and was changing things here and there, doing the refactoring, check stuff in and out of Team Server, that I didn't start with the simplest thing first and that is the adding the Delay.


I think I added the Delay earlier when I was in the middle of changing the Form Layout's collection. I don't know. I feel like a moron. Sorry guys. Should have done this a lot sooner and start from square one first.


I apologize for this. :(

[geoffrey.mcgill]

Hi state,

The best thing I can suggest is to post a complete .aspx code sample which demonstrates how to reproduce the problem. It would also be better if you started a new thread specific to the tech support issue.


The Window code sample you posted earlier appears to work just fine when the .Delay is added to the <Show> Listener... or if the <Show> Listener is removed.

[geoffrey.mcgill]

Some of these posts appear out of sequence. We're just all replying quickly and the response timestamps are overlapping. Just thought I would point that out for anyone reading this later.