[CLOSED] Viewport AutoScroll problem

**kenanhancer** · Jan 10, 2011, 8:26 PM

Hi, In Viewport I have 3 Panel control and when I resize panel with mouse viewport doesn't have scroll. So, Some panel headers don't appear.

Attachment 2146

**geoffrey.mcgill** · Jan 10, 2011, 8:34 PM

Hi,

I think you'll need to post a code sample demonstrating how we can reproduce the layout as per your screen capture.

**kenanhancer** · Jan 10, 2011, 8:36 PM

I didn't add because all day I added same codes. So, I thought that you are bored :)

Code is below.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm6.aspx.cs" Inherits="WebApplication9.WebForm6" %>

<%@ Register Assembly="FredCK.FCKeditorV2" Namespace="FredCK.FCKeditorV2" TagPrefix="FCKeditorV2" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<!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>
    <style type="text/css">
        .invite
        {
            background-color: #99bbe8 !important;
        }
        .x-drop-marker
        {
            background-color: silver;
        }
        .no-border .x-panel-body
        {
            border: 0;
        }
    </style>
    <ext:ResourcePlaceHolder ID="ResourcePlaceHolder1" runat="server">
        <script type="text/javascript">
            var notifyDrop = function (source, e, data) {
                var targetCt = Ext.getCmp(this.el.dom.id);
                var targetPanel = targetCt.items.get(0);
                var sourceCt = data.panel.ownerCt;

                sourceCt.add(targetPanel);
                targetCt.add(data.panel);
                targetCt.doLayout.defer(10, targetCt);
                sourceCt.doLayout.defer(10, sourceCt);
            };

            var startDrag = function () {
                Ext.select(".dropable").addClass("x-drop-marker");
                Ext.select(".draggable").hide();
            };

            var endDrag = function () {
                Ext.select(".dropable").removeClass("x-drop-marker");
                Ext.select(".draggable").show();
            };

            var setBorder = function (panel, useBorder, useHeader) {
                var method = useBorder ? "removeClass" : "addClass";
                panel.el[method](panel.baseCls + '-noborder');
                panel.body[method](panel.bodyCls + '-noborder');
                if (panel.header) {
                    panel.header[method](panel.headerCls + '-noborder');
                    panel.header[useHeader ? "removeClass" : "addClass"]("x-hide-display");
                    panel.body[useHeader ? "removeClass" : "addClass"](panel.bodyCls + '-noheader'); //added
                }
                if (panel.footer) {
                    panel.footer[method](panel.footerCls + '-noborder');
                }
                if (panel.tbar) {
                    panel.tbar[method](panel.tbarCls + '-noborder');
                }
                if (panel.bbar) {
                    panel.bbar[method](panel.bbarCls + '-noborder');
                }

                // added
                panel.syncSize();

                if (panel.ownerCt) {
                    panel.ownerCt.doLayout();
                }
            }

            function Resizable_Resize(panel, width, height) {
                panel.syncSize();

                if (panel.ownerCt) {
                    panel.ownerCt.setSize(width, height);
                    panel.setSize(width, height);
                    panel.ownerCt.doLayout();
                }
            }

            function Button_DesignMode_Click() {
                Ext.net.DirectMethods.Button_DesignMode_Click();
            }

            function Button_ViewMode_Click() {
                Ext.net.DirectMethods.Button_ViewMode_Click();
            }

            function ShowWindow(panel) {
                var Hidden_ContainerName = Ext.getCmp('<%= Hidden_ContainerName.ClientID %>');
                var Hidden_PanelName = Ext.getCmp('<%= Hidden_PanelName.ClientID %>');

                Hidden_ContainerName.setValue(panel.ownerCt.id);
                Hidden_PanelName.setValue(panel.id);

                var Window1 = Ext.getCmp('<%= Window1.ClientID %>');
                var cnt = panel.ownerCt;
                var NumberField_Width = Ext.getCmp('<%= NumberField_Width.ClientID %>');
                var NumberField_Height = Ext.getCmp('<%= NumberField_Height.ClientID %>');
                var TextField_Url = Ext.getCmp('<%= TextField_Url.ClientID %>');

                NumberField_Width.setValue(cnt.getWidth());
                NumberField_Height.setValue(cnt.getHeight());
                var autoLoad = panel.getAutoLoad();
                if (autoLoad != null)
                    TextField_Url.setValue(autoLoad.url);
                Window1.show();
            }

            function Button_ApplyChanges_Click() {
                var Hidden_PanelName = Ext.getCmp('<%= Hidden_PanelName.ClientID %>');
                var pnl = Ext.getCmp(Hidden_PanelName.getValue());
                var FCKeditor1 = FCKeditorAPI.GetInstance('FCKeditor1');
                var html = FCKeditor1.GetHTML();

                Ext.net.DirectMethods.Button_ApplyChanges_Click(Ext.util.Format.htmlEncode(html));
            }

            function Button_AddNewColumn_Click() {
                Ext.net.DirectMethods.Button_AddNewColumn_Click();
            }
        </script>
    </ext:ResourcePlaceHolder>
</head>
<body>
    <form id="form1" runat="server">
    <ext:ResourceManager ID="ResourceManager1" runat="server">
    </ext:ResourceManager>
    <ext:Hidden ID="Hidden_ContainerName" runat="server">
    </ext:Hidden>
    <ext:Hidden ID="Hidden_PanelName" runat="server">
    </ext:Hidden>
    <ext:Window ID="Window1" runat="server" Collapsible="false" Height="530" Icon="Application"
        Title="Title" Width="950" Padding="10" Hidden="true" Frame="true" Modal="true">
        <Items>
            <ext:NumberField ID="NumberField_Width" runat="server" FieldLabel="Width" MinValue="0"
                MaxValue="2000">
            </ext:NumberField>
            <ext:NumberField ID="NumberField_Height" runat="server" FieldLabel="Height" MinValue="0"
                MaxValue="2000">
            </ext:NumberField>
            <ext:TextField ID="TextField_Url" runat="server" FieldLabel="Url">
            </ext:TextField>
            <ext:Panel ID="Panel2" runat="server" Height="400" Layout="Fit" FieldLabel="HTML">
                <Content>
                    <FCKeditorV2:FCKeditor ID="FCKeditor1" runat="server" Height="398" Value="" HtmlEncodeOutput="true"
                        EnableXHTML="true" BasePath="~/fckeditor/">
                    </FCKeditorV2:FCKeditor>
                </Content>
            </ext:Panel>
        </Items>
        <Buttons>
            <ext:Button ID="Button_ApplyChanges" runat="server" Text="Apply Changes">
                <Listeners>
                    <Click Handler="Button_ApplyChanges_Click();" />
                </Listeners>
            </ext:Button>
        </Buttons>
    </ext:Window>

    <ext:Viewport ID="Viewport1" runat="server" Layout="border" AutoScroll="true">
        <Items>
            <ext:Panel ID="Panel_Main" runat="server" Layout="Row" Split="true" Region="Center" Title="Center"
                Header="false" Border="false">
                <TopBar>
                    <ext:Toolbar ID="Toolbar1" runat="server">
                        <Items>
                            <ext:Button ID="Button_DesignMode" runat="server" Text="Design Mode">
                                <Listeners>
                                    <Click Handler="Button_DesignMode_Click();" />
                                </Listeners>
                            </ext:Button>
                            <ext:Button ID="Button_ViewMode" runat="server" Text="View Mode">
                                <Listeners>
                                    <Click Handler="Button_ViewMode_Click();" />
                                </Listeners>
                            </ext:Button>
                            <ext:ToolbarFill ID="ToolbarFill1" runat="server" />
                            <ext:Button ID="Button_AddNewColumn" runat="server" Text="Add New Column">
                                <Listeners>
                                    <Click Handler="Button_AddNewColumn_Click();" />
                                </Listeners>
                            </ext:Button>
                        </Items>
                    </ext:Toolbar>
                </TopBar>
                <Items>
                    <ext:Container ID="Container_Row1" runat="server" Layout="Column">
                        <LayoutConfig>
                            <ext:ColumnLayoutConfig FitHeight="false" />
                        </LayoutConfig>
                        <Items>
                            <ext:Container ID="Container1" runat="server" Cls="dropable" Layout="Fit" Width="200"
                                Height="200">
                                <Items>
                                    <ext:Panel ID="pnl1" runat="server" Cls="draggable" Frame="false" StyleSpec="padding: 5px"
                                        Title="Panel 1">
                                        <Tools>
                                            <ext:Tool Type="Gear" Handler="ShowWindow(#{pnl1});" />
                                        </Tools>
                                    </ext:Panel>
                                </Items>
                            </ext:Container>
                            <ext:Container ID="Container2" runat="server" Cls="dropable" Layout="Fit" Width="200"
                                Height="200">
                                <Items>
                                    <ext:Panel ID="pnl2" runat="server" Cls="draggable" Frame="false" StyleSpec="padding: 5px"
                                        Title="Panel 2">
                                        <Tools>
                                            <ext:Tool Type="Gear" Handler="ShowWindow(#{pnl2});" />
                                        </Tools>
                                    </ext:Panel>
                                </Items>
                            </ext:Container>
                        </Items>
                    </ext:Container>
                    <ext:Container ID="Container_Row2" runat="server" Layout="Column">
                        <LayoutConfig>
                            <ext:ColumnLayoutConfig FitHeight="false" />
                        </LayoutConfig>
                        <Items>
                            <ext:Container ID="Container3" runat="server" Cls="dropable" Layout="Fit" Width="400"
                                Height="200">
                                <Items>
                                    <ext:Panel ID="pnl3" runat="server" Cls="draggable" Frame="false" StyleSpec="padding: 5px"
                                        Title="Panel 3">
                                        <AutoLoad Url="http://www.google.com">
                                        </AutoLoad>
                                        <Tools>
                                            <ext:Tool Type="Gear" Handler="ShowWindow(#{pnl3});" />
                                        </Tools>
                                    </ext:Panel>
                                </Items>
                            </ext:Container>
                        </Items>
                    </ext:Container>
                </Items>
            </ext:Panel>
        </Items>
    </ext:Viewport>

    <ext:DropTarget ID="DropTarget1" runat="server" Target="${.dropable}" Group="panelDD"
        OverClass="invite">
        <NotifyDrop Fn="notifyDrop" />
        <NotifyOut Handler="this.el.removeClass('invite');" />
        <NotifyOver Handler="Ext.select('.dropable').removeClass('invite'); this.el.addClass('invite');" />
    </ext:DropTarget>
    <ext:Resizable ID="Resizable1" runat="server" Element="={#{pnl1}.el}" Transparent="true">
        <Listeners>
            <Resize Handler="#{pnl1}.el.setStyle({width:'', height:''});#{pnl1}.setSize(width, height); #{pnl1}.ownerCt.setSize(width, height);" />
        </Listeners>
    </ext:Resizable>
    <ext:Resizable ID="Resizable2" runat="server" Element="={#{pnl2}.el}" Transparent="true">
        <Listeners>
            <Resize Handler="#{pnl2}.el.setStyle({width:'', height:''});#{pnl2}.setSize(width, height); #{pnl2}.ownerCt.setSize(width, height);" />
        </Listeners>
    </ext:Resizable>
    <ext:Resizable ID="Resizable3" runat="server" Element="={#{pnl3}.el}" Transparent="true">
        <Listeners>
            <Resize Handler="#{pnl3}.el.setStyle({width:'', height:''});#{pnl3}.setSize(width, height); #{pnl3}.ownerCt.setSize(width, height);" />
        </Listeners>
    </ext:Resizable>
    </form>
</body>
</html>

**Vladimir** · Jan 10, 2011, 8:42 PM

Hi,

ViewPort (and border layout also) doesn't support scrolling

ExtJS docs

http://dev.sencha.com/deploy/dev/doc...s=Ext.Viewport

The Viewport does not provide scrolling, so child Panels within the Viewport should provide for scrolling if needed using the autoScroll config.

Try to set auto scroll for Panel_Main

**kenanhancer** · Jan 10, 2011, 8:46 PM

I also set AutoScroll property for Panel_Main control. Again, problem continues

**kenanhancer** · Jan 10, 2011, 8:50 PM

Actually, this time panel headers appear but scroll doesn't appear like below.

Attachment 2147

**Vladimir** · Jan 10, 2011, 9:12 PM

Hi,

The problem that RowLayout doesn't support scrolling
I suggest to remove Layout="Row" to support vertical scrollinng (and don't forget AutoScroll="true" for Panel_Main )

**kenanhancer** · Jan 10, 2011, 9:16 PM

Now it is working. But, is it problem for my scenario. As you know that I try to make a content management system. Can I add new rows?

**Vladimir** · Jan 10, 2011, 9:33 PM

Hi,

Yes, i gues it should not be a problem, each new container will be on new row

**kenanhancer** · Jan 10, 2011, 9:40 PM

But, your previous code is like below. One row has two columns. Now, what is changed? and how will be last situation?

 <ext:Viewport ID="Viewport1" runat="server" Layout="border" AutoDoLayout="true" MonitorResize="true">
        <Items>
            <ext:Panel ID="Panel_Main" runat="server" Region="Center" Title="Center"
                Header="false" Border="false" AutoScroll="true">
                <TopBar>
                    <ext:Toolbar ID="Toolbar1" runat="server">
                        <Items>
                            <ext:Button ID="Button_DesignMode" runat="server" Text="Design Mode">
                                <Listeners>
                                    <Click Handler="Button_DesignMode_Click();" />
                                </Listeners>
                            </ext:Button>
                            <ext:Button ID="Button_ViewMode" runat="server" Text="View Mode">
                                <Listeners>
                                    <Click Handler="Button_ViewMode_Click();" />
                                </Listeners>
                            </ext:Button>
                            <ext:ToolbarFill ID="ToolbarFill1" runat="server" />
                            <ext:Button ID="Button_AddNewColumn" runat="server" Text="Add New Column">
                                <Listeners>
                                    <Click Handler="Button_AddNewColumn_Click();" />
                                </Listeners>
                            </ext:Button>
                        </Items>
                    </ext:Toolbar>
                </TopBar>
                <Items>
                    <ext:Container ID="Container_Row1" runat="server" Layout="Column">
                        <LayoutConfig>
                            <ext:ColumnLayoutConfig FitHeight="false" />
                        </LayoutConfig>
                        <Items>
                            <ext:Container ID="Container1" runat="server" Cls="dropable" Layout="Fit" Width="200"
                                Height="200">
                                <Items>
                                    <ext:Panel ID="pnl1" runat="server" Cls="draggable" Frame="false" StyleSpec="padding: 5px"
                                        Title="Panel 1">
                                        <Tools>
                                            <ext:Tool Type="Gear" Handler="ShowWindow(#{pnl1});" />
                                        </Tools>
                                    </ext:Panel>
                                </Items>
                            </ext:Container>
                            <ext:Container ID="Container2" runat="server" Cls="dropable" Layout="Fit" Width="200"
                                Height="200">
                                <Items>
                                    <ext:Panel ID="pnl2" runat="server" Cls="draggable" Frame="false" StyleSpec="padding: 5px"
                                        Title="Panel 2">
                                        <Tools>
                                            <ext:Tool Type="Gear" Handler="ShowWindow(#{pnl2});" />
                                        </Tools>
                                    </ext:Panel>
                                </Items>
                            </ext:Container>
                        </Items>
                    </ext:Container>
                    <ext:Container ID="Container_Row2" runat="server" Layout="Column">
                        <LayoutConfig>
                            <ext:ColumnLayoutConfig FitHeight="false" />
                        </LayoutConfig>
                        <Items>
                            <ext:Container ID="Container3" runat="server" Cls="dropable" Layout="Fit" Width="400"
                                Height="200">
                                <Items>
                                    <ext:Panel ID="pnl3" runat="server" Cls="draggable" Frame="false" StyleSpec="padding: 5px"
                                        Title="Panel 3">
                                        <AutoLoad Url="http://www.google.com">
                                        </AutoLoad>
                                        <Tools>
                                            <ext:Tool Type="Gear" Handler="ShowWindow(#{pnl3});" />
                                        </Tools>
                                    </ext:Panel>
                                </Items>
                            </ext:Container>
                        </Items>
                    </ext:Container>
                </Items>
            </ext:Panel>
        </Items>
    </ext:Viewport>

Thread: [CLOSED] Viewport AutoScroll problem

Thread Tools

Search Thread

Display

[CLOSED] Viewport AutoScroll problem

Similar Threads

[CLOSED] Viewport AutoScroll problem

[CLOSED] Serious problem with viewport

[CLOSED] Autoscroll problem in .82

[CLOSED] viewport problem

Autoscroll problem

Posting Permissions

Sitemap

Downloads

Resources

Thread: [CLOSED] Viewport AutoScroll problem

[CLOSED] Viewport AutoScroll problem

Similar Threads

Posting Permissions

Sitemap

Downloads

Resources

Stay connected with us