diff options
| author | mensonge <mensonge@b3834d28-1941-0410-a4f8-b48e95affb8f> | 2008-11-13 09:49:11 +0000 |
|---|---|---|
| committer | mensonge <mensonge@b3834d28-1941-0410-a4f8-b48e95affb8f> | 2008-11-13 09:49:11 +0000 |
| commit | e44a7e37b6c7b5961adaffc62b9042b8d442938e (patch) | |
| tree | 95b67c356e93163467db2451f2b8cce84ed5d582 /includes/js/dojox/grid/tests/test_change_structure.html | |
| parent | a62b9742ee5e28bcec6872d88f50f25b820914f6 (diff) | |
| download | semanticscuttle-e44a7e37b6c7b5961adaffc62b9042b8d442938e.tar.gz semanticscuttle-e44a7e37b6c7b5961adaffc62b9042b8d442938e.tar.bz2 | |
New feature: basic Ajax suggestion for tags and implementation of Dojo toolkit
git-svn-id: https://semanticscuttle.svn.sourceforge.net/svnroot/semanticscuttle/trunk@151 b3834d28-1941-0410-a4f8-b48e95affb8f
Diffstat (limited to 'includes/js/dojox/grid/tests/test_change_structure.html')
| -rw-r--r-- | includes/js/dojox/grid/tests/test_change_structure.html | 124 |
1 files changed, 124 insertions, 0 deletions
diff --git a/includes/js/dojox/grid/tests/test_change_structure.html b/includes/js/dojox/grid/tests/test_change_structure.html new file mode 100644 index 0000000..4ecfa71 --- /dev/null +++ b/includes/js/dojox/grid/tests/test_change_structure.html @@ -0,0 +1,124 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> +<html> +<head> + <title>dojox.Grid Change Structure Example</title> + <meta http-equiv="Content-Type" content="text/html; charset=utf-8"></meta> + <style type="text/css"> + @import "../_grid/Grid.css"; + body { + font-size: 0.9em; + font-family: Geneva, Arial, Helvetica, sans-serif; + } + .heading { + font-weight: bold; + padding-bottom: 0.25em; + } + + #grid { + border: 1px solid #333; + width: 48em; + height: 30em; + } + + #grid .dojoxGrid-cell { + text-align: center; + } + </style> + <script type="text/javascript" src="../../../dojo/dojo.js" djConfig="isDebug:false, parseOnLoad: true"></script> + <script type="text/javascript"> + dojo.require("dojox.grid.Grid"); + dojo.require("dojo.parser"); + </script> + <script type="text/javascript"> + + // get can return data for a cell of the grid + function get(inRowIndex) { + return [this.index, inRowIndex].join(', '); + } + + // grid structure + // a grid view is a group of columns + + // a special view providing selection feedback + var rowBar = {type: 'dojox.GridRowView', width: '20px' }; + + // a view without scrollbars + var view0 = { + noscroll: true, + cells: [[ + {name: 'Alpha', value: '<input name="" type="checkbox" value="0">'}, + {name: 'Beta', get: get, width: 4.5} + ]]}; + + var view1 = { + cells: [[ + {name: 'Apple', value: '<button>Apple</button>'}, + {name: 'Banana', get: get}, + {name: 'Beans', value: 'Happy to be grid!'}, + {name: 'Kiwi', get: get}, + {name: 'Orange', value: '<img src="images/flatScreen.gif" height="48" width="48">'}, + {name: 'Pear', get: get}, + {name: 'Tomato', width: 20, value: '<input name="" type="file">'}, + ]]}; + + var view2 = { + noscroll: true, + cells: [ + [ + {name: 'Alpha', value: '<input name="" type="checkbox" value="0">', rowSpan: 2}, + {name: 'Beta', get: get, width: 4.5} + ], [ + {name: 'Gamma', get: get} + ], + [ + {name: 'Epsilon', value: '<button>Epsilon</button>', colSpan: 2} + ] + ] + } + + var view3 = { + cells: [ + [ + {name: 'Apple', value: '<button>Apple</button>', rowSpan: 3}, + {name: 'Banana', get: get, width: 20}, + {name: 'Kiwi', get: get, width: 20}, + {name: 'Pear', get: get, width: 20}, + ], + [ + {name: 'Beans', value: 'Happy to be grid!'}, + {name: 'Orange', value: '<img src="images/flatScreen.gif" height="48" width="48">'}, + {name: 'Tomato', value: '<input name="" type="file">'} + ], [ + {name: 'Zuchini', value: '<span style="letter-spacing: 10em;">wide</span>', colSpan: 3} + ] + ]}; + + + // a grid structure is an array of views. + // By default the middle view will be 'elastic', sized to fit the remaining space left by other views + // grid.elasticView can also be manually set + var structure = [ rowBar, view0, view1 ]; + var structure2 = [ rowBar, view2, view3 ]; + + + var l2 = false; + toggleStructure = function() { + l2 = !l2; + grid.scrollToRow(0); + grid.setStructure(l2 ? structure2 : structure); + } + + dojo.addOnLoad(function() { + window["grid"] = dijit.byId("grid"); + }); +</script> +</head> +<body> +<div class="heading">dojox.VirtualGrid Change Structure Example</div> +<p> + <button onclick="toggleStructure()">Change Structure</button> +</p> +<div id="grid" dojoType="dojox.VirtualGrid" structure="structure" rowCount="100000" elasticView="2"></div> + +</body> +</html> |