294 lines
11 KiB
HTML
294 lines
11 KiB
HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
|
|
"http://www.w3.org/TR/html4/loose.dtd">
|
|
<html dir="ltr">
|
|
<head>
|
|
<title>Test Dnd plugin of dojox.grid.EnhancedGrid</title>
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></meta>
|
|
<link rel=stylesheet href="support/common.css"/>
|
|
<style type="text/css">
|
|
@import "/dojo/tests/dnd/dndDefault.css";
|
|
body {
|
|
font-size: 0.9em;
|
|
font-family: Geneva, Arial, Helvetica, sans-serif;
|
|
padding: 0.5em;
|
|
}
|
|
.title {
|
|
text-align:center;
|
|
margin:1em;
|
|
}
|
|
.container {
|
|
display: block;
|
|
border: 3px solid #ccc;
|
|
padding: 1em 3em;
|
|
cursor: default;
|
|
radius: 8pt;
|
|
background: #fff;
|
|
-moz-border-radius: 8pt 8pt;
|
|
}
|
|
.myblock{
|
|
float: left;
|
|
margin: 10px;
|
|
margin-top: 0;
|
|
}
|
|
.cfgtable th,
|
|
.cfgtable td{
|
|
font-weight: bolder;
|
|
padding: 5px;
|
|
}
|
|
h3{
|
|
margin: 0;
|
|
}
|
|
#grid1, #grid2{
|
|
margin-bottom: 0px;
|
|
width: 50em;
|
|
height: 30em;
|
|
}
|
|
/*Sample - overwrite default cell style
|
|
.claro .dojoxGridCell{
|
|
border-color: transparent #D5CDB5 #D5CDB5 transparent !important;
|
|
}
|
|
.dj_ie6 .claro .dojoxGridCell{
|
|
border: 1px solid #F1F1F1 !important;
|
|
}*/
|
|
</style>
|
|
<script type="text/javascript" src="../../../../dojo/dojo.js"
|
|
djConfig="isDebug:true, parseOnLoad: true"></script>
|
|
<script type="text/javascript" src="../../../../dijit/tests/_testCommon.js"></script>
|
|
<script type="text/javascript">
|
|
dojo.require("dojo.parser");
|
|
dojo.require("dojo.data.ItemFileWriteStore");
|
|
dojo.require("dojox.data.AtomReadStore");
|
|
dojo.require("dojox.data.XmlStore");
|
|
dojo.require("dojox.grid.EnhancedGrid");
|
|
dojo.require("dojox.grid.enhanced.plugins.Selector");
|
|
dojo.require("dojox.grid.enhanced.plugins.NestedSorting");
|
|
dojo.require("dojox.grid.enhanced.plugins.DnD");
|
|
dojo.require("dojox.grid.enhanced.plugins.GridSource");
|
|
dojo.require("dojo.dnd.Source");
|
|
dojo.require("dijit.form.CheckBox");
|
|
</script>
|
|
<script type="text/javascript" src="support/test_write_store_dnd.js"></script>
|
|
<script type="text/javascript" src="support/test_write_store_music.js"></script>
|
|
<script type="text/javascript">
|
|
var layout1 = [{
|
|
defaultCell: {width: 5},
|
|
rows: [
|
|
{field: "A"},
|
|
{field: "B"},
|
|
{field: "C"},
|
|
{field: "D"},
|
|
{field: "E"},
|
|
{field: "F"},
|
|
{field: "G", hidden: true},
|
|
{field: "H", hidden: true},
|
|
{field: "I", hidden: true},
|
|
{field: "J"},
|
|
{field: "K"},
|
|
{field: "L"},
|
|
{field: "M"},
|
|
{field: "N"},
|
|
{field: "O"},
|
|
{field: "P"},
|
|
{field: "Q"},
|
|
{field: "R"},
|
|
{field: "S"},
|
|
{field: "T"},
|
|
{field: "U"},
|
|
{field: "V"},
|
|
{field: "W"},
|
|
{field: "X"},
|
|
{field: "Y"},
|
|
{field: "Z"}
|
|
]
|
|
}];
|
|
var layout2 = [
|
|
{//first view
|
|
rows:
|
|
[
|
|
{ field: "Genre", width: '6'},
|
|
{ field: "Artist", width: '5'},
|
|
{ field: "Year", width: '6'},
|
|
{ field: "Album", width: '12'},
|
|
{ field: "Name", width: '17', hidden: true},
|
|
{ field: "Length", width: '6'},
|
|
{ field: "Track", width: '6'},
|
|
{ field: "Composer", width: '15'},
|
|
{ field: "Download Date", width: '10'},
|
|
{ field: "Last Played", width: '10'}
|
|
]
|
|
}
|
|
];
|
|
var store_copy = new dojo.data.ItemFileWriteStore({
|
|
data: test_store_data[0]
|
|
});
|
|
var setIdentifierForNewItem = function(item, store, index){
|
|
console.log("setIdentifierForNewItem", index);
|
|
var attrs = store.getIdentityAttributes(item);
|
|
for(var i = attrs.length - 1; i >= 0; --i){
|
|
item[attrs[i]] = index + (new Date()).getTime();
|
|
}
|
|
return item;
|
|
};
|
|
var setDnDConfig = function(gridId, type, mode, selected){
|
|
var config = {};
|
|
config[type] = {};
|
|
config[type][mode] = selected;
|
|
dijit.byId(gridId).setupDnDConfig(config);
|
|
};
|
|
var setCopyOnly = function(gridId, selected){
|
|
dijit.byId(gridId).dndCopyOnly(selected);
|
|
};
|
|
var getRowData = function(grid, rowIndexes){
|
|
var cells = grid.layout.cells;
|
|
var store = grid.store;
|
|
var cache = grid._by_idx;
|
|
var res = "Grid Rows from " + grid.id + ":<br/>";
|
|
for(var i = 0; i < rowIndexes.length; ++i){
|
|
var r = rowIndexes[i];
|
|
res += "Row " + r + ": ";
|
|
for(var j = 0; j < cells.length; ++j){
|
|
if(!cells[j].hidden){
|
|
res += store.getValue(cache[r].item, cells[j].field) + ", ";
|
|
}
|
|
}
|
|
res = res.substring(0, res.length - 2) + ";<br/>";
|
|
}
|
|
return res;
|
|
};
|
|
dojo.addOnLoad(function(){
|
|
dojo.query("input.cfgbox").forEach(function(cb){
|
|
cb.checked = true;
|
|
});
|
|
dojo.query("input.copyonlyCBox").forEach(function(cb){
|
|
cb.checked = false;
|
|
});
|
|
});
|
|
var newItem1 = {A: "new a1", B: "new b1", C: "new c1", D: "new d1",E: "new e1",F: "new f1",G: "new g1",H: "new h1",I: "new i1",J: "new j1",K: "new k1",L: "new l1",M: "new m1",N: "new n1",O: "new o1",P: "new c1",Q: "new q1",R: "new r1",S: "new s1",T: "new t1",U: "new u1",V: "new v1",W: "new w1",X: "new x1",Y: "new y1",Z: "new z1"};
|
|
var newItem2 = {A: "new a2", B: "new b2", C: "new c2", D: "new d2",E: "new e2",F: "new f2",G: "new g2",H: "new h2",I: "new i2",J: "new j2",K: "new k2",L: "new l2",M: "new m2",N: "new n2",O: "new o2",P: "new c2",Q: "new q2",R: "new r2",S: "new s2",T: "new t2",U: "new u2",V: "new v2",W: "new w2",X: "new x2",Y: "new y2",Z: "new z2"};
|
|
var newItem3 = {A: "new a3", B: "new b3", C: "new c3", D: "new d3",E: "new e3",F: "new f3",G: "new g3",H: "new h3",I: "new i3",J: "new j3",K: "new k3",L: "new l3",M: "new m3",N: "new n3",O: "new o3",P: "new c3",Q: "new q3",R: "new r3",S: "new s3",T: "new t3",U: "new u3",V: "new v3",W: "new w3",X: "new x3",Y: "new y3",Z: "new z3"};
|
|
</script>
|
|
</head>
|
|
<body class="claro">
|
|
<h1 class="title">dojox.grid.EnhancedGrid - DnD</h1>
|
|
<div class="myblock">
|
|
<h3>Grid 1</h3>
|
|
<div id="grid1" dojoType="dojox.grid.EnhancedGrid" rowsPerPage="16"
|
|
canSort="false",
|
|
plugins='{
|
|
dnd: {
|
|
"setIdentifierForNewItem": setIdentifierForNewItem, copyOnly: true,
|
|
"dndConfig": {
|
|
}
|
|
}
|
|
}' store="test_store[0]" structure="layout1" rowSelector="20px">
|
|
</div>
|
|
</div>
|
|
<div class="myblock">
|
|
<h3>Grid 2</h3>
|
|
<div id="grid2" dojoType="dojox.grid.EnhancedGrid" rowsPerPage="16"
|
|
canSort="false",
|
|
plugins='{
|
|
dnd: {
|
|
"setIdentifierForNewItem": setIdentifierForNewItem,
|
|
"dndConfig": {
|
|
}
|
|
}
|
|
}' store="store_copy" structure="layout1" rowSelector="20px">
|
|
</div>
|
|
</div>
|
|
<div class="myblock">
|
|
<h3>Grid 1 Configuration</h3>
|
|
<label style="font-weight: bolder;">Copy Only</label><input class="copyonlyCBox" type="checkbox" onchange="setCopyOnly('grid1', this.checked)" />
|
|
<table class="cfgtable" border="1">
|
|
<thead>
|
|
<tr>
|
|
<th>Drag</th>
|
|
<th>Within</th>
|
|
<th>In</th>
|
|
<th>Out</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>Rows</td>
|
|
<td><input type="checkbox" class="cfgbox" onchange="setDnDConfig('grid1', 'row', 'within', this.checked)"/></td>
|
|
<td><input type="checkbox" class="cfgbox" onchange="setDnDConfig('grid1', 'row', 'in', this.checked)"/></td>
|
|
<td><input type="checkbox" class="cfgbox" onchange="setDnDConfig('grid1', 'row', 'out', this.checked)"/></td>
|
|
</tr>
|
|
<tr>
|
|
<td>Columns</td>
|
|
<td><input type="checkbox" class="cfgbox" onchange="setDnDConfig('grid1', 'col', 'within', this.checked)"/></td>
|
|
<td>Not implemented</td>
|
|
<td><input type="checkbox" class="cfgbox" onchange="setDnDConfig('grid1', 'col', 'out', this.checked)"/></td>
|
|
</tr>
|
|
<tr>
|
|
<td>Cells</td>
|
|
<td><input type="checkbox" class="cfgbox" onchange="setDnDConfig('grid1', 'cell', 'within', this.checked)"/></td>
|
|
<td><input type="checkbox" class="cfgbox" onchange="setDnDConfig('grid1', 'cell', 'in', this.checked)"/></td>
|
|
<td><input type="checkbox" class="cfgbox" onchange="setDnDConfig('grid1', 'cell', 'out', this.checked)"/></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div class="myblock">
|
|
<h3>Grid 2 Configuration</h3>
|
|
<label style="font-weight: bolder;">Copy Only</label><input class="copyonlyCBox" type="checkbox" onchange="setCopyOnly('grid2', this.checked)" />
|
|
<table class="cfgtable" border="1">
|
|
<thead>
|
|
<tr>
|
|
<th>Drag</th>
|
|
<th>Within</th>
|
|
<th>In</th>
|
|
<th>Out</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>Rows</td>
|
|
<td><input type="checkbox" class="cfgbox" onchange="setDnDConfig('grid2', 'row', 'within', this.checked)"/></td>
|
|
<td><input type="checkbox" class="cfgbox" onchange="setDnDConfig('grid2', 'row', 'in', this.checked)"/></td>
|
|
<td><input type="checkbox" class="cfgbox" onchange="setDnDConfig('grid2', 'row', 'out', this.checked)"/></td>
|
|
</tr>
|
|
<tr>
|
|
<td>Columns</td>
|
|
<td><input type="checkbox" class="cfgbox" onchange="setDnDConfig('grid2', 'col', 'within', this.checked)"/></td>
|
|
<td>Not implemented</td>
|
|
<td><input type="checkbox" class="cfgbox" onchange="setDnDConfig('grid2', 'col', 'out', this.checked)"/></td>
|
|
</tr>
|
|
<tr>
|
|
<td>Cells</td>
|
|
<td><input type="checkbox" class="cfgbox" onchange="setDnDConfig('grid2', 'cell', 'within', this.checked)"/></td>
|
|
<td><input type="checkbox" class="cfgbox" onchange="setDnDConfig('grid2', 'cell', 'in', this.checked)"/></td>
|
|
<td><input type="checkbox" class="cfgbox" onchange="setDnDConfig('grid2', 'cell', 'out', this.checked)"/></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div class="myblock" style="clear: left;">
|
|
<h3>Ordinary Target (Can not accept grid contents)</h3>
|
|
<div dojoType="dojo.dnd.Source" class="container">
|
|
<div class="dojoDndItem">Item <strong>X</strong></div>
|
|
<div class="dojoDndItem">Item <strong>Y</strong></div>
|
|
<div class="dojoDndItem">Item <strong>Z</strong></div>
|
|
</div>
|
|
</div>
|
|
<div class="myblock">
|
|
<h3>Target that can accept Grid</h3>
|
|
<div dojoType="dojox.grid.enhanced.plugins.GridSource" class="container"
|
|
insertNodesForGrid="true" getRowContent="getRowData">
|
|
<div class="dojoDndItem">Item 1</div>
|
|
<div class="dojoDndItem">Item 2</div>
|
|
<div class="dojoDndItem">Item 3</div>
|
|
</div>
|
|
</div>
|
|
<div class="myblock">
|
|
<h3>Grid Acceptable Source (Drag item to grid)</h3>
|
|
<div dojoType="dojo.dnd.Source" class="container">
|
|
<div class="dojoDndItem" dndType="grid/rows" dndData="newItem1">Item 1</div>
|
|
<div class="dojoDndItem" dndType="grid/rows" dndData="newItem2">Item 2</div>
|
|
<div class="dojoDndItem" dndType="grid/rows" dndData="newItem3">Item 3</div>
|
|
</div>
|
|
</div>
|
|
<p style="clear: left;"><strong>Note:</strong> To see the tundra theme, just append <b style="color:blue;">?theme=tundra</b> to the URL.</p>
|
|
</body>
|
|
</html> |