ItEr28S09CUCreacionProxectoPlanificacionItEr27S09: Vertical scrolling on taskdetails component whith ganttpanel scrollbars, and horizontal scrolls added in left panels
This commit is contained in:
parent
eb894fd099
commit
6e647a334d
5 changed files with 45 additions and 43 deletions
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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";
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
Loading…
Add table
Reference in a new issue