problem in Layout

**mahsa** · Jul 02, 2017, 4:25 AM

Hi
I am new in ext.net webform
I want to have a page like this

Click image for larger version.

Name: ExtLayout.png
Views: 61
Size: 49.6 KB
ID: 25013

this is my page code

   <ext:Panel runat="server" Layout="FormLayout" Title="PieChart" AnchorHorizontal="100%" AnchorVertical="40%">
                        <Items>
                            <ext:PolarChart
                                ID="Chart1"
                                runat="server"
                                Shadow="true">
                                <LegendConfig runat="server" Dock="Right" />
                                <Store>
                                    <ext:Store
                                        runat="server"
                                        Data="<%#DAL.ChartData.GenerateData(8) %>"
                                        AutoDataBind="true">
                                        <Model>
                                            <ext:Model runat="server">
                                                <Fields>
                                                    <ext:ModelField Name="Name" />
                                                    <ext:ModelField Name="Data1" />
                                                </Fields>
                                            </ext:Model>
                                        </Model>
                                    </ext:Store>
                                </Store>
                                <Interactions>
                                    <ext:ItemHighlightInteraction />
                                    <ext:RotateInteraction />
                                </Interactions>
                                <Series>
                                    <ext:PieSeries
                                        AngleField="Data1"
                                        ShowInLegend="true"
                                        Donut="0"
                                        HighlightMargin="20">
                                    </ext:PieSeries>
                                </Series>
                            </ext:PolarChart>
                        </Items>
                    </ext:Panel>

and this is my masterpage

<body>

    <ext:ResourceManager runat="server" Theme="Gray" />
    <ext:Viewport runat="server" Layout="border">
        <Items>
            <ext:Panel runat="server" Region="West"
                Split="true" Title="Servers" Width="200" Scrollable="Vertical"     
                Collapsible="true">
                <Items>

                    <ext:Container runat="server" Layout="FitLayout" Region="Center">
                        <Content>
                            <asp:ContentPlaceHolder ID="ContentPlaceHolder2" runat="server">
                            </asp:ContentPlaceHolder>
                        </Content>
                    </ext:Container>

                </Items>
            </ext:Panel>

            <ext:Panel runat="server" Region="Center"
                Title="ServersInfo">
                <Items>
                    
                    <%--<ext:Container runat="server" Layout="FitLayout" Region="Center">--%>
                       <ext:Container runat="server" Layout="FitLayout" Region="Center">
                        <Content>
                            <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
                            </asp:ContentPlaceHolder>
                        </Content>
                    </ext:Container>  

                </Items>
            </ext:Panel>
        </Items>
    </ext:Viewport>

</body>

please help me how Can I have a correct layout?

**mahsa** · Jul 02, 2017, 5:10 AM

How Can I fill whol place in contenct placeholder?

**fabricio.murta** · Jul 03, 2017, 2:42 PM

Hello @mahsa! Welcome to Ext.NET forums!

Please, would you mind editing your message and wrapping code between [code][/code] tags? Improves a lot readability.

As for your question, Ext.NET layouts govern Ext.NET components therein. If you add custom content with arbitrary code there's no guarantee (nor likeliness) the layout will be obeyed at all.

In other words, FitLayout there would only be followed if you had your container with an Items (instead of Contents) list. You can search the forums for the related subject and you'll find more details on this limitation. This google search string should do it: site:forums.ext.net FitLayout content.

I hope this helps!

**mahsa** · Jul 04, 2017, 4:15 AM

thank you dear @fabricio.murta for answer
I'm sorry i'm so new in ext.net and ext forum
could you please tell me whats the correct layout?
I coulden't find correct layout

**mahsa** · Jul 04, 2017, 4:46 AM

I changed my code
but problem exist yet.
its very force for me to do it.
I used TabPanle and this panel is One of panles.
When page loaded Chart panle didnt show
but with each click on the GridpageNum,ber chart panel got big and bigger!
please tell me how can I have a responsive layout in my page with masterPage?

Click image for larger version.

Name: ExtLayout1.png
Views: 53
Size: 76.6 KB
ID: 25014

    <ext:Panel
                ID="Tab5"
                runat="server"
                Title="Packages"
                Scrollable="Both"
                Layout="AnchorLayout">
                <Items>

                    <ext:Panel runat="server" Region="North"
                        Split="true" Title="Servers" Scrollable="Vertical"
                        Collapsible="true">
                        <Items>
                            <ext:Panel
                                runat="server"
                                Layout="FitLayout">
                                <Items>
                                    <ext:CartesianChart
                                        ID="Chart1"
                                        AnchorVertical="30%"
                                        runat="server">
                                        <Store>
                                            <ext:Store
                                                runat="server"
                                                Data="<%# DAL.ChartData.GenerateData() %>"
                                                AutoDataBind="true">
                                                <Model>
                                                    <ext:Model runat="server">
                                                        <Fields>
                                                            <ext:ModelField Name="Name" />
                                                            <ext:ModelField Name="Data1" />
                                                        </Fields>
                                                    </ext:Model>
                                                </Model>
                                            </ext:Store>
                                        </Store>

                                        <Axes>
                                            <ext:NumericAxis
                                                Position="Left"
                                                Fields="Data1"
                                                Grid="true"
                                                Title="Number of Hits"
                                                Minimum="0">
                                                <Renderer Handler="return Ext.util.Format.number(label, '0,0');" />
                                            </ext:NumericAxis>
                                            <ext:CategoryAxis Position="Bottom" Fields="Name" Title="Month of the Year">
                                                <Label RotationDegrees="-45" />
                                            </ext:CategoryAxis>
                                        </Axes>
                                        <Series>
                                            <ext:BarSeries
                                                Highlight="true"
                                                XField="Name"
                                                YField="Data1">
                                                <Tooltip runat="server" TrackMouse="true">
                                                    <Renderer Handler="toolTip.setTitle(record.get('Name') + ': ' + record.get('Data1'));" />
                                                </Tooltip>
                                                <Label
                                                    Display="InsideEnd"
                                                    Field="Data1"
                                                    Orientation="Horizontal"
                                                    Color="#333"
                                                    TextAlign="Center">
                                                    <Renderer Handler="return Ext.util.Format.number(text, '0');" />
                                                </Label>
                                            </ext:BarSeries>
                                        </Series>
                                    </ext:CartesianChart>
                                </Items>
                            </ext:Panel>
                        </Items>
                    </ext:Panel>

                    <ext:Panel runat="server" Region="Center"
                        Scrollable="Both"
                        AnchorVertical="70%"
                        Title="ServersInfo">
                        <Items>
                            <ext:GridPanel
                                ID="TablesInfoGridPanel"
                                Scrollable="Both"
                                Height="250"
                                runat="server">
                                <Store>
                                    <ext:Store
                                        ID="TablesInfoStore"
                                        runat="server"
                                        PageSize="15">
                                        <Model>
                                            <ext:Model runat="server" IDProperty="TableName">
                                                <Fields>
                                                    <ext:ModelField Name="TableName" />
                                                    <ext:ModelField Name="SchemaName" />
                                                    <ext:ModelField Name="RowCounts" />
                                                    <ext:ModelField Name="TotalSpaceMB" />
                                                    <ext:ModelField Name="TotalSpaceKB" />
                                                    <ext:ModelField Name="UsedSpaceKB" />
                                                    <ext:ModelField Name="UsedSpaceMB" />
                                                    <ext:ModelField Name="UnusedSpaceKB" />
                                                    <ext:ModelField Name="UnusedSpaceMB" />
                                                </Fields>
                                            </ext:Model>
                                        </Model>
                                    </ext:Store>
                                </Store>
                                <ColumnModel runat="server">
                                    <Columns>
                                        <ext:Column runat="server" DataIndex="TableName" Text="TableName" Flex="1" />
                                        <ext:Column runat="server" DataIndex="CompanyName" Text="SchemaName" Flex="1" />
                                        <ext:Column runat="server" DataIndex="RowCounts" Text="RowCounts" />
                                        <ext:Column runat="server" DataIndex="TotalSpaceMB" Text="TotalSpaceMB" />
                                        <ext:Column runat="server" DataIndex="TotalSpaceKB" Text="TotalSpaceKB" />
                                        <ext:Column runat="server" DataIndex="UsedSpaceKB" Text="UsedSpaceKB" />
                                        <ext:Column runat="server" DataIndex="UsedSpaceMB" Text="UsedSpaceMB" />
                                        <ext:Column runat="server" DataIndex="UnusedSpaceKB" Text="UnusedSpaceKB" />
                                        <ext:Column runat="server" DataIndex="UnusedSpaceMB" Text="UnusedSpaceMB" />
                                    </Columns>
                                </ColumnModel>

                                <BottomBar>
                                    <ext:PagingToolbar runat="server" HideRefresh="true" />
                                </BottomBar>
                            </ext:GridPanel>


                        </Items>
                    </ext:Panel>


                </Items>

            </ext:Panel>

**fabricio.murta** · Jul 04, 2017, 3:32 PM

Hello @mahsa!

I think your problem is because you want something like border or fit layouts to a viewport determined in your master page, and that's not supported out-of-the-box, because it requires you to use a content block to position your contentplaceholder in master page.

Please check this forum thread: What is the 4.2 version of the fix for this Old Forum Post.

Basically that's a thread discussing this issue and where we logged a feature request to add support for fitting content to a master page's viewport.

The problem with that is that we can't guarantee that inside that component placeholder there will be always a container or if it could wrap a component that can't really be 'maximized' (like, for example, a checkbox, or a single-line textfield). So that is going to be a tricky feature.

**mahsa** · Jul 05, 2017, 11:53 AM

@fabricio.murta
Thank you dear @fabricio.murta
I used Fit layout in my master page

<body>

    <ext:ResourceManager  runat="server" Theme="Gray" />
    <ext:Viewport runat="server" Layout="FitLayout">
        <Items>
            <ext:Panel runat="server" Region="West"
                Split="true" Title="Servers" Width="200" Scrollable="Vertical"     
                Collapsible="true">
                <Items>

                    <ext:Container runat="server" Region="Center">
                        <Content>
                            <asp:ContentPlaceHolder ID="ContentPlaceHolder2" runat="server">
                            </asp:ContentPlaceHolder>
                        </Content>
                    </ext:Container>

                </Items>
            </ext:Panel>

            <ext:Panel runat="server" Region="Center"
                Title="ServersInfo">
                <Items>
                    
                    <%--<ext:Container runat="server" Layout="FitLayout" Region="Center">--%>
                       <ext:Container runat="server" Region="Center">
                        <Content>
                            <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
                               
                            </asp:ContentPlaceHolder>
                        </Content>
                    </ext:Container>  

                </Items>
            </ext:Panel>
        </Items>
    </ext:Viewport>
</body>

whats the layuot of ext.net website?

Click image for larger version.

Name: 11.png
Views: 42
Size: 46.2 KB
ID: 25019

how this tab fills with panel??

**fabricio.murta** · Jul 05, 2017, 2:21 PM

Hello @mahsa!

The layout used on Ext.NET Examples website is defined at extnet/Ext.NET.Examples/src/Default.aspx. In fact you can just git-clone the whole repository and run the project on your computer and experiment with it as much as you'd like to.

I used Fit layout in my master page

Yes, and see how you used contentplaceholder inside a content block which, in the end is inside the viewport with FitLayout.

In your code, the panel defined in line 6 will be occupying the whole browser screen, whereas the Region="West" attribute will just be ignored as the surrounding component (viewport) has a FitLayout layout not BorderLayout.

I hope this helps!

**mahsa** · Jul 08, 2017, 10:30 AM

Thank you dear @fabricio

Thread: problem in Layout

Thread Tools

Search Thread

Display

problem in Layout

Similar Threads

[CLOSED] Strange Layout Problem

[CLOSED] Layout Problem with Column Layout

Layout Problem

TabPanel layout problem

layout problem due to resolution

Tags for this Thread

Posting Permissions

Sitemap

Downloads

Resources

Thread: problem in Layout

problem in Layout

Similar Threads

Tags for this Thread

Posting Permissions

Sitemap

Downloads

Resources

Stay connected with us