[CLOSED] [#157] ButtonGroup causing panel refresh issue

  1. #1

    [CLOSED] [#157] ButtonGroup causing panel refresh issue

    I was amazed at how long it has been since I updated from SVN. I upgraded to Revision 4856 last Wednesday 2/28/2013 and had several issues. I have been working through some of them but have one left. Here is one dealing with ButtonGroups and embedded panel and layouts.

    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <!DOCTYPE html>
    <html>
    <head id="Head1" runat="server">
        <title>Viewport with BorderLayout - Ext.NET Examples</title>
    </head>
    <body>
        <ext:ResourceManager ID="ResourceManager1" runat="server" />
        <ext:Viewport runat="server" Layout="BorderLayout">
            <Items>
                <ext:Panel runat="server" Title="West" Region="West" Layout="AccordionLayout" Width="225"
                    MinWidth="225" MaxWidth="400" Split="true" Collapsible="true">
                    <Items>
                        <ext:Panel runat="server" Title="Navigation" Border="false" BodyPadding="6" Icon="FolderGo" />
                        <ext:Panel runat="server" Title="Settings" Border="false" BodyPadding="6" Icon="FolderWrench" />
                    </Items>
                </ext:Panel>
                <ext:Panel ID="ExternalPanelCenter" runat="server" Title="External Panel - Center"
                    Icon="Book" Region="Center" Layout="BorderLayout" Border="false">
                    <Items>
                        <ext:Panel ID="InternalPanelCenter" runat="server" Region="Center" Title="Internal Panel - Center">
                            <Items>
                            </Items>
                            <TopBar>
                                <ext:Toolbar runat="server">
                                    <Items>
                                        <ext:ToolbarFill runat="server" />
                                        <ext:ButtonGroup runat="server" StyleSpec="background-color: #CFFFCF;">
                                            <Items>
                                                <ext:Button runat="server" Text="A" Icon="ArrowLeft" />
                                                <ext:Button runat="server" Text="B" Icon="ArrowRight" />
                                            </Items>
                                        </ext:ButtonGroup>
                                        <ext:ToolbarFill ID="ToolbarFill1" runat="server" />
                                    </Items>
                                </ext:Toolbar>
                            </TopBar>
                            <BottomBar>
                                <ext:PagingToolbar runat="server">
                                    <Items>
                                        <ext:Button runat="server" Text="Show">
                                            <Listeners>
                                                <Click Handler="App.InternalPanelSouth.show();" />
                                            </Listeners>
                                        </ext:Button>
                                        <ext:Button runat="server" Text="Hide">
                                            <Listeners>
                                                <Click Handler="App.InternalPanelSouth.hide();" />
                                            </Listeners>
                                        </ext:Button>
                                    </Items>
                                </ext:PagingToolbar>
                            </BottomBar>
                        </ext:Panel>
                        <ext:Panel ID="InternalPanelSouth" runat="server" ClientIDMode="Static" Region="South"
                            Title="Internal Panel - South" Icon="ChartBar" Height="240" Hidden="true" Split="true"
                            Collapsible="true" Collapsed="false" Layout="BorderLayout" HideCollapseTool="true"
                            TitleCollapse="true" Header="false" Border="false">
                            <Items>
                                <ext:FormPanel runat="server" Region="Center" Layout="AnchorLayout" DefaultAnchor="100%"
                                    BodyPadding="5" Icon="BookMagnify" Title="Form Details" AutoScroll="true">
                                </ext:FormPanel>
                                <ext:TabPanel ID="TabPanel1" runat="server" Border="false" Region="East" Split="true" Width="100"
                                    HideCollapseTool="true" TitleCollapse="true" Collapsible="true" Title="Summary & Status Items"
                                    Header="false">
                                    <Items>
                                    </Items>
                                </ext:TabPanel>
                            </Items>
                        </ext:Panel>
                    </Items>
                </ext:Panel>
            </Items>
        </ext:Viewport>
    </body>
    </html>
    If I build against Revision 4671 (12/13/2012) it looks good, but when I build it against 4672 (12/13/2012) the InternalPanelCenter does not refresh completely. Revision 4672 included ExtJS 4.2 beta. Any thoughts?

    Press the View button on the Bottom Bar.

    Click image for larger version. 

Name:	ButtonGroup.jpg 
Views:	51 
Size:	55.7 KB 
ID:	5757

    If you remove the ButtonGroup and just put the buttons on the TopBar everything works fine.
    Last edited by Baidaly; Mar 15, 2013 at 2:50 AM. Reason: [CLOSED] [#157]
  2. #2
    I need the layout mentioned above, but if make the FormPanel the south panel and remove the tabpanel and panel that surrounds the formpanel everything works.

    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <!DOCTYPE html>
    <html>
    <head id="Head1" runat="server">
        <title>Viewport with BorderLayout - Ext.NET Examples</title>
    </head>
    <body>
        <ext:ResourceManager ID="ResourceManager1" runat="server" />
        <ext:Viewport runat="server" Layout="BorderLayout">
            <Items>
                <ext:Panel runat="server" Title="West" Region="West" Layout="AccordionLayout" Width="225"
                    MinWidth="225" MaxWidth="400" Split="true" Collapsible="true">
                    <Items>
                        <ext:Panel runat="server" Title="Navigation" Border="false" BodyPadding="6" Icon="FolderGo" />
                        <ext:Panel runat="server" Title="Settings" Border="false" BodyPadding="6" Icon="FolderWrench" />
                    </Items>
                </ext:Panel>
                <ext:Panel ID="ExternalPanelCenter" runat="server" Title="External Panel - Center"
                    Icon="Book" Region="Center" Layout="BorderLayout" Border="false">
                    <Items>
                        <ext:Panel ID="InternalPanelCenter" runat="server" Region="Center" Title="Internal Panel - Center">
                            <Items>
                            </Items>
                            <TopBar>
                                <ext:Toolbar runat="server">
                                    <Items>
                                        <ext:ToolbarFill runat="server" />
                                        <ext:ButtonGroup runat="server" StyleSpec="background-color: #CFFFCF;">
                                            <Items>
                                                <ext:Button runat="server" Text="A" Icon="ArrowLeft" />
                                                <ext:Button runat="server" Text="B" Icon="ArrowRight" />
                                            </Items>
                                        </ext:ButtonGroup>
                                        <ext:ToolbarFill ID="ToolbarFill1" runat="server" />
                                    </Items>
                                </ext:Toolbar>
                            </TopBar>
                            <BottomBar>
                                <ext:PagingToolbar runat="server">
                                    <Items>
                                        <ext:Button runat="server" Text="Show">
                                            <Listeners>
                                                <Click Handler="App.Details.show();" />
                                            </Listeners>
                                        </ext:Button>
                                        <ext:Button runat="server" Text="Hide">
                                            <Listeners>
                                                <Click Handler="App.Details.hide();" />
                                            </Listeners>
                                        </ext:Button>
                                    </Items>
                                </ext:PagingToolbar>
                            </BottomBar>
                        </ext:Panel>
                        <ext:FormPanel ID="Details" runat="server" Region="South" Layout="AnchorLayout" Height="240"
                            DefaultAnchor="100%" BodyPadding="5" Icon="BookMagnify" Title="Form Details"
                            AutoScroll="true" hidden="true">
                        </ext:FormPanel>
                    </Items>
                </ext:Panel>
            </Items>
        </ext:Viewport>
    </body>
    </html>
    So maybe it is not just the ButtonGroup. If could also keep the code the same as the first thread and just remove the ButtonGroup and everything works. What is the relationship that is causing the issue?
  3. #3
    Hello!

    We are investigating. Please, temporarily use the following approach:

    <ext:Button runat="server" Text="Show">
    	<Listeners>
    		<Click Handler="App.InternalPanelSouth.show(); #{ExternalPanelCenter}.doLayout();" />
    	</Listeners>
    </ext:Button>
    <ext:Button runat="server" Text="Hide">
    	<Listeners>
    		<Click Handler="App.InternalPanelSouth.hide(); #{ExternalPanelCenter}.doLayout();" />
    	</Listeners>
    </ext:Button>
  4. #4
  5. #5
    Sencha has replied that the bug was fixed for the next release.
  6. #6
    Hello!

    It should be fixed in SVN and included to the next release (v2.2).
    Last edited by Baidaly; Mar 15, 2013 at 2:50 AM.

Similar Threads

  1. [CLOSED] Refresh issue with AccordionLayout panel.
    By bossun in forum 2.x Legacy Premium Help
    Replies: 2
    Last Post: Sep 17, 2012, 9:31 PM
  2. Replies: 4
    Last Post: Dec 27, 2011, 5:11 PM
  3. Postback Refresh issue
    By accessyourbiz in forum 1.x Help
    Replies: 2
    Last Post: Jul 23, 2010, 4:51 PM
  4. Replies: 1
    Last Post: Jan 12, 2010, 9:30 PM
  5. [CLOSED] [1.0] Panel tools causing JS error
    By state in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Oct 19, 2009, 2:42 PM

Posting Permissions