[CLOSED] Scrolling dynamic content in an ext:Window

  1. #1

    [CLOSED] Scrolling dynamic content in an ext:Window

    I have a dynamically populated checkbox group. Once populated, the height of the checkbox group is larger than the containing panel. The panel does not pop a scrollbar, so the remaining content is hidden. Please let me know what I've done wrong to preclude scrolling.

    Notes: Windows 7 Enterprise SP1, Visual Studio 2010 Ultimate, IE9, prepending all content with X-UA-Compatible = IE8 in my global.asax

    Here's a simple example which illustrates my issue:

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Test.aspx.cs" Inherits="LW4.WWW.Admin.Web.Test" %>
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                cbgDocumentDepartments.Items.Add(new Checkbox() { ID = "1", BoxLabel = "Test Department One" });
                cbgDocumentDepartments.Items.Add(new Checkbox() { ID = "2", BoxLabel = "Test Department Two" });
                cbgDocumentDepartments.Items.Add(new Checkbox() { ID = "3", BoxLabel = "Test Department Three" });
                cbgDocumentDepartments.Items.Add(new Checkbox() { ID = "4", BoxLabel = "Test Department Four" });
                cbgDocumentDepartments.Items.Add(new Checkbox() { ID = "5", BoxLabel = "Test Department Five" });
                cbgDocumentDepartments.Items.Add(new Checkbox() { ID = "6", BoxLabel = "Test Department Six" });
                cbgDocumentDepartments.Items.Add(new Checkbox() { ID = "7", BoxLabel = "Test Department Seven" });
                cbgDocumentDepartments.Items.Add(new Checkbox() { ID = "8", BoxLabel = "Test Department Eight" });
                cbgDocumentDepartments.Items.Add(new Checkbox() { ID = "9", BoxLabel = "Test Department Nine" });
                cbgDocumentDepartments.Items.Add(new Checkbox() { ID = "10", BoxLabel = "Test Department Ten" });
                cbgDocumentDepartments.Items.Add(new Checkbox() { ID = "11", BoxLabel = "Test Department Eleven" });
                cbgDocumentDepartments.Items.Add(new Checkbox() { ID = "12", BoxLabel = "Test Department Twelve" });
                cbgDocumentDepartments.Items.Add(new Checkbox() { ID = "13", BoxLabel = "Test Department Thirteen" });
                cbgDocumentDepartments.Items.Add(new Checkbox() { ID = "14", BoxLabel = "Test Department Fourteen" });
                cbgDocumentDepartments.Items.Add(new Checkbox() { ID = "15", BoxLabel = "Test Department Fifteen" });
                cbgDocumentDepartments.Items.Add(new Checkbox() { ID = "16", BoxLabel = "Test Department Sixteen" });
                cbgDocumentDepartments.Items.Add(new Checkbox() { ID = "17", BoxLabel = "Test Department Seventeen" });
                cbgDocumentDepartments.Items.Add(new Checkbox() { ID = "18", BoxLabel = "Test Department Eighteen" });
                cbgDocumentDepartments.Items.Add(new Checkbox() { ID = "19", BoxLabel = "Test Department Nineteen" });
                cbgDocumentDepartments.Items.Add(new Checkbox() { ID = "20", BoxLabel = "Test Department Twenty" });            
            }
        }
    </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></title>
        <ext:ResourcePlaceHolder runat="server"></ext:ResourcePlaceHolder>    
    </head>
    <body>
        <form id="form1" runat="server">
            <ext:ResourceManager runat="server" ID="ResourceManager1" />            
            <ext:Viewport runat="server" ID="ViewportMain" Layout="FitLayout">
                <Items>                
                    <ext:Panel runat="server" ID="PanelMain" Layout="FormLayout">
                        <Items>
                            <ext:Button runat="server" ID="btnTest" Text="Show">
                                <Listeners>
                                    <Click Handler="#{dialogEditor}.show();" />
                                </Listeners>
                            </ext:Button>
                        </Items>
                    </ext:Panel>                
                </Items>            
            </ext:Viewport>        
    
            <ext:Window runat="server" ID="dialogEditor" InitCenter="true" Height="808" Width="875" Modal="true" Title="Document Editor" Resizable="false" Hidden="true" BodyStyle="background-color: white; padding: 24px 0px 0px 30px;" CloseAction="Hide" Layout="FormLayout">
                <Items>
                    <ext:TabPanel runat="server" ID="panelDocumentTagging" Height="400" Width="800">
                        <Items>                        
                            <ext:Panel runat="server" ID="panelDepartments" Title="Departments" Padding="12">
                                <Items>
                                    <ext:CheckboxGroup runat="server" ID="cbgDocumentDepartments" ColumnsNumber="1" Vertical="true" FieldLabel="Associated Departments">
                                    </ext:CheckboxGroup>    
                                </Items>                                
                            </ext:Panel>
                        </Items>
                    </ext:TabPanel>
                </Items>
            </ext:Window>
        </form>
    </body>
    </html>

    Result:

    Click image for larger version. 

Name:	extCheckboxGroup.png 
Views:	55 
Size:	25.3 KB 
ID:	3202
    Last edited by geoffrey.mcgill; Sep 16, 2011 at 2:47 AM. Reason: [CLOSED]
  2. #2
    Naturally I found a solution 5 minutes after posting. I set AutoScroll="true" on panelDepartments and the panel automatically provided scrolling for the content. Please close the thread >_>

Similar Threads

  1. Replies: 0
    Last Post: Jan 06, 2012, 8:52 AM
  2. [CLOSED] Tab Content Scrolling
    By rcaunt in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Sep 02, 2009, 1:21 PM
  3. [CLOSED] dynamic tabs do not display content
    By alexp in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: May 07, 2009, 1:05 AM
  4. AjaxEvent and Dynamic content
    By Dgsoft.ru in forum 1.x Help
    Replies: 3
    Last Post: Apr 29, 2009, 1:57 PM
  5. ViewPort - new dynamic tab content
    By tdmf40 in forum 1.x Help
    Replies: 1
    Last Post: Apr 28, 2008, 4:32 PM

Posting Permissions