|
From: <AFr...@ba...> - 2001-03-19 22:27:15
|
Okay...
Here is my initial framework for the grid code that I was looking for.
<html>
<head>
<title>Grid test</title>
<script language="JavaScript" src="../src/dynapi.js"></script>
<script language="Javascript">
DynAPI.setLibraryPath('../src/lib/');
DynAPI.include('dynapi.api.*');
DynAPI.include('dynapi.util.thread.js');
DynAPI.include('dynapi.util.pathanim.js');
DynAPI.include('dynapi.gui.dynimage.js');
DynAPI.include('dynapi.gui.button.js');
DynAPI.include('dynapi.gui.scrollbar.js');
DynAPI.include('dynapi.gui.viewport.js');
DynAPI.include('dynapi.gui.scrollpane.js');
DynAPI.include('dynapi.gui.label.js');
</script>
<script language="Javascript">
function Grid()
{
this.DynLayer = DynLayer;
this.DynLayer();
this.grid = new DynLayer();
this.scrollObj = new ScrollPane(this.grid);
// hack start
// this.addChild(this.scrollObj);
DynAPI.document.addChild(this.scrollObj);
this.scrollObj.myParent = this;
this.scrollObj.z = 10;
// hack stop
var buttonListener = new EventListener(this.scrollObj);
buttonListener.onmousedown = function(e)
{
var o = e.getTarget().myParent;
if (e.getSource().direction == "Left" || e.getSource().direction
== "Right")
{
o.colHeaders["scroll"+e.getSource().direction]();
o.colHeaders.findDimensions();
}
else
{
o.rowNumbers["scroll"+e.getSource().direction]();
o.rowNumbers.findDimensions();
}
};
buttonListener.onmouseup = function(e)
{
var o = e.getTarget().myParent;
if (e.getSource().direction == "Left" || e.getSource().direction
== "Right")
o.colHeaders.cancelScroll();
else
o.rowNumbers.cancelScroll();
};
this.scrollObj.rt.addEventListener(buttonListener);
this.scrollObj.lt.addEventListener(buttonListener);
this.scrollObj.up.addEventListener(buttonListener);
this.scrollObj.dn.addEventListener(buttonListener);
var barListener = new EventListener(this.scrollObj);
barListener.onscroll = function(e)
{
var bar = e.getSource();
if (!bar.created) return;
// hack start
var o = e.getTarget().myParent;
// hack stop
if (bar.direction == "h")
o.colHeaders.setRatioX(o.scrollObj.getRatioX());
else
o.rowNumbers.setRatioY(o.scrollObj.getRatioY());
}
this.scrollObj.vbar.addEventListener(barListener);
this.scrollObj.hbar.addEventListener(barListener);
this.rows = new DynLayer();
this.rowNumbers = this.addChild(new ViewPort(this.rows));
this.rowNumbers.setVisible(false);
this.cols = new DynLayer();
this.colHeaders = this.addChild(new ViewPort(this.cols));
this.colHeaders.setVisible(false);
this.cornerUL = this.addChild(new Button());
this.cornerUL.setEnabled(false);
this.cornerUL.setVisible(false);
this.cornerUR = this.addChild(new Button());
this.cornerUR.setEnabled(false);
this.cornerUR.setVisible(false);
this.cornerLL = this.addChild(new Button());
this.cornerLL.setEnabled(false);
this.cornerLL.setVisible(false);
this.addEventListener(Grid.listener);
}
Grid.SCROLLBAR_SIZE = 30;
Grid.listener = new EventListener();
Grid.listener.onprecreate = function(e)
{
var o = e.getSource();
var h = o.getHeight();
var w = o.getWidth();
o.grid.setSize(w + 50, h + 50);
o.grid.setHTML("<h1>a1 b1 c1<br />a2
b2 c2<br />a3<br />a4<br />a5<br />a6<br /></h1>");
o.scrollObj.moveTo(o.getX() + Grid.SCROLLBAR_SIZE, o.getY() +
Grid.SCROLLBAR_SIZE);
o.scrollObj.setSize(w - Grid.SCROLLBAR_SIZE, h - Grid.SCROLLBAR_SIZE);
o.rows.setSize(Grid.SCROLLBAR_SIZE, o.grid.h);
o.rows.setHTML("<h1>1<br />2<br />3<br />4<br />5<br />6</h1>");
o.rowNumbers.setSize(Grid.SCROLLBAR_SIZE, o.scrollObj.h -
o.scrollObj.hbar.h);
o.rowNumbers.moveTo(0, Grid.SCROLLBAR_SIZE);
o.rowNumbers.setBgColor("silver");
o.cols.setSize(o.grid.w, Grid.SCROLLBAR_SIZE);
o.cols.setHTML("<h1>A B C
D E F</h1>");
o.colHeaders.setSize(o.scrollObj.w - o.scrollObj.vbar.w,
Grid.SCROLLBAR_SIZE);
o.colHeaders.moveTo(Grid.SCROLLBAR_SIZE, 0);
o.colHeaders.setBgColor("silver");
o.cornerUL.setSize(Grid.SCROLLBAR_SIZE, Grid.SCROLLBAR_SIZE);
o.cornerUR.setSize(o.scrollObj.vbar.w, Grid.SCROLLBAR_SIZE);
o.cornerUR.moveTo(Grid.SCROLLBAR_SIZE + o.colHeaders.w, 0);
o.cornerLL.setSize(Grid.SCROLLBAR_SIZE, o.scrollObj.hbar.h);
o.cornerLL.moveTo(0, Grid.SCROLLBAR_SIZE + o.rowNumbers.h);
o.rowNumbers.setVisible(true);
o.colHeaders.setVisible(true);
o.cornerUL.setVisible(true);
o.cornerUR.setVisible(true);
o.cornerLL.setVisible(true);
};
Grid.prototype = new DynLayer;
DynAPI.onLoad = function() {
gridObj = new Grid();
gridObj.setSize(200, 200);
DynAPI.document.addChild(gridObj);
}
</script>
</head>
<body bgcolor="#ffffff">
</body>
</html>
--- AFr...@ba... wrote:
> Hello.
>
> I am looking to either implement or extend an existing widget that by
> and large looks like a spreadsheet. Features that I am looking for:
>
> - horizonal and vertical scrollbars
> - column headers
> - optional row numbering
> - single and/or multi column selection (by clicking on the col header)
> - single and/or multi row selection (by clicking on the row number)
> - row selection with a checkbox
> - row insertion (which requires renumbering of rows/ids)
> - column insertion
> - column freezing
> - ability to scroll around on the grid with the cursor keys
>
> Optionally I would like to have it have these type of features:
> - column based datatypes (text, number, dropdown)
> - column based [un]locking of cells
> - inline cell editing based on the colum's datatype or the cell's
> datatype
> - copy insert of a row(s)
>
> I have implemented a DOM based version, more a (poor) proof of concept,
> of this using a table; however, it does not implement all of the
> features that I need. One of the primary problems is that my version
> does not fix the column headers and the row numbers to the sides of the
> grid. This makes the grid useful with only a screenful of data. Since
> I have the potential to have 60 columns and 150 rows, it is very
> unlikely that all of the data will fit on one screen.
>
> Also, since I have more than a screenful of data, it is essential that
> it displays a screenful of data ASAP. I was able to accomplish this by
> using the setTimeout function in JS. Talk about a hack... ;)
>
> I found the example on Scott Andrew's site:
> http://www.scottandrew.com/dhtml/demos/dynchart.html
> but this does not help with the scrolling issue. I am also concerned
> with the number of layers his approach creates. If I have a 60x150
> grid I am looking at 9000 DIV tags just for the grid. That does not take
> any of the other layers that may be needed in to account.
>
> Being that I am not by any stretch of the imagination familiar enough
> with the DynAPI and all of the changes that it has been undergoing the
> past several weeks to know where to start on this I would appreciate any
> suggestions. At this point I have looked at modifying the
> dynapi.gui.ScollPane but I do not know if that is really where I should
> be starting.
>
> I would appreciate any suggestions that anyone can offer.
>
> Thanks,
> Andy
|