PDA

View Full Version : [CLOSED] Tabs are not resized correctly with the Content used instead of Items



Hlodvig
Nov 22, 2013, 7:19 AM
So. I have tabs and each tab contains user controls. Since I can't add directly them to the Items collection, I add them to the Content control, but the example is simple so there are just ext.net widgets in the Control section
TestForm.aspx:


<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="TestForm.aspx.cs" Inherits="RdC.Front.TestForm" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Ext.NET Examples</title>
</head>
<body>
<ext:ResourceManager ID="ResourceManager1" runat="server" />
<form id="Form1" runat="server">
<ext:TabPanel ID="testTabPanel" runat="server" ActiveTabIndex="0"
Plain="true" Width="600" OnLoad="testTabPanel_Load">
<Items>
<ext:Panel ID="Panel1" runat="server" Padding="6">
<Content>
<ext:TextField runat="server" ID="textField1" />
</Content>
<DirectEvents>
<Activate OnEvent="Panel1_Activate" Complete="Ext.net.Mask.hide();">
<EventMask Msg="Loading ..." ShowMask="true" CustomTarget="#{Panel1}" />
</Activate>
</DirectEvents>
</ext:Panel>
<ext:Panel ID="Panel2" runat="server" Padding="6">
<Content>
<ext:TextField runat="server" ID="textField2" />
</Content>
<DirectEvents>
<Activate OnEvent="Panel2_Activate" Complete="Ext.net.Mask.hide();">
<EventMask Msg="Loading ..." ShowMask="true" CustomTarget="#{Panel2}" />
</Activate>
</DirectEvents>
</ext:Panel>
<ext:Panel ID="Panel3" runat="server" Padding="6" Layout="FitLayout">
<Content>
<ext:TextField runat="server" ID="textField3" />
</Content>
<DirectEvents>
<Activate OnEvent="Panel3_Activate" Complete="Ext.net.Mask.hide();">
<EventMask Msg="Loading ..." ShowMask="true" CustomTarget="#{Panel3}" />
</Activate>
</DirectEvents>
</ext:Panel>
<ext:Panel ID="Panel5" runat="server" Padding="6">
<Content>
<ext:GridPanel runat="server" ID="gridPanel5">
<Store>
<ext:Store runat="server" ID="gridStore5" PageSize="5">
<Model>
<ext:Model ID="Model1" runat="server">
<Fields>
<ext:ModelField Name="Id" Type="Int" />
<ext:ModelField Name="Name" Type="String" />
<ext:ModelField Name="Date" Type="Date" />
</Fields>
</ext:Model>
</Model>
<Reader>
<ext:ArrayReader />
</Reader>
</ext:Store>
</Store>
<ColumnModel ID="ColumnModel1" runat="server">
<Columns>
<ext:NumberColumn runat="server" ID="colId5" DataIndex="Id" Text="ID"></ext:NumberColumn>
<ext:Column runat="server" ID="colName5" DataIndex="Name" Text="Name"></ext:Column>
<ext:DateColumn runat="server" ID="colDate5" DataIndex="Date" Text="Date"></ext:DateColumn>
</Columns>
</ColumnModel>
<BottomBar>
<ext:PagingToolbar ID="PagingToolbar5" runat="server" HideRefresh="true" />
</BottomBar>
</ext:GridPanel>
</Content>
<DirectEvents>
<Activate OnEvent="Panel5_Activate" Complete="Ext.net.Mask.hide();">
<EventMask Msg="Loading ..." ShowMask="true" CustomTarget="#{Panel5}" />
</Activate>
</DirectEvents>
</ext:Panel>
<ext:Panel ID="Panel6" runat="server" Padding="6">
<Content>
<ext:GridPanel runat="server" ID="gridPanel6">
<Store>
<ext:Store runat="server" ID="gridStore6" PageSize="5">
<Model>
<ext:Model ID="Model2" runat="server">
<Fields>
<ext:ModelField Name="Id" Type="Int" />
<ext:ModelField Name="Name" Type="String" />
<ext:ModelField Name="Date" Type="Date" />
</Fields>
</ext:Model>
</Model>
<Reader>
<ext:ArrayReader />
</Reader>
</ext:Store>
</Store>
<ColumnModel ID="ColumnModel2" runat="server">
<Columns>
<ext:NumberColumn runat="server" ID="colId6" DataIndex="Id" Text="ID"></ext:NumberColumn>
<ext:Column runat="server" ID="colName6" DataIndex="Name" Text="Name"></ext:Column>
<ext:DateColumn runat="server" ID="colDate6" DataIndex="Date" Text="Date"></ext:DateColumn>
</Columns>
</ColumnModel>
<BottomBar>
<ext:PagingToolbar ID="PagingToolbar6" runat="server" HideRefresh="true" />
</BottomBar>
</ext:GridPanel>
</Content>
<DirectEvents>
<Activate OnEvent="Panel6_Activate" Complete="Ext.net.Mask.hide();">
<EventMask Msg="Loading ..." ShowMask="true" CustomTarget="#{Panel6}" />
</Activate>
</DirectEvents>
</ext:Panel>
<ext:Panel ID="Panel7" runat="server" Padding="6" Layout="FitLayout">
<Content>
<ext:GridPanel runat="server" ID="gridPanel7">
<Store>
<ext:Store runat="server" ID="gridStore7" PageSize="5">
<Model>
<ext:Model ID="Model3" runat="server">
<Fields>
<ext:ModelField Name="Id" Type="Int" />
<ext:ModelField Name="Name" Type="String" />
<ext:ModelField Name="Date" Type="Date" />
</Fields>
</ext:Model>
</Model>
<Reader>
<ext:ArrayReader />
</Reader>
</ext:Store>
</Store>
<ColumnModel ID="ColumnModel3" runat="server">
<Columns>
<ext:NumberColumn runat="server" ID="NumberColumn1" DataIndex="Id" Text="ID"></ext:NumberColumn>
<ext:Column runat="server" ID="Column1" DataIndex="Name" Text="Name"></ext:Column>
<ext:DateColumn runat="server" ID="DateColumn1" DataIndex="Date" Text="Date"></ext:DateColumn>
</Columns>
</ColumnModel>
<BottomBar>
<ext:PagingToolbar ID="PagingToolbar1" runat="server" HideRefresh="true" />
</BottomBar>
</ext:GridPanel>
</Content>
<DirectEvents>
<Activate OnEvent="Panel7_Activate" Complete="Ext.net.Mask.hide();">
<EventMask Msg="Loading ..." ShowMask="true" CustomTarget="#{Panel7}" />
</Activate>
</DirectEvents>
</ext:Panel>
</Items>
</ext:TabPanel>
</form>
</body>
</html>


code-behind:


using System;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using Ext.Net;
using System.Web.Security;

namespace RdC.Front
{
public partial class TestForm : RdC.Front.BasePage
{
protected void Page_Init(object sender, EventArgs e)
{
if (!IsPostBack)
{
this.Localize();
}
}

private void Localize()
{
this.Panel1.Title = "TF - default";
this.Panel2.Title = "TF - call doLayout";
this.Panel3.Title = "TF - FitLayout";
this.Panel5.Title = "grid - default";
this.Panel6.Title = "grid - call doLayout";
this.Panel7.Title = "grid - FitLayout";
}

protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack && !X.IsAjaxRequest)
{
this.LoadPanel1();
}
}

protected void Panel1_Activate(object sender, DirectEventArgs e)
{
textField1.Visible = true;
textField2.Visible = false;
textField3.Visible = false;

LoadPanel1();
}

[DirectMethod]
public void LoadPanel1()
{
textField1.Text = " text1 generated at" + DateTime.Now;
}

protected void Panel2_Activate(object sender, DirectEventArgs e)
{
textField1.Visible = false;
textField2.Visible = true;
textField3.Visible = false;

LoadPanel2();

Panel2.DoLayout();
}

[DirectMethod]
public void LoadPanel2()
{
textField2.Text = "text2 generated at" + DateTime.Now;
}

protected void Panel3_Activate(object sender, DirectEventArgs e)
{
textField1.Visible = false;
textField2.Visible = false;
textField3.Visible = true;

LoadPanel3();
}

[DirectMethod]
public void LoadPanel3()
{
textField3.Text = "text3 generated at" + DateTime.Now;
}

protected void Panel5_Activate(object sender, DirectEventArgs e)
{
textField1.Visible = false;
textField2.Visible = false;
textField3.Visible = false;

LoadPanel5();
}

[DirectMethod]
public void LoadPanel5()
{
gridStore5.DataSource = this.Data;
gridStore5.DataBind();
}

protected void Panel6_Activate(object sender, DirectEventArgs e)
{
textField1.Visible = false;
textField2.Visible = false;
textField3.Visible = false;

LoadPanel6();

Panel6.DoLayout();
}

[DirectMethod]
public void LoadPanel6()
{
gridStore6.DataSource = this.Data;
gridStore6.DataBind();
}

protected void Panel7_Activate(object sender, DirectEventArgs e)
{
textField1.Visible = false;
textField2.Visible = false;
textField3.Visible = false;

LoadPanel7();
}

[DirectMethod]
public void LoadPanel7()
{
gridStore7.DataSource = this.Data;
gridStore7.DataBind();
}

protected void testTabPanel_Load(object sender, EventArgs e)
{
}

private object[] Data
{
get
{
DateTime now = DateTime.Now;

return new object[] {

new object[] { 1, "3m Co", now },
new object[] { 2, "Alcoa Inc", now },
new object[] { 3, "Altria Group Inc", now },
new object[] { 4, "American Express Company", now },
new object[] { 5, "American International Group, Inc.", now },
new object[] { 6, "AT&T Inc.", now },
new object[] { 7, "Boeing Co.", now },
new object[] { 8, "Caterpillar Inc.", now },
new object[] { 9, "Citigroup, Inc.", now },
new object[] { 10, "E.I. du Pont de Nemours and Company", now },
new object[] { 11, "Exxon Mobil Corp", now },
new object[] { 12, "General Electric Company", now },
new object[] { 13, "General Motors Corporation", now },
new object[] { 14, "Hewlett-Packard Co.", now },
new object[] { 15, "Honeywell Intl Inc", now },
new object[] { 16, "Intel Corporation", now },
new object[] { 17, "International Business Machines", now },
new object[] { 18, "Johnson & Johnson", now },
new object[] { 19, "JP Morgan & Chase & Co", now },
new object[] { 20, "McDonald\"s Corporation", now },
new object[] { 21, "Merck & Co., Inc.", now },
new object[] { 22, "Microsoft Corporation", now },
new object[] { 23, "Pfizer Inc", now },
new object[] { 24, "The Coca-Cola Company", now },
new object[] { 25, "The Home Depot, Inc.", now },
new object[] { 26, "The Procter & Gamble Company", now },
new object[] { 27, "United Technologies Corporation", now },
new object[] { 28, "Verizon Communications", now },
new object[] { 29, "Wal-Mart Stores, Inc.", now }

};
}
}
}
}


page first load:
7243
expected fully seen tab

switch to tab2 (doLayout is called, so everything is ok):
7244
ok.

switch to tab3:
7245
well, panel is ok, but textfield is resized... well, it can be solved by setting InputWidth, but it's strange that Width property is not honored at all, what for this property?

switch back to tab1:
7246
ok.

let's see grids...
switch to tab5:
7247
expected fully seen grid

switch to tab6:
... and I can attach 5 pictures per post

Hlodvig
Nov 22, 2013, 7:26 AM
Let's continue...

switch to tab6:
7248
ok

going to the last page of the grid:
7249
expected: panel body is resized

switch to tab7:
7250
ok

going to the last page of the grid:
7251
suddenly ok

switch back to tab6:
7253
ok

Hlodvig
Nov 22, 2013, 7:40 AM
Let's continue:

Listing grid back to 5th page:
7254
expected: fully seend grid

and back to tab5:
7255
ok

and so on it can be continued forever.

So the main topics are:
1. tab content is not resized correctly unless I set the layout to FitLayout (err, and what about "Content is not ruled out by laout"?)
2. AutoDoLayout won't help
3. just calling doLayou won't help since it is called just one time and call it explicitly on grid's paging is bad
4. setting Layout and using Content since "Layout logic and non Ext.Net controls is not supported combination" (c) Vladimir and now I'm getting exceptions unless I wrap the non-ext.Net widget into container (and still it works and it is an only solution to resizing issue)
5. using Items collection instead of content won't resolve the problem because I have a lot of user web controls nested into the Panels in real life and they still not resized correctly. And still I don't like constructions like


<ext:Panel>
<Items>
<ext:Container>
<Content>
.....
</Content>
</ext:Container>
</Items>
</ext:Panel>


Adding user control to parent Panel's Content section takes less space on the page and more logical and beautiful :-)
And still - what the purpose of the Content in that case? Why just not allow everything to be added to the Items collection? Because right now Content is no different from the Items. I thought that Content is not ruled by the layout, but as I can see it's not true.

Baidaly
Nov 23, 2013, 12:21 AM
Hello!

Could you say, did this post http://forums.ext.net/showthread.php?24647&p=121530&viewfull=1#post121530 help you to solve this problem?

michaeld
Nov 23, 2013, 4:36 AM
Change all your <Contents> to <Items>.

Hlodvig
Nov 23, 2013, 9:12 AM
Hello!

Could you say, did this post http://forums.ext.net/showthread.php?24647&p=121530&viewfull=1#post121530 help you to solve this problem?
No. More than that this post was started after discussing problems there.

Hlodvig
Nov 23, 2013, 9:13 AM
Change all your <Contents> to <Items>.
I can't. Even if I wrap every user control into ext:Container - that wouldn't change anything.

Vladimir
Nov 24, 2013, 12:12 AM
So, as I understand the main point of your example to demonstrate that TabPanel auto-height functionality doesn't work very well

Auto-height functionality in ExtJS 4.x uses the following rules (from my observations):
- Component calculates own height during own relayouting (during component layout, thre is component and container layout. Component layout is internal component's logic for sizing)
- Content changing doesn't pereform relayouting because Content totally under developer controls. Relayouting is performed if items are changed only
- Auto-height for items depends from ShrinkWrap property (http://docs-origin.sencha.com/extjs/4.2.1/#!/api/Ext.AbstractComponent-cfg-shrinkWrap)

So, if you need correct auto-height behaviour then use Items only or update layout after content height changes (caling 'doLayout' or 'doComponentLayout' methods of container)



page first load:
expected fully seen tab

Content and its container rendering is not synchronized. In this case, textfield in side content is rendered after first tab rendering. So, first tab height is not calculated properly. Solution, to use Items instead Content or set AutoDoLayout="true" for Panel1




switch to tab2 (doLayout is called, so everything is ok):

I don't see any difference if remove DoLayout calling. TabPanel calls relayouting for the tab after each one activating automatically



switch to tab3:
well, panel is ok, but textfield is resized... well, it can be solved by setting InputWidth, but it's strange that Width property is not honored at all, what for this property?

If you set Layout for container then widgets inside Content will be considered as Items (if you don't need such behaviour then don't set Layout property)



let's see grids...
switch to tab5:
expected fully seen grid

Grid bound a data data after the tab rendedring. Use Items instead Content or relayout the container in Refresh event of grid's view listener



1. tab content is not resized correctly unless I set the layout to FitLayout (err, and what about "Content is not ruled out by laout"?)

Just in this case, Content widgets are considered as Items. Relayouting is performed automatically for items changing



2. AutoDoLayout won't help

AutoDoLayout forces relayouting only once after rendering. Content changing is not monitored



3. just calling doLayou won't help since it is called just one time and call it explicitly on grid's paging is bad

Content chages are not tracking automatically, you have to relayout manuallu when it is required



4. setting Layout and using Content since "Layout logic and non Ext.Net controls is not supported combination" (c) Vladimir and now I'm getting exceptions unless I wrap the non-ext.Net widget into container (and still it works and it is an only solution to resizing issue)

Just remove Layout if need to use pure Content. Layout works with Items only



5. using Items collection instead of content won't resolve the problem because I have a lot of user web controls nested into the Panels in real life and they still not resized correctly. And still I don't like constructions like

Content resizing is developer obligation. Container manages Items only

michaeld
Nov 24, 2013, 1:16 AM
When I mentioned switching Content to Items, I didn't read your message that the reason you're doing this is because you have other controls in your production case. How I've addressed this issue is in my project is by setting Items around all extnet controls. If I have a non-extnet control or group of them in that section, I wrap them with their own Container with the control in its Content. I've found higher reliability this way. It's not perfect, but it makes it easier to address the calling of doLayout to the specific control only when issues crop up, plus it performs better when it has less area to layout.

Hlodvig
Nov 26, 2013, 3:20 PM
Well, the main issue is that something was changed regarding the layouts and content and it was not reflected nowhere. Probably it was a bug-fix, but still nothing in changelog or breaking changes...



Content and its container rendering is not synchronized. In this case, textfield in side content is rendered after first tab rendering. So, first tab height is not calculated properly. Solution, to use Items instead Content or set AutoDoLayout="true" for Panel1

I see. Anyway AutoDoLayout won't help with nested tabs, only FitLayout works.



I don't see any difference if remove DoLayout calling. TabPanel calls relayouting for the tab after each one activating automatically

But in some cases (when there is a user control inside of Content) just re-layouting won't help anyway. And I have nested user controls and tabs - so I have to set AutoDoLayout to true or call doLayout explicitly.



If you set Layout for container then widgets inside Content will be considered as Items (if you don't need such behaviour then don't set Layout property)

That's it! Yes, I know it now.



Grid bound a data data after the tab rendedring. Use Items instead Content or relayout the container in Refresh event of grid's view listener

Too bad. But setting layout to FitLayout will cause Content be considered as an Items and that will do the trick



Just remove Layout if need to use pure Content. Layout works with Items only

And it should be noted somewhere that setting layout will cause Content be treated as Items...


Content resizing is developer obligation. Container manages Items only
The main problem is that it worked well in v1.7
Ok, now I re-did the design, I found out that not only the mixing two collections is bad but mixing ext.Net widgets with user controls in the Content section is also bad. So I removed the ext.Net item from the Content section (probably I'll put it somewhere - it just an input with direct link to the tab), but I still have and issue with StatusBar - it just won't fit.
I mean that if I have the following design:


<ext:TabPanel ID="revendeurTabPanel" runat="server" OnLoad="revendeurTabPanel_Load" Width="600" AutoDoLayout="true">
<TopBar>
<ext:Toolbar runat="server" Hidden="true">
<Items>
<ext:TextField runat="server" ID="TabUrl1" Hidden="true" ReadOnly="true" LabelWidth="150" Width="450" />
</Items>
</ext:Toolbar>
</TopBar>
<Items>
<ext:Panel ID="MonProfilPanel" runat="server" SkinID="TabFramePanel">
<Content>
<uc:monProfilTag runat="server" ID="MonProfil" />
</Content>
<DirectEvents>
<Activate OnEvent="MonProfilPanel_Activate" Complete="Ext.net.Mask.hide();">
<EventMask Msg="Loading ..." ShowMask="true" CustomTarget="#{MonProfilPanel}" />
</Activate>
</DirectEvents>
</ext:Panel>

where uc:monProfilTag is the


<ext:TabPanel ID="monProfilFormPanel" runat="server">
<Items>
<ext:Panel ID="societeTab" runat="server" SkinID="TabFramePanel">
<Content>
<uc:maSocieteTag ID="MaSociete" runat="server" SocieteRevendeur="true" />
</Content>
<BottomBar>
<ext:StatusBar ID="societeStatusBar" runat="server" />
</BottomBar>
<Buttons>
<ext:Button ID="societeBtnSubmit" runat="server" Text="Valider">

and uc:maSocieteTag is just some ext.Net FormPanel, by switching tabs back and forth, with doLayout and different layouts I still get the following:
7276
it is resized to several pixels.
prssing the button will cause the validation, so let's press it
7277
it is re-sized but still is not fully shown.

Hlodvig
Nov 26, 2013, 3:30 PM
BTW, what about an InputWidth property? What for is it? And (I have asked it before) will be the LabelWidth+InputWidth = Width? Because I had to change every TextField.Width property to InputWidth in my code...

Daniil
Dec 09, 2013, 5:33 AM
Hi @Hlodvig,

It looks like we overlooked the thread. Could you, please, clarify it is still actual or you got the answers in another thread (-s)?

Hlodvig
Dec 09, 2013, 6:00 AM
Hi @Hlodvig,

It looks like we overlooked the thread. Could you, please, clarify it is still actual or you got the answers in another thread (-s)?
Well I still have resizing issues, but I'll check if it can be solved using new knowledge and let you know.

The question about InputWidth was answered in the http://forums.ext.net/showthread.php?26171-CLOSED-IndicatorIcon-is-shown-inside-of-TextField

Hlodvig
Dec 09, 2013, 6:20 AM
BTW, online api docs still have AutoHeight property described but the ShrinkWrap property is not there (http://docs.ext.net/topic_0000000000001335.html).

Daniil
Dec 09, 2013, 12:42 PM
I am afraid the online docs have been not updated for awhile. Currently, this docs project is suspended.