[CLOSED] Clicking on tree node moving the content in the screen towards left

  1. #1

    [CLOSED] Clicking on tree node moving the content in the screen towards left

    Hi all,
    Please run the below code in internet explorer 8, And also minimize the window/monitor width less than the treepanel width and click on any treepanel childnodes we displaying buttons , then we observed that the content in the screen is moving towards left, so we are unable to see the buttons.



    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="TreeSample.aspx.cs" Inherits="EXT2._2.TreeSample" %>
    
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <!DOCTYPE html>
    
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script type="text/javascript">
            function getTreeNodeXY(TreeNode, Yvalue, toolBar, Xvalue) {
    
    
                var x = toolBar.getY();
                Xvalue.setValue(toolBar.getY());
                var selectedNode = TreeNode.selModel.getSelection()[0],
                view = TreeNode.getView();
                Yvalue.setValue(Ext.fly(view.getNode(selectedNode)).getY());
            }
        </script>
        <script runat="server">
            protected void TreeNode_Select(object sender, DirectEventArgs e)
            {
                Int16 xValue = Convert.ToInt16(hdnXvalue.Text);
                Int16 yValue = Convert.ToInt16(hdnYvalue.Text);
                if (TreePanel1.SelectedNodes[0].NodeID == "1")
                {
                    tbs.Height = (yValue - xValue) - 7;
                    btn1.Show();
                    btn2.Hide();
                    btn3.Hide();
                    btn4.Hide();
                    btn5.Hide();
                }
                else if (TreePanel1.SelectedNodes[0].NodeID == "2")
                {
                    tbs.Height = (yValue - xValue) - 20;
                    btn1.Show();
                    btn2.Show();
                    btn3.Hide();
                    btn4.Hide();
                    btn5.Hide();
                }
                else if (TreePanel1.SelectedNodes[0].NodeID == "3")
                {
                    tbs.Height = (yValue - xValue) - 33;
                    btn1.Show();
                    btn2.Show();
                    btn3.Show();
                    btn4.Hide();
                    btn5.Hide();
                }
                else if (TreePanel1.SelectedNodes[0].NodeID == "4")
                {
                    tbs.Height = (yValue - xValue) - 46;
                    btn1.Show();
                    btn2.Show();
                    btn3.Show();
                    btn4.Show();
                    btn5.Hide();
                }
                else if (TreePanel1.SelectedNodes[0].NodeID == "5")
                {
                    tbs.Height = (yValue - xValue) - 59;
                    btn1.Show();
                    btn2.Show();
                    btn3.Show();
                    btn4.Show();
                    btn5.Show();
                }
                else if (TreePanel1.SelectedNodes[0].NodeID == "6")
                {
                    tbs.Height = (yValue - xValue) - 7;
                    btn1.Hide();
                    btn2.Hide();
                    btn3.Show();
                    btn4.Hide();
                    btn5.Hide();
                }
                else if (TreePanel1.SelectedNodes[0].NodeID == "7")
                {
                    tbs.Height = (yValue - xValue) - 20;
                    btn1.Hide();
                    btn2.Show();
                    btn3.Hide();
                    btn4.Show();
                    btn5.Hide();
                }
                else if (TreePanel1.SelectedNodes[0].NodeID == "8")
                {
                    tbs.Height = (yValue - xValue) - 33;
                    btn1.Show();
                    btn2.Hide();
                    btn3.Show();
                    btn4.Show();
                    btn5.Hide();
                }
                else if (TreePanel1.SelectedNodes[0].NodeID == "9")
                {
                    tbs.Height = (yValue - xValue) - 20;
                    btn1.Show();
                    btn2.Hide();
                    btn3.Hide();
                    btn4.Hide();
                    btn5.Show();
                }
    
    
            }
        
        </script>
        <style type="text/css">
            .tbstyle {
                background-color: white;
                background-image: none;
                padding: 0px;
            }
    
    
            .tbs1 {
            }
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
            <ext:ResourceManager ID="rmgr1" runat="server"></ext:ResourceManager>
            <ext:Viewport ID="RDRAViewPort" runat="server" Layout="BorderLayout" IDMode="Explicit"
                IsDynamic="False" Namespace="App" RenderXType="True">
                <Items>
                    <ext:FormPanel ID="RDRAPanels" runat="server" Region="Center" Enabled="false" Header="false"
                        AutoScroll="true" Layout="FormLayout" ButtonAlign="Left" Title="" meta:resourcekey="RDRAPanelsResource1"
                        Padding="0">
                        <Items>
    
    
                            <ext:Panel ID="fieldRisk_container" runat="server" Title="<h3>Risk Assessment</h3>"
                                Collapsible="true" Layout="AutoLayout" meta:resourcekey="fieldRiskResource1"
                                TitleCollapse="true">
                                <Items>
                                    <ext:Panel DisabledCls="ControlDisabled" ID="fieldRisk" Layout="FormLayout" Border="false"
                                        runat="server" StyleSpec="padding-left:8px;">
                                        <Items>
                                            <ext:Container ID="LevelContainer1" runat="server" Layout="HBoxLayout">
                                                <Items>
                                                    <ext:Toolbar ID="tb1" runat="server" Width="30" Cls="tbstyle" AutoScroll="true"
                                                        Vertical="true" Border="false">
                                                        <Items>
                                                            <ext:ToolbarSpacer ID="tbs" Width="30" runat="server" StyleSpec="padding:0px;margin:0px;background-color:white;"></ext:ToolbarSpacer>
                                                            <ext:Button ID="btn1" runat="server" Hidden="true" Icon="Accept" ToolTip="Collapse All" Height="24">
                                                                <Listeners>
                                                                    <Click Handler="#{TreePanel1}.collapseAll();"></Click>
                                                                </Listeners>
                                                            </ext:Button>
                                                            <ext:Button ID="btn2" runat="server" Hidden="true" Icon="Add" Height="24" ToolTip="Expand All">
                                                                <Listeners>
                                                                    <Click Handler="#{TreePanel1}.expandAll();"></Click>
                                                                </Listeners>
                                                            </ext:Button>
                                                            <ext:Button ID="btn3" runat="server" Hidden="true" Icon="Application" Height="24" ToolTip="Application">
                                                            </ext:Button>
                                                            <ext:Button ID="btn4" runat="server" Hidden="true" Icon="Bell" Height="24" />
                                                            <ext:Button ID="btn5" runat="server" Hidden="true" Icon="Bomb" Height="24" />
                                                        </Items>
                                                    </ext:Toolbar>
                                                    <ext:Container ID="LevelContainer" runat="server">
                                                        <Items>
                                                            <ext:Label ID="LabelTitle" runat="server" Text="HITRA Level" MarginSpec="0 0 0 10"
                                                                Width="70" Height="55" meta:resourcekey="LabelTitleResource1">
                                                            </ext:Label>
                                                            <ext:RadioGroup LabelSeparator="" ID="HIRARadioHIRALevel2" runat="server" ColumnsWidths="100,100"
                                                                MarginSpec="0 0 0 0" Layout="ColumnLayout">
                                                                <Items>
                                                                    <ext:Radio ID="radioLevel1" runat="server" BoxLabel="Level 1" Checked="true" Cls="rbLevel"
                                                                        InputValue="1" meta:resourcekey="radioLevel1Resource1" MarginSpec="0 0 0 10">
                                                                    </ext:Radio>
                                                                    <ext:Radio ID="radioLevel2" runat="server" BoxLabel="Level 2" Cls="rbLevel" InputValue="2"
                                                                        meta:resourcekey="radioLevel2Resource1" MarginSpec="0 0 0 15">
                                                                    </ext:Radio>
                                                                </Items>
                                                            </ext:RadioGroup>
    
    
                                                            <ext:TreePanel ID="TreePanel1" MinHeight="200" MultiSelect="false" runat="server"
                                                                StyleSpec="padding-left:7px;" RootVisible="false" Width="500" UseArrows="false"
                                                                Lines="true" EnableTheming="true" AutoScroll="true">
                                                                <Root>
                                                                    <ext:Node>
                                                                        <Children>
                                                                            <ext:Node Text="To Do" Expanded="true">
                                                                                <Children>
                                                                                    <ext:Node Text="Go jogging" NodeID="1" />
                                                                                    <ext:Node Text="Take a nap" Leaf="true" NodeID="2">
                                                                                    </ext:Node>
                                                                                    <ext:Node Text="Clean house" Leaf="true" NodeID="3" />
                                                                                </Children>
                                                                            </ext:Node>
                                                                            <ext:Node Text="Grocery List" Icon="Folder" Expanded="true">
                                                                                <Children>
                                                                                    <ext:Node Text="Bananas" NodeID="4" />
                                                                                    <ext:Node Text="Milk" Leaf="true" NodeID="5" />
                                                                                    <ext:Node Text="Cereal" Leaf="true" NodeID="6" />
                                                                                </Children>
                                                                            </ext:Node>
                                                                            <ext:Node Text="Kitchen Remodel" Icon="Folder" Expanded="true">
                                                                                <Children>
                                                                                    <ext:Node Text="Finish the budget" NodeID="7" />
                                                                                    <ext:Node Text="Call contractors" Leaf="true" NodeID="8" />
                                                                                    <ext:Node Text="Choose design" Leaf="true" NodeID="9" />
                                                                                </Children>
                                                                            </ext:Node>
                                                                        </Children>
                                                                    </ext:Node>
                                                                </Root>
                                                                <DirectEvents>
                                                                    <Select OnEvent="TreeNode_Select" Before="getTreeNodeXY(#{TreePanel1},#{hdnYvalue},#{tb1},#{hdnXvalue})">
                                                                    </Select>
                                                                </DirectEvents>
                                                                <SelectionModel>
                                                                    <ext:TreeSelectionModel ID="tsmHazards" runat="server" Mode="Single"></ext:TreeSelectionModel>
                                                                </SelectionModel>
                                                            </ext:TreePanel>
                                                        </Items>
                                                    </ext:Container>
                                                </Items>
                                            </ext:Container>
                                        </Items>
                                    </ext:Panel>
                                </Items>
                            </ext:Panel>
                        </Items>
                    </ext:FormPanel>
                </Items>
            </ext:Viewport>
            <ext:Hidden ID="hdnItem" runat="server">
            </ext:Hidden>
            <ext:Hidden ID="hdnYvalue" runat="server">
            </ext:Hidden>
            <ext:Hidden ID="hdnXvalue" runat="server">
            </ext:Hidden>
        </form>
    </body>
    </html>

    Thanks
    Mohan
    Last edited by Daniil; Feb 25, 2014 at 3:46 AM. Reason: [CLOSED]
  2. #2
    Hi Mohan,

    Well, yes, it is the IE behavior. I can suggest the following:
    <script type="text/javascript">
        Ext.tree.View.override({
            focusRow: function() {
                this.callParent(arguments);
                App.RDRAPanels.body.scrollTo('left', 0);
            }
        });
    </script>
  3. #3

    The similar issue found with multiselect in Internet explorer

    Quote Originally Posted by Daniil View Post
    <script type="text/javascript">
        Ext.tree.View.override({
            focusRow: function() {
                this.callParent(arguments);
                App.RDRAPanels.body.scrollTo('left', 0);
            }
        });
    </script>
    Thank you Daniil, It is working fine after adding your code.
    Now I found the similar issue with multiselect on selection of any item only in internet explorer.
    I tried the following but not working

     Ext.ux.Multiselect.override({
            focusRow: function() {
                this.callParent(arguments);
                App.RDRAPanels.body.scrollTo('left', 0);
            }
        });
    I tried focus method instead of focusRow method but it is not working.

    Thank you
    Mohan
  4. #4
    Please provide a test case.

Similar Threads

  1. Replies: 3
    Last Post: Jun 27, 2014, 11:38 AM
  2. Replies: 1
    Last Post: Apr 02, 2013, 5:50 AM
  3. [CLOSED] Remote action refusal when moving a node
    By RCN in forum 2.x Legacy Premium Help
    Replies: 9
    Last Post: Jan 11, 2013, 10:32 AM
  4. [CLOSED] Remove moving a node VS loading targetĀ“s children.
    By RCN in forum 2.x Legacy Premium Help
    Replies: 5
    Last Post: Jun 14, 2012, 5:11 PM
  5. Replies: 16
    Last Post: Jul 19, 2011, 3:53 AM

Tags for this Thread

Posting Permissions