<html>
<head>
</style>
<link href="../../runtime/styles/xp/aw.css" rel="stylesheet" type="text/css" ></link>
<script src="../../runtime/lib/aw.js"></script>
<style>
#Flx1 {left:0; top:0; height:100%; width:100%;}
#Flx1 .aw-row-selector {width: 20px; text-align: center}
#Flx1 .aw-mouseover-row .aw-row-selector {color: red}
#Flx1 .aw-rows-selected .aw-row-selector {font-weight: bold}
#Flx1 .aw-alternate-even {background: #fff;}
#Flx1 .aw-alternate-odd {background: #eee;}
#Flx1 .aw-rows-selected {background: #316ac5}
#Flx1 .aw-grid-row {border-bottom: 1px solid threedlightshadow;}
#Flx1 .aw-grid-cell {border-right: 1px solid threedlightshadow;}
#Flx2 {left:0; top:0; height:100%; width:100%;}
#Flx2 .aw-row-selector {width: 20px; text-align: center}
#Flx2 .aw-mouseover-row .aw-row-selector {color: red}
#Flx2 .aw-rows-selected .aw-row-selector {font-weight: bold}
#Flx2 .aw-alternate-even {background: #fff;}
#Flx2 .aw-alternate-odd {background: #eee;}
#Flx2 .aw-rows-selected {background: #316ac5}
#Flx2 .aw-grid-row {border-bottom: 1px solid threedlightshadow;}
#Flx2 .aw-grid-cell {border-right: 1px solid threedlightshadow;}
#Flx3 {left:0; top:0; height:100%; width:100%;}
#Flx3 .aw-row-selector {width: 20px; text-align: center}
#Flx3 .aw-mouseover-row .aw-row-selector {color: red}
#Flx3 .aw-rows-selected .aw-row-selector {font-weight: bold}
#Flx3 .aw-alternate-even {background: #fff;}
#Flx3 .aw-alternate-odd {background: #eee;}
#Flx3 .aw-rows-selected {background: #316ac5}
#Flx3 .aw-grid-row {border-bottom: 1px solid threedlightshadow;}
#Flx3 .aw-grid-cell {border-right: 1px solid threedlightshadow;}
</style>
</head>
<body scroll="no">
<table width=100% height=100% >
<tr><td>
Spliter Demo...
<tr height=100% ><td>
<table cellspacing=0 cellpadding=0 id=tab1 height=100% width=100%>
<tr><td id=pane1 width=250 style="cursor:col-resize; border-right:6px solid #E2DECD;"><span id="Flx1"></span></td>
<td>
<table cellspacing=0 cellpadding=0 id=tab2 height=100% width=100%>
<tr><td id=pane2 height=250 style="cursor:row-resize; border-bottom:6px solid #E2DECD;">
<span id="Flx2"></span>
</td></tr>
<tr><td>
<span id="Flx3"></span>
</td></tr>
</table>
</td>
</tr>
</table>
</table>
<script>
var str = new AW.Formats.String;
var num = new AW.Formats.Number;
var Flx1 = new AW.UI.Grid;
Flx1.setId("Flx1");
Flx1.setHeaderText(["tantip", "tankod", "Maintaince Type"]);
Flx1.setCellFormat([num, num, str]);
Flx1.setColumnCount(3);
Flx1.setColumnWidth([0, 0, 200]);
Flx1.setSelectionMode("single-row");
var Flx2 = new AW.UI.Grid;
Flx2.setId("Flx2");
Flx2.setHeaderText(["tantip", "Code", "Description"]);
Flx2.setCellFormat([num, str, str]);
Flx2.setColumnCount(3);
Flx2.setColumnWidth([0, 80, 200]);
Flx2.setSelectionMode("single-row");
var Flx3 = new AW.UI.Grid;
Flx3.setId("Flx3");
Flx3.setHeaderText(["tantip", "Code", "Description"]);
Flx3.setCellFormat([num, str, str]);
Flx3.setColumnCount(3);
Flx3.setColumnWidth([0, 80, 200]);
Flx3.setSelectionMode("single-row");
////////////// Splitter/Sizer ( Vertical)
document.write('<DIV Name="SP1" Id="SP1" style="border:1px solid #999; position:absolute; visibility:hidden; zIndex:999; height:100% ;fontSize:1px; background-Color:#999;"></DIV>');
var SP1 = document.getElementById('SP1');
var p = document.getElementById('pane1');
var Split_MinLeft=100;
var Split_X;
attachEvent(document.getElementById('pane1'),'onmousedown',splitDown);
function splitDown(e){
if (!document.addEventListener) {e=event}
if (e.clientX > (p.offsetWidth-parseInt(p.style.borderRightWidth)) ) {
Split_X = e.clientX;
SP1.style.left = Split_X-6;
SP1.style.top = 0;
SP1.style.width = 6;
SP1.style.height= document.body.clientHeight;
SP1.style.visibility='visible';
attachEvent(document,'onmousemove', splitMove);
attachEvent(document,'onmouseup', splitUp);
}
}
function splitMove(e){
if (!document.addEventListener) {e=event}
SP1.style.left= (e.clientX >= Split_MinLeft) ? e.clientX : Split_MinLeft;
}
function splitUp(e){
if (!document.addEventListener) {e=event}
p.width = p.offsetWidth + (parseInt(SP1.style.left) - Split_X);
SP1.style.visibility='hidden';
detachEvent(document, 'onmousemove', splitMove);
detachEvent(document, 'onmouseup', splitUp);
}
////////////// Splitter/Sizer ( Horizontal)
document.write('<DIV Name="ZSP1" Id="ZSP1" style="border-top:6px solid #999; position:absolute; visibility:hidden; zIndex:999; height:6px; fontSize:1px; "></DIV>');
//document.getElementById('ZSP1').style.left = '250px';
var ZSP1 = document.getElementById('ZSP1');
var Zp = document.getElementById('pane2');
var ZSplit_MinTop=100;
var ZSplit_Y;
var ZXp = document.getElementById('Flx3');
attachEvent(document.getElementById('pane2'),'onmousedown', ZsplitDown);
function ZsplitDown(e){
if (!document.addEventListener) {e=event}
if (e.clientY > ( ZXp.offsetTop - 5 ) && e.clientY < ( ZXp.offsetTop + 2) ) {
ZSplit_Y = e.clientY;
// ZSP1.style.left = 0;
// ZSP1.style.marginLeft = SP1.style.left;
ZSP1.style.top = ZSplit_Y-6;
ZSP1.style.height = 6;
ZSP1.style.width = 3000;
// ZSP1.style.width = Zp.style.width;
ZSP1.style.visibility='visible';
attachEvent(document,'onmousemove', ZsplitMove);
attachEvent(document,'onmouseup', ZsplitUp);
}
}
function ZsplitMove(e){
if (!document.addEventListener) {e=event}
ZSP1.style.top= (e.clientY >= ZSplit_MinTop) ? e.clientY : ZSplit_MinTop;
}
function ZsplitUp(e){
if (!document.addEventListener) {e=event}
Zp.height = Zp.offsetHeight + (parseInt(ZSP1.style.top) - ZSplit_Y);
ZSP1.style.visibility='hidden';
detachEvent(document, 'onmousemove', ZsplitMove);
detachEvent(document, 'onmouseup', ZsplitUp);
}
//////////////////////////////////////////////////////
/* attach/detach Event for IE and FireFox */
function attachEvent(obj, eventName, eventHandler){
if (obj){
if (obj.addEventListener){
if (eventName.substring(0,2)=='on'){
eventName=eventName.substring(2,eventName.length);
}
obj.addEventListener(eventName, eventHandler, false);
} else if (obj.attachEvent) {
obj.attachEvent(eventName, eventHandler)
}
}
}
function detachEvent(obj, eventName, eventHandler){
if (obj){
if (obj.removeEventListener){
if (eventName.substring(0,2)=='on'){
eventName=eventName.substring(2,eventName.length);
}
obj.removeEventListener(eventName, eventHandler, false);
} else if (obj.attachEvent) {
obj.detachEvent(eventName, eventHandler)
}
}
}
</script>
</body>
</html>
This topic is archived.