ItEr28S09CUCreacionProxectoPlanificacionItEr27S09: Vertical scrolling on taskdetails component whith ganttpanel scrollbars, and horizontal scrolls added in left panels

This commit is contained in:
Lorenzo Tilve 2009-10-03 23:42:03 +02:00 committed by Javier Moran Rua
parent eb894fd099
commit 6e647a334d
5 changed files with 45 additions and 43 deletions

View file

@ -1,5 +1,5 @@
<zk xmlns:n="http://www.zkoss.org/2005/zk/native">
<borderlayout height="600px" width="auto">
<borderlayout sclass="plannerlayout" width="auto">
<north height="30px" border="0">
<hbox align="center">
<button label="Save" />
@ -29,7 +29,7 @@
</north>
<center border="0">
<borderlayout sclass="plannerlayout">
<borderlayout sclass="plannerlayout_center">
<west size="300px" flex="true" collapsible="true"
splittable="true" autoscroll="true">
@ -45,7 +45,7 @@
</vbox>
</north>
<center border="0">
<center border="0" style="overflow-x:scroll">
<div sclass="leftpanelgap" id="insertionPointLeftPanel"></div>
</center>
</borderlayout>
@ -62,9 +62,9 @@
</center>
</borderlayout>
</center>
<south height="20%" collapsible="true" splittable="true">
<south height="100px" collapsible="true" splittable="true">
<borderlayout>
<west size="200px" flex="true" collapsible="true"
<west width="200px" flex="true" collapsible="true"
splittable="true">
<vbox pack="center" align="center">
<label value="ResourcesLoadGraph details"
@ -112,7 +112,7 @@ catmodel.setValue("2011", "Q3 2009", new Integer(70));
catmodel.setValue("2011", "Q4 2009", new Integer(90));
</zscript>
<chart id="barchart" width="1600" height="250"
<chart id="barchart" width="1600px" height="175px"
type="stacked_area" fgAlpha="128" />
<zscript>
barchart.setModel(catmodel);

View file

@ -20,7 +20,7 @@
<zk xmlns:n="http://www.zkoss.org/2005/zk/native">
<borderlayout height="600px" width="auto">
<borderlayout sclass="resourcesloadlayout" width="auto">
<north height="30px" border="0">
<hbox align="center">
<button label="Save" />
@ -65,7 +65,7 @@
</vbox>
</north>
<center border="0">
<center border="0" style="overflow-x:scroll">
<div sclass="leftpanelgap" id="insertionPointLeftPanel"></div>
</center>
</borderlayout>
@ -132,7 +132,7 @@ catmodel.setValue("2011", "Q3 2009", new Integer(70));
catmodel.setValue("2011", "Q4 2009", new Integer(90));
</zscript>
<chart id="barchart" title="Resources load Sample" width="1600" height="250"
<chart id="barchart" width="1600px" height="175px"
type="stacked_area" fgAlpha="128" />
<zscript>
barchart.setModel(catmodel);

View file

@ -59,10 +59,7 @@ function addResourcesLoadListMethods(object) {
};
function listenToScroll() {
var onHorizontalScroll = function() {
alert('horizontalscroll');
};
var onVerticalScroll = function() {
var onScroll = function() {
var scrolledpannel = YAHOO.util.Selector
.query('.rightpanellayout div')[0];
elem = YAHOO.util.Selector.query('.timetrackergap')[0];
@ -74,7 +71,7 @@ function addResourcesLoadListMethods(object) {
leftpanel.style["top"] = "-" + scrolledpannel.scrollTop + "px";
};
YAHOO.util.Selector.query('.rightpanellayout div')[0].onscroll = onVerticalScroll;
YAHOO.util.Selector.query('.rightpanellayout div')[0].onscroll = onScroll;
}

View file

@ -45,9 +45,8 @@ SCROLLBAR_WIDTH = 15; // Scrollbars default width
zkTasklist.init = function(cmp) {
zkTasklist.adjust_height();
// make_visible();
// relocateScrolls();
// listenToScroll();
listenToScroll();
}
/* Resizes ganttpanel heigh to fit window size */
@ -57,26 +56,27 @@ zkTasklist.adjust_height = function(cmp) {
adjustScrollableDimensions();
}
/* Listener for javascript scrolling to implement optimal synchronization */
/* Scrolls taskdetails compoent when scrolling ganttpanel component */
function listenToScroll() {
var onHorizontalScroll = function() {
var scroller = document.getElementById('ganttpanel_scroller_x');
document.getElementById('timetracker').scrollLeft = scroller.scrollLeft;
document.getElementById('scroll_container').scrollLeft = scroller.scrollLeft;
document.getElementById('zoom_buttons').style["left"] = scroller.scrollLeft
+ "px";
var onScroll = function() {
var scrolledpannel = YAHOO.util.Selector
.query('.rightpanellayout div')[0];
elem = YAHOO.util.Selector.query('.timetrackergap')[0];
elem.style["position"] = "relative";
elem.style["left"] = "-" + scrolledpannel.scrollLeft + "px";
var leftpanel = YAHOO.util.Selector.query('.leftpanelgap')[0];
leftpanel.style["position"] = "relative";
leftpanel.style["top"] = "-" + scrolledpannel.scrollTop + "px";
};
var onVerticalScroll = function() {
var offset = document.getElementById('ganttpanel_scroller_y').scrollTop;
document.getElementById('listdetails_container').scrollTop = offset;
document.getElementById('scroll_container').scrollTop = offset;
};
document.getElementById('ganttpanel_scroller_x').onscroll = onHorizontalScroll;
document.getElementById('ganttpanel_scroller_y').onscroll = onVerticalScroll;
// TODO listen to container onwheel scroll move
YAHOO.util.Selector.query('.rightpanellayout div')[0].onscroll = onScroll;
}
YAHOO.util.Event.addListener(window, 'resize', relocateScrolls);
// Improve adjusting plannerlayout_center height based on window size */
// YAHOO.util.Event.addListener(window, 'resize', relocateScrolls);
/*
* Move scrollbars to locate them on left and bottom window borders
*/
@ -148,14 +148,6 @@ function adjustScrollableDimensions() {
+ "px";
}
/*
* Makes javascript-handled scrollbars visible after the page is loaded to avoid
* relocation effect when the task list composition is finished
*/
function make_visible() {
document.getElementById('ganttpanel_scroller_x').style["display"] = "inline";
document.getElementById('ganttpanel_scroller_y').style["display"] = "inline";
}
/**
*

View file

@ -89,6 +89,14 @@ zkTasklist.GANTT_PANEL_LEFT = 300
width: 64px;
}
.listdetails {
min-width:200px;
}
.listdetails div.z-tree-header th.z-tree-col {
overflow:visible;
}
.taskdetail_grid table {
height: 30px;
width: 285px; /* Ganntz.ListdetailsWidth */
@ -473,17 +481,14 @@ tr.z-vbox-sep {
.resourceloadleftpane .z-tree-body {
z-index: -10;
overflow: hidden;
}
.leftpanelgap .z-tree-body {
z-index: 2;
overflow: hidden;
}
.leftpanelgap .z-tree-header {
z-index: 16;
overflow: hidden;
}
.leftpanelgap .resourceloadleftpane {
@ -507,6 +512,14 @@ tr.z-vbox-sep {
padding: 0px;
}
div.z-tree {
overflow:visible;
}
.listdetails td {
border-bottom: 1px dotted #86A4BE !important;
}
.plannerlayout, .resourcesloadlayout {
height:500px;
}