Using Panel and Region in Ext.Net 4

  1. #1

    Using Panel and Region in Ext.Net 4

    Hello:

    I have the next piece of code in coolite to manage region in panel (It´s incomplete code only for explain):

                <ext:TabPanel ID="tabDepositos" runat="server" Height="830px" ActiveTabIndex="0"
                    DeferredRender="false">
                    <Tabs>
                        <ext:Tab ID="tab1" runat="server" Icon="Basket" Title="Depositos">
                            <Body>
                                <ext:BorderLayout ID="BorderLayout1" runat="server">
                                    <Center>
                                        <ext:Panel runat="server" ID="pnlCaja2" Title="Depositos encontrados" Icon="Basket">
                                          ....
                                        </ext:Panel>
                                    </Center>
    								
                                    <East Collapsible="true" MinWidth="175" Split="true">
                                        <ext:Panel ID="PanelOpciones" runat="server" Width="265" Title="Opciones" Icon="Box"
                                            CtCls="east-panel" BodyStyle="padding:5px;">
                                            .....
                                        </ext:Panel>
                                    </East>
                                </ext:BorderLayout>
                            </Body>
                        </ext:Tab>
    I write the next code for Ext.Net 4:

                <ext:TabPanel ID="tabDepositos" runat="server" Height="830px" ActiveTabIndex="0"
                    DeferredRender="false">
                    <Items>
                        <ext:Panel ID="tab1" runat="server" Icon="Basket" Title="Depositos">
                            <Items>
                                        <ext:Panel runat="server" ID="pnlCaja2" Title="Depositos encontrados" Icon="Basket"
                                            region="center">
                                          ....
                                        </ext:Panel>                       
    
                                        <ext:Panel ID="PanelOpciones" runat="server" Width="265" Title="Opciones" Icon="Box"
                                            CtCls="east-panel" BodyStyle="padding:5px;"
                                            region="East" Split="true" MinWidth="175">
                                            .....
                                        </ext:Panel>
                            </Items>
                        </ext:Tab>
    The solution run but the panel not use the region KeyWord and the second panel (ID="PanelOpciones") display at bottom of the first panel (ID="PnlCaja2"). I need the second panel display in the "East" region. Apparently the keyword region not function in this case.

    Some example or idea? I review some samples but are using viewport and i like to know another simple way.

    Thank´s
  2. #2
    Hello @devSF!

    I am confident this is an easy one! Here's what I think you got wrong in your sample:

    The region depends on the layout, and is only considered when the immediately enclosing panel to the region-constrained panels is BorderLayout.

    That said, just add Layout="BorderLayout" to line 4 of your 2nd code block and you should be fine.

    You can see more on this layout with this example: Layouts > Border > Simple in Markup.

    Hope this helps! Let us know if my guess didn't really help.

    Tip: you can fine-tune any layout if you define it within a <LayoutConfig /> block in your panel, just like it is done in this example: Layout > HBox > Split (this uses HBox layout but the idea is the same!).
    Fabrício Murta
    Developer & Support Expert
  3. #3

    Run but with a problem

    Hello Fabricio:

    Thanks for your answer.
    It run t Ok but for some reason the second panel initially appear over the first panel. Like show you in the picture.
    Click image for larger version. 

Name:	PanelRegion.jpg 
Views:	3 
Size:	86.8 KB 
ID:	25197

    But if a click the collapse button [>>] the panel move to [East] region in the position i need. I don´t know why?

    Some idea?

    Thanks
  4. #4
    Hello, @devSF!

    Try removing extra settings, like the CtCls, and cleaning up the panels from all properties that do not seem required for them to be laid on the page. The Width and MinWidth properties in the east panel is a good candidate either.

    If you have hard times trying to solve this, please try to reproduce the issue in a clean example. Just in case, linking our forum guidelines below:
    - Tips for creating simplified code samples
    - More Information Required
    - Forum Guidelines

    Usually as you try to draw a simplified example it ends up elucidating the issue, so that's a really useful thing to try. It also helps to gain insight of other possibilities to solve the issue.

    Hope this helps!
    Fabrício Murta
    Developer & Support Expert

Similar Threads

  1. Replies: 4
    Last Post: Mar 08, 2016, 2:52 PM
  2. Replies: 2
    Last Post: Sep 17, 2013, 6:53 AM
  3. Replies: 2
    Last Post: Jun 14, 2012, 12:30 PM
  4. Replies: 2
    Last Post: Mar 29, 2012, 10:00 PM
  5. Replies: 5
    Last Post: Mar 22, 2012, 3:12 PM

Tags for this Thread

Posting Permissions