define([
|
'dgrid/OnDemandGrid',
|
'dgrid/Selection',
|
'dgrid/Editor',
|
'dgrid/extensions/DnD',
|
'dojo/_base/declare',
|
'dojo/dom-construct',
|
'dojo/json',
|
'dojo/on',
|
'dstore/Memory',
|
'dstore/Trackable',
|
'dojo/domReady!'
|
], function (OnDemandGrid, Selection, Editor, DnD, declare, domConstruct, JSON, on, Memory, Trackable) {
|
// Create DOM
|
var container = domConstruct.create('div', { id: 'container' });
|
var itemForm = domConstruct.create('form', { className: 'actionArea topArea', id: 'itemForm' }, container);
|
var taskField = domConstruct.create('input', { id: 'txtTask', name: 'task' }, itemForm);
|
domConstruct.create('button', { innerHTML: 'add', type: 'submit' }, itemForm);
|
|
var listNode = domConstruct.create('div', { id: 'list' }, container);
|
var removeArea = domConstruct.create('div', { className: 'actionArea bottomArea' }, container);
|
var removeSelectedButton = domConstruct.create('button', { innerHTML: 'Remove Selected', type: 'button' },
|
removeArea);
|
var removeCompletedButton = domConstruct.create('button', { innerHTML: 'Remove Completed', type: 'button' },
|
removeArea);
|
|
document.body.appendChild(container);
|
|
var storeMixins = [ Memory, Trackable ];
|
|
if (window.localStorage) {
|
// add functionality for saving/recalling from localStorage
|
storeMixins.push(declare(null, {
|
STORAGE_KEY: 'dgrid_demo_todo_list',
|
|
constructor: function () {
|
var self = this;
|
var jsondata = localStorage[this.STORAGE_KEY];
|
|
jsondata && this.setData(JSON.parse(jsondata));
|
|
this.on('add, update, delete', function () {
|
localStorage[self.STORAGE_KEY] = JSON.stringify(self.fetchSync());
|
});
|
}
|
}));
|
}
|
|
var Store = declare(storeMixins);
|
|
var store = new Store({
|
idProperty: 'summary'
|
});
|
|
var grid = new (declare([OnDemandGrid, Selection, DnD, Editor]))({
|
collection: store,
|
columns: {
|
completed: {
|
editor: 'checkbox',
|
label: ' ',
|
autoSave: true,
|
sortable: false
|
},
|
summary: {
|
field: '_item', // get whole item for use by formatter
|
label: 'TODOs',
|
sortable: false,
|
formatter: function (item) {
|
return '<div' + (item.completed ? ' class="completed"' : '') +
|
'>' + item.summary + '</div>';
|
}
|
}
|
}
|
}, listNode);
|
|
on(itemForm, 'submit', function (event) {
|
event.preventDefault();
|
|
// allow overwrite if already exists (by using put, not add)
|
store.put({
|
completed: false,
|
summary: taskField.value
|
});
|
taskField.value = '';
|
});
|
|
on(removeSelectedButton, 'click', function () {
|
for (var i in grid.selection) {
|
// Each key in the selection map is the id of the item,
|
// so we can pass it directly to store.remove.
|
store.remove(i);
|
}
|
});
|
|
on(removeCompletedButton, 'click', function () {
|
// query for all completed items and remove them
|
store.filter({ completed: true }).fetch().forEach(function (item) {
|
store.remove(item[store.idProperty]);
|
});
|
});
|
|
if (window.localStorage) {
|
// add extra button to clear the localStorage key we're using
|
var button = domConstruct.create('button', {
|
innerHTML: 'Clear localStorage',
|
type: 'button'
|
}, removeArea);
|
|
on(button, 'click', function () {
|
localStorage.removeItem(store.STORAGE_KEY);
|
// remove all items in grid the quick way (no need to iteratively remove)
|
store.setData([]);
|
grid.refresh();
|
});
|
}
|
});
|
