--- /dev/null
+<html>\r
+<head>\r
+ <title>The source code</title>\r
+ <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />\r
+ <script type="text/javascript" src="../resources/prettify/prettify.js"></script>\r
+</head>\r
+<body onload="prettyPrint();">\r
+ <pre class="prettyprint lang-js">Ext.BLANK_IMAGE_URL = 'images/s.gif';\r
+ \r
+Task = Ext.data.Record.create([\r
+ {name: 'taskId', type:'string'},\r
+ {name: 'title', type:'string'},\r
+ {name: 'category', type:'string'},\r
+ {name: 'description', type:'string'},\r
+ {name: 'dueDate', type:'date', dateFormat: 'Y-m-d H:i:s'},\r
+ {name: 'completed', type:'boolean'}\r
+]);\r
+\r
+Task.nextId = function(){\r
+ // if the time isn't unique enough, the addition \r
+ // of random chars should be\r
+ var t = String(new Date().getTime()).substr(4);\r
+ var s = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';\r
+ for(var i = 0; i < 4; i++){\r
+ t += s.charAt(Math.floor(Math.random()*26));\r
+ }\r
+ return t;\r
+}\r
+\r
+// The main grid's store\r
+TaskStore = function(conn){\r
+ TaskStore.superclass.constructor.call(this, {\r
+ sortInfo:{field: 'dueDate', direction: "ASC"},\r
+ groupField:'dueDate',\r
+ taskFilter: 'all',\r
+ reader: new Ext.data.JsonReader({\r
+ idProperty: 'taskId'\r
+ }, Task)\r
+ });\r
+\r
+ this.proxy = new Ext.data.SqlDB.Proxy(conn, 'task', 'taskId', this);\r
+\r
+ if(window.google){ // google needs the table created\r
+ this.proxy.on('beforeload', this.prepareTable, conn);\r
+ }\r
+\r
+ this.addEvents({newcategory: true});\r
+};\r
+\r
+Ext.extend(TaskStore, Ext.data.GroupingStore, {\r
+ applyFilter : function(filter){\r
+ if(filter !== undefined){\r
+ this.taskFilter = filter;\r
+ }\r
+ var value = this.taskFilter;\r
+ if(value == 'all'){\r
+ return this.clearFilter();\r
+ }\r
+ return this.filterBy(function(item){\r
+ return item.data.completed === value;\r
+ });\r
+ },\r
+\r
+ addTask : function(data){\r
+ this.suspendEvents();\r
+ this.clearFilter();\r
+ this.resumeEvents();\r
+ this.loadData([data], true);\r
+ this.suspendEvents();\r
+ this.applyFilter();\r
+ this.applyGrouping(true);\r
+ this.resumeEvents();\r
+ this.fireEvent('datachanged', this);\r
+ this.fireEvent('newcategory', data.category);\r
+ },\r
+\r
+ prepareTable : function(){\r
+ try{\r
+ this.createTable({\r
+ name: 'task',\r
+ key: 'taskId',\r
+ fields: Task.prototype.fields\r
+ });\r
+ }catch(e){console.log(e)}\r
+ }\r
+});\r
+\r
+// The store for Categories\r
+CategoryStore = function(){\r
+ CategoryStore.superclass.constructor.call(this, {\r
+ expandData: true,\r
+ data: [],\r
+ fields:[{name: 'text', type:'string'}],\r
+ sortInfo:{field:'text', direction:'ASC'},\r
+ id: 0\r
+ });\r
+}\r
+\r
+Ext.extend(CategoryStore, Ext.data.ArrayStore, {\r
+ init : function(store){\r
+ var cats = store.collect('category', false, true);\r
+ this.loadData(cats);\r
+ },\r
+\r
+ addCategory : function(cat){\r
+ if(cat && this.indexOfId(cat) === -1){\r
+ this.clearFilter(true);\r
+ this.loadData([cat], true);\r
+ this.applySort();\r
+ }\r
+ }\r
+});\r
+\r
+// Grid column plugin that does the complete/active button in the left-most column\r
+CompleteColumn = function(){\r
+ var grid;\r
+\r
+ function getRecord(t){\r
+ var index = grid.getView().findRowIndex(t);\r
+ return grid.store.getAt(index);\r
+ }\r
+\r
+ function onMouseDown(e, t){\r
+ if(Ext.fly(t).hasClass('task-check')){\r
+ e.stopEvent();\r
+ var record = getRecord(t);\r
+ record.set('completed', !record.data.completed);\r
+ grid.store.applyFilter();\r
+ }\r
+ }\r
+\r
+ function onMouseOver(e, t){\r
+ if(Ext.fly(t).hasClass('task-check')){\r
+ Ext.fly(t.parentNode).addClass('task-check-over');\r
+ }\r
+ }\r
+\r
+ function onMouseOut(e, t){\r
+ if(Ext.fly(t).hasClass('task-check')){\r
+ Ext.fly(t.parentNode).removeClass('task-check-over');\r
+ }\r
+ }\r
+\r
+ Ext.apply(this, {\r
+ width: 22,\r
+ header: '<div class="task-col-hd"></div>',\r
+ menuDisabled:true,\r
+ fixed: true,\r
+ id: 'task-col',\r
+ renderer: function(){\r
+ return '<div class="task-check"></div>';\r
+ },\r
+ init : function(xg){\r
+ grid = xg;\r
+ grid.on('render', function(){\r
+ var view = grid.getView();\r
+ view.mainBody.on('mousedown', onMouseDown);\r
+ view.mainBody.on('mouseover', onMouseOver);\r
+ view.mainBody.on('mouseout', onMouseOut);\r
+ });\r
+ }\r
+ });\r
+};</pre> \r
+</body>\r
+</html>
\ No newline at end of file
git.ithinksw.org / extjs.git / blobdiff