[CLOSED] Layout in ext.net drives me mad - "Stretch" a TabPanel/Panel and its contents fails if within a UserControl?

**wagger** · May 17, 2011, 9:30 AM

So thats not really the end of the story.

I have two GridPanels below, none of them expands or stretches as I want them. I dont know how to make it happen either.

Is it doable? To hve 2 FitLayouts wrapping each of the GridPanels doesnt work, some error saying "only one layout control" at a time.

I am at a loss when it comes to design in ext.net as you notice =)

<%@ Page Language="C#" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<script runat="server">
    
</script>
       
<!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>
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
           
        }

      
    
    </script>
</head>
<body>
    <form id="Form1" runat="server">
        <ext:ResourceManager ID="ResourceManager1" runat="server" />
              
 
    <ext:GridPanel ID="GridPanel1" runat="server" Title="TEst1" AutoHeight="true">
        <TopBar>
            <ext:Toolbar ID="Toolbar1" runat="server">
                <Items>
                    <ext:ToolbarFill ID="ToolbarFill1" runat="server" />
                    <ext:DateField runat="server" ID="dateFieldBulkStart" EmptyText="Från"></ext:DateField>
                    <ext:DateField runat="server" ID="dateFieldBulkEnd" EmptyText="Till"></ext:DateField>

                    <ext:Button ID="Button1123" runat="server" Icon="ArrowRefresh" Text="Uppdatera">
                    </ext:Button>
                </Items>
            </ext:Toolbar>
        </TopBar>
        <Store> 
            <ext:Store ID="Store1" runat="server">
                <Reader>
                    <ext:ArrayReader>
                        <Fields>
                        </Fields>
                    </ext:ArrayReader>
                </Reader>
            </ext:Store>
        </Store>
        <View>
            <ext:GridView ID="GridView2" runat="server" ScrollOffset="0" ForceFit="true">
            </ext:GridView>
        </View>
        <ColumnModel ID="ColumnModel3" runat="server">
            <Columns>
                <ext:Column Header="Id" Width="80"/>
                <ext:Column Header="bla1" />
                <ext:DateColumn Header="bla12" />
                <ext:DateColumn  Header="bla13" />
                <ext:DateColumn  Header="bla14" />
                <ext:DateColumn  Header="bla15" />
                <ext:Column Header="bla16"/>
                <ext:Column Header="bla17" Width="40"/>
            </Columns>
        </ColumnModel>
    </ext:GridPanel>
 
   

    <ext:GridPanel ID="GridPanel2" runat="server" Title="TEst2" MonitorResize="true">
        <TopBar>
            <ext:Toolbar ID="Toolbar2" runat="server">
                <Items>
                    <ext:ToolbarFill ID="ToolbarFill2" runat="server" />
                    <ext:DateField runat="server" ID="dateFieldStart" EmptyText="Från"></ext:DateField>
                    <ext:DateField runat="server" ID="dateFieldEnd" EmptyText="Till"></ext:DateField>
                    <ext:Button ID="Button1" runat="server" Icon="ArrowRefresh" Text="Uppdatera">
                    </ext:Button>
                </Items>
            </ext:Toolbar>
        </TopBar>
        <View>
            <ext:GridView ID="GridView1" runat="server" ScrollOffset="0" ForceFit="true">
            </ext:GridView>
        </View>
        <Store> 
            <ext:Store ID="Store2" runat="server">
                <Reader>
                    <ext:ArrayReader>
                        <Fields>
                        </Fields>
                    </ext:ArrayReader>
                </Reader>
            </ext:Store>
        </Store>
        <ColumnModel ID="ColumnModel1" runat="server">
            <Columns>
                <ext:Column Header="Id" Width="50"/>
                <ext:Column Header="Test"  />
                <ext:Column Header="test2" Width="120"/>
                <ext:DateColumn Header="test3"  Format="yyyy-MM-dd HH:mm" Width="80"/>
                <ext:DateColumn Header="test4"  Format="yyyy-MM-dd HH:mm" Width="80"/>
                <ext:Column Header="test5"  Width="210"/>
                <ext:Column Header="test6"  Width="210">
                </ext:Column>
                <ext:Column Header="test7"  Width="50"/>
                <ext:Column Header="test8"   Width="60"/>
            </Columns>
        </ColumnModel>
    </ext:GridPanel>

     

    </form>
</body>
</html>

**Daniil** · May 17, 2011, 9:38 AM

Sure, one container can have only one layout manager.

You can choose any other appropriate layout. I guess VBoxLayout or RowLayout would be appropriate ones.
https://examples1.ext.net/#/Layout/RowLayout/Basic/
https://examples1.ext.net/#/Layout/VBoxLayout/Basic/

**Daniil** · May 17, 2011, 9:58 AM

Originally Posted by wagger

I have many other places where the TopBar resizes and stretches to the full width of its container (even though its a bit buggy). I have emailed you a link to a video to show that behaviour (for your eyes only). In this video you can see a few different ToolBars (TopBar, BottomBar). Some of them resizes, some dont, and all of them are a bit buggy. I hope the video will show the problem.

Hi Ted,

I've just watched the video. I agree it's really informative, but, as far as I can understand, it's not actual already since you use FitLayout instead of ContainerLayout, isn't that so?

**wagger** · May 17, 2011, 10:14 AM

Well, it is actual still I'd say, since I havent figured out how to do "stuff" i want.

take a look my previous post (http://forums.ext.net/showthread.php...ll=1#post56964).

Thats is sort of the same issue. I have been playing around with FitLayout, MonitorResize, AutoWidth etc etc but it just doesnt get me where I want to.

I will VBoxLayout and RowLayout today, see if that will help me.

**Daniil** · May 17, 2011, 10:23 AM

In according to the post you mentioned I can provide you with the following example:

Example

<%@ Page Language="C#" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<script runat="server">
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!X.IsAjaxRequest)
        {
            this.Store1.DataSource = new object[] 
            { 
                new object[] { "test11", "test12", "test13" },
                new object[] { "test12", "test22", "test23" },
                new object[] { "test13", "test32", "test33" }
            };
            this.Store1.DataBind();
        }
    }
</script>

<!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 runat="server">
    <title>Ext.Net Example</title>
</head>
<body>
    <form runat="server">
    <ext:ResourceManager runat="server" />
    <ext:Store ID="Store1" runat="server">
        <Reader>
            <ext:ArrayReader>
                <Fields>
                    <ext:RecordField Name="test1" />
                    <ext:RecordField Name="test2" />
                    <ext:RecordField Name="test3" />
                </Fields>
            </ext:ArrayReader>
        </Reader>
    </ext:Store>
    <ext:Viewport runat="server" Layout="VBoxLayout">
        <LayoutConfig>
            <ext:VBoxLayoutConfig Align="Stretch" />
        </LayoutConfig>
        <Items>
            <ext:GridPanel runat="server" StoreID="Store1" Flex="1">
                <TopBar>
                    <ext:Toolbar runat="server">
                        <Items>
                            <ext:DisplayField runat="server" Text="Hello!" />
                            <ext:Button runat="server" Text="Button" StandOut="true" />
                        </Items>
                    </ext:Toolbar>
                </TopBar>
                <ColumnModel runat="server">
                    <Columns>
                        <ext:Column Header="Test1" DataIndex="test1" />
                        <ext:Column Header="Test2" DataIndex="test2" />
                        <ext:Column Header="Test3" DataIndex="test3" />
                    </Columns>
                </ColumnModel>
                <View>
                    <ext:GridView runat="server" ForceFit="true" />
                </View>
            </ext:GridPanel>
            <ext:GridPanel runat="server" StoreID="Store1" Flex="1">
                <TopBar>
                    <ext:Toolbar runat="server">
                        <Items>
                            <ext:DisplayField runat="server" Text="Hello!" />
                            <ext:Button runat="server" Text="Button" StandOut="true" />
                        </Items>
                    </ext:Toolbar>
                </TopBar>
                <ColumnModel runat="server">
                    <Columns>
                        <ext:Column Header="Test1" DataIndex="test1" />
                        <ext:Column Header="Test2" DataIndex="test2" />
                        <ext:Column Header="Test3" DataIndex="test3" />
                    </Columns>
                </ColumnModel>
                <View>
                    <ext:GridView runat="server" ForceFit="true" />
                </View>
            </ext:GridPanel>
        </Items>
    </ext:Viewport>
    </form>
</body>
</html>

**geoffrey.mcgill** · May 17, 2011, 5:12 PM

Originally Posted by wagger

So thats not really the end of the story.

I have two GridPanels below, none of them expands or stretches as I want them. I dont know how to make it happen either.

Is it doable? To hve 2 FitLayouts wrapping each of the GridPanels doesnt work, some error saying "only one layout control" at a time.

I am at a loss when it comes to design in ext.net as you notice =)

I'm not entirely sure if this has been solved by @daniil's recommendation to use VBoxLayout, but... you cannot just keep posting that "none of them expands or stretches as I want them" and then provide no description of your desired layout.

I re-read this thread again and unless I'm missing something (probable), I still don't understand your requirements.

Maybe you could post a simple line drawing showing how you would like the panels to fill/stretch?

**wagger** · May 18, 2011, 2:47 PM

Hi Geoffrey,

I havent had time to look at Daniils suggestion until now. I have however sent Daniil a video, a screencast, showing the problem that I encountered in this case. And actually, I encounter that often when I use gridControls and to be honest - in almost all of my layouts.

I will spend the rest of this day doing some examples of how I want something to behave and then try to show how difficult it is (for me) to get it right in ext.net.

Thanks again =)

**geoffrey.mcgill** · May 18, 2011, 3:39 PM

Originally Posted by wagger

I will spend the rest of this day doing some examples of how I want something to behave and then try to show how difficult it is (for me) to get it right in ext.net.

Spending time running tests with the layouts is going to help familiarize yourself with Ext.NET, but I'm don't think this whole process needs to be this difficult. If you have an idea about the layout you would like, sketch it out on a piece of paper, take a picture of it and post it here.

Another "sketch" tool that might be helpful is http://balsamiq.com/.

If you just let us know what approximately you would like to see happen, I'm sure we can help quickly put a sample together.

**wagger** · May 18, 2011, 4:33 PM

Actually, I have posted several code samples aswell as sending Daniils a screencast of the problems. The code samples posted earlier in this thread is actually a simplified version of the screencast I sent him.

But this thread is not primarily so solve the layout problem that I have right now, or in a particular instance, but to understand what Controls to use, when, why and where.

Even though I ahve posted several layout issues here before, I never seem to be able to use the right "approach". Instead, for almost every thing I have that is sort of new, I have to come here and ask you guys. And thats a bit irritating, for me and I guess for you too.

Therefore I am trying to ask questions, both practical with hands-on examples, but also question so that I understand why a certain approach is not working and what does. Etc...

**wagger** · May 18, 2011, 4:45 PM

Also, if you look at my first post I have a picture which clearly indicates the problem I was addressing with a runnable example...

However, if you want you can close this thread and I'll start a new thread with specific examples as they come up.

Even though Daniils latest example is one step in the right direction, I am now investigating if it indeed will solve the whole layout issue.

Thread: [CLOSED] Layout in ext.net drives me mad - "Stretch" a TabPanel/Panel and its contents fails if within a UserControl?

Thread Tools

Search Thread

Display

Similar Threads

[CLOSED] How does "MaskCls" work for "AutoLoad" mask in panel control

[CLOSED] TabPanel "TabCloseMenu" plug-in "CloseOtherTabsText" property not working

[CLOSED] Ext.net v2 Beta release: Panel collapsed with CollapseMode="Mini" and Split="true"

[CLOSED] GridPanel: ServerSide Code Equivalent for "getSelectionModel().selectRow(0)" and "getView().focusRow(0)"

When I try to Pass an ID in the " Store.Load({params: ( " my PAGING starts up with "NaN" as the first page...

Tags for this Thread

Posting Permissions

Sitemap

Downloads

Resources

Thread: [CLOSED] Layout in ext.net drives me mad - "Stretch" a TabPanel/Panel and its contents fails if within a UserControl?

Similar Threads

Tags for this Thread

Posting Permissions

Sitemap

Downloads

Resources

Stay connected with us