PDA

View Full Version : [CLOSED] Clicking on tree node moving the content in the screen towards left



mohan.bizbites
Feb 19, 2014, 2:17 PM
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

Daniil
Feb 19, 2014, 4:42 PM
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>

mohan.bizbites
Feb 20, 2014, 9:10 AM
<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

Daniil
Feb 20, 2014, 12:08 PM
Please provide a test case.