1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>dojox.Grid with Dojo.Data via binding</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></meta>
<style type="text/css">
@import "../../../dojo/resources/dojo.css";
@import "../_grid/tundraGrid.css";
#grid, #grid2 {
width: 65em;
height: 25em;
padding: 1px;
}
</style>
<script type="text/javascript" src="../../../dojo/dojo.js"
djConfig="isDebug: true, debugAtAllCosts: false, parseOnLoad: true"></script>
<script type="text/javascript">
dojo.require("dojox.grid.Grid");
dojo.require("dojox.grid._data.model");
dojo.require("dojox.rpc.Service");
dojo.require("dojox.data.PersevereRestStore");
dojo.require("dojo.parser");
</script>
<script type="text/javascript">
function getRow(inRowIndex){
return ' ' + inRowIndex;
}
var layout = [
// view 0
{ type: 'dojox.GridRowView', width: '20px' },
// view 2
{
defaultCell: { width: 8, editor: dojox.grid.editors.Input, styles: 'text-align: right;' },
cells: [[
{editor:null },
{ }
]]}
];
var persevereServices = new dojox.rpc.Service("/persevere/SMD"); // just connect to the auto-generated SMD from persevere
dynaStore = new dojox.data.PersevereRestStore({service:persevereServices.dyna}); // and create a store for it
dataModel = new dojox.grid.data.DojoData(null,null,{rowsPerPage:12,store:dynaStore,query:"46.customers",clientSort:true});
removeItem = function() {
// Removes the first item in the model from the store
// Grid should reflect removal of the first item and items should be re-indexed
// need to specify the parent because the dynaStore is hierarchical and the grid model will
// call newItem without any info who the parent
dynaStore.parentId="46.customers";
dynaStore.deleteItem(dataModel.data[0].__dojo_data_item);
}
var i = 0;
addItem = function() {
// need to specify the parent because the dynaStore is hierarchical and the grid model will
// call newItem without any info who the parent
dynaStore.parentId="46.customers";
grid.addRow({firstName: "firstName", lastName: "lastName",created:new Date});
}
addItemToStore = function() {
// Adds a new item to the store
// Grid should reflect the new item.
dynaStore.newItem({firstName: "firstName", lastName: "lastName",created:new Date});
}
removeProperty = function() {
var selected = grid.selection.getSelected();
for (var i = 0; i < selected.length;i++) {
dynaStore.unsetAttribute(dataModel.getRow(selected[i]).__dojo_data_item,columns[grid.focus.cell.fieldIndex].field);
}
}
addProperty = function() {
var selected = grid.selection.getSelected();
if (selected.length != 1)
return alert("You must select one item");
var item = dataModel.getRow(selected[0]).__dojo_data_item;
console.log('select index ' + selected[0]);
console.log('row ' , item);
var key = prompt("What would you like to name the new property?","property");
//var valueType = prompt("What type of value would you like?","string");
dynaStore.setValue(item,key,"new value");
dataModel.findAdditionFields([item],columns);
}
refresh = function() {
grid.refresh();
}
dataModel.findAdditionFields = function(items,columns) {
var m = this.fields._nameMaps || (this.fields._nameMaps = {});
var fields = this.fields._fields || (this.fields._fields = []);
for (var i = 0; i<items.length; i++) {
var item = items[i];
for (var j in item) {
if (j != 'id' && j != '_id' && typeof m[j] != 'number') { // if we have not accounted for this property yet
m[fields.length+".idx"] = j;
m[j] = fields.length;
fields.push({name: j, key: j});
columns.push({field:j});
}
}
}
// console.debug("new fields:", fields);
layout[1].cells[0] = columns;
grid.setStructure(layout);
this.fields.set(fields);
this.notify("FieldsChange");
}
dataModel.processRows = function(items,request) {
// this overwrites the processRows function, so that the columns be can be
// dynamically generated based on the data. Real applications will probably
// be content with a more static generation of columns (like actually
// manually typing them out in the layout).
columns = [];
this.findAdditionFields(items,columns);
// do the feault behavior now
return dojox.grid.data.DojoData.prototype.processRows.apply(this,arguments);
}
dataModel._setupFields= function(dataItem){
// this is called by the super impl of processRows, but we don't want it to do anything
}
</script>
</head>
<body class="tundra">
<h5>dojox.Grid using interactive PersevereRestStore</h5>
<div id="controls">
<button onclick="dynaStore.save()">Save</button>
<button onclick="dynaStore.revert()">Revert</button>
<button onclick="refresh()">Refresh</button>
<button onclick="addItem()">Add</button>
<button onclick="grid.removeSelectedRows()">Remove</button>
<button onclick="addProperty()">Add Property</button>
<button onclick="removeProperty()">Remove Property</button>
<!-- Testing buttons (not so good for demos) <button onclick="removeItem()">Remove (Store)</button>
<button onclick="addItemToStore()">Add (Store)</button>
<button onclick="grid.edit.apply()">Apply</button>
<button onclick="grid.edit.cancel()">Cancel</button> -->
</div>
<div id="grid" jsId="grid" dojoType="dojox.Grid" elasticView="2"
model="dataModel" structure="layout">
</div>
</body>
</html>
|
