[extjs.git] / extjs / examples / classic / simple-tasks / app / view / tasks / Grid.js

/**\r
 * @class SimpleTasks.view.tasks.List\r
 * @extends Ext.grid.Panel\r
 * The tasks list view.  A grid that displays a list of tasks.\r
 */\r
Ext.define('SimpleTasks.view.tasks.Grid', {\r
    extend: 'Ext.grid.Panel',\r
    xtype: 'taskGrid',\r
    requires: [\r
        'SimpleTasks.ux.DragDrop',\r
        'SimpleTasks.ux.StatusColumn',\r
        'SimpleTasks.ux.ReminderColumn',\r
        'Ext.grid.plugin.CellEditing',\r
        'Ext.grid.column.Action',\r
        'Ext.grid.column.Date',\r
        'Ext.grid.feature.Grouping',\r
        'Ext.grid.plugin.DragDrop',\r
        'Ext.ux.TreePicker'\r
    ],\r
    store: 'Tasks',\r
\r
    viewConfig: {\r
        plugins: {\r
            ptype: 'gridviewdragdrop',\r
            ddGroup: 'task',\r
            dragText: 'Drag task to change list',\r
            enableDrop: false\r
        },\r
        getRowClass: function(record, rowIndex, rowParams, store){\r
            var due = record.get('due');\r
            if(record.get('done')) {\r
                return 'tasks-completed-task';\r
            } else if(due && (due < Ext.Date.clearTime(new Date()))) {\r
                return 'tasks-overdue-task';\r
            }\r
        }\r
    },\r
\r
    dockedItems: [\r
        {\r
            xtype: 'taskForm',\r
            dock: 'top',\r
            // the grid's column headers are a docked item with a weight of 100.\r
            // giving this a weight of 101 causes it to be docked under the column headers\r
            weight: 101,\r
            bodyStyle: {\r
                'background-color': '#E4E5E7'\r
            }\r
        }\r
    ],\r
\r
    /**\r
     * @event editclick\r
     * Fires when an edit icon is clicked\r
     * @param {Ext.grid.View} view\r
     * @param {Number} rowIndex\r
     * @param {Number} colIndex\r
     * @param {Ext.grid.column.Action} column\r
     * @param {EventObject} e\r
     */\r
\r
    /**\r
     * @event deleteclick\r
     * Fires when a delete icon is clicked\r
     * @param {Ext.grid.View} view\r
     * @param {Number} rowIndex\r
     * @param {Number} colIndex\r
     * @param {Ext.grid.column.Action} column\r
     * @param {EventObject} e\r
     */\r
\r
    /**\r
     * @event edit\r
     * Fires when a record is edited using the CellEditing plugin or the statuscolumn\r
     * @param {SimpleTasks.model.Task} task     The task record that was edited\r
     */\r
\r
    /**\r
     * @event reminderselect\r
     * Fires when a reminder time is selected from the reminder column's dropdown menu\r
     * @param {SimpleTasks.model.Task} task    the underlying record of the row that was clicked to show the reminder menu\r
     * @param {String|Number} value      The value that was selected\r
     */\r
\r
    initComponent: function() {\r
        var me = this,\r
            cellEditingPlugin = Ext.create('Ext.grid.plugin.CellEditing'),\r
            groupingFeature = Ext.create('Ext.grid.feature.Grouping', {\r
                groupHeaderTpl: [\r
                    '{groupValue:this.renderDueDate}',\r
                    {\r
                        renderDueDate: me.renderDueDate\r
                    }\r
                ],\r
                enableGroupingMenu: false\r
            });\r
\r
        me.plugins = [cellEditingPlugin];\r
\r
        me.features = [groupingFeature];\r
\r
        me.columns = {\r
            defaults: {\r
                draggable: false,\r
                resizable: false,\r
                hideable: false\r
            },\r
            items: [\r
                {\r
                    xtype: 'statuscolumn',\r
                    dataIndex: 'done',\r
                    cls: 'tasks-icon-column-header tasks-done-column-header',\r
                    width: 24,\r
                    align: 'center',\r
                    menuDisabled: true,\r
                    sortable: false,\r
                    listeners: {\r
                        'checkchange': Ext.bind(me.handleCheckChange, me)\r
                    }\r
                },\r
                {\r
                    text: 'Title',\r
                    dataIndex: 'title',\r
                    flex: 1,\r
                    emptyCellText: '',\r
                    editor: {\r
                        xtype: 'textfield',\r
                        selectOnFocus: true\r
                    }\r
                },\r
                {\r
                    text: 'List',\r
                    dataIndex: 'list_id',\r
                    width: 200,\r
                    editor: {\r
                        xtype: 'treepicker',\r
                        displayField: 'name',\r
                        store: Ext.create('SimpleTasks.store.Lists', {storeId: 'Lists-TaskGrid' })\r
                    },\r
                    renderer: me.renderList\r
                },\r
                {\r
                    xtype: 'datecolumn',\r
                    text: 'Due Date',\r
                    dataIndex: 'due',\r
                    width: 100,\r
                    editor: 'datefield',\r
                    format: 'n/j/Y',\r
                    emptyCellText: ''\r
                },\r
                {\r
                    xtype: 'remindercolumn',\r
                    dataIndex: 'reminder',\r
                    cls: 'tasks-icon-column-header tasks-reminder-column-header',\r
                    width: 24,\r
                    tooltip: 'Set Reminder',\r
                    menuPosition: 'tr-br',\r
                    menuDisabled: true,\r
                    sortable: false,\r
                    emptyCellText: '',\r
                    listeners: {\r
                        select: Ext.bind(me.handleReminderSelect, me)\r
                    }\r
                },\r
                {\r
                    xtype: 'actioncolumn',\r
                    cls: 'tasks-icon-column-header tasks-edit-column-header',\r
                    width: 24,\r
                    icon: 'resources/images/edit_task.png',\r
                    iconCls: 'x-hidden',\r
                    tooltip: 'Edit',\r
                    menuDisabled: true,\r
                    sortable: false,\r
                    handler: Ext.bind(me.handleEditClick, me)\r
                },\r
                {\r
                    xtype: 'actioncolumn',\r
                    cls: 'tasks-icon-column-header tasks-delete-column-header',\r
                    width: 24,\r
                    icon: 'resources/images/delete.png',\r
                    iconCls: 'x-hidden',\r
                    tooltip: 'Delete',\r
                    menuDisabled: true,\r
                    sortable: false,\r
                    handler: Ext.bind(me.handleDeleteClick, me)\r
                }\r
            ]\r
        };\r
\r
        me.callParent(arguments);\r
\r
        cellEditingPlugin.on('edit', me.handleCellEdit, this);\r
\r
    },\r
\r
    /**\r
     * Handles a click on the edit icon\r
     * @private\r
     * @param {Ext.grid.View} gridView\r
     * @param {Number} rowIndex\r
     * @param {Number} colIndex\r
     * @param {Ext.grid.column.Action} column\r
     * @param {EventObject} e\r
     */\r
    handleEditClick: function(gridView, rowIndex, colIndex, column, e) {\r
        // Fire a "deleteclick" event with all the same args as this handler\r
        this.fireEvent('editclick', gridView, rowIndex, colIndex, column, e);\r
    },\r
\r
    /**\r
     * Handles a click on a delete icon\r
     * @private\r
     * @param {Ext.grid.View} gridView\r
     * @param {Number} rowIndex\r
     * @param {Number} colIndex\r
     * @param {Ext.grid.column.Action} column\r
     * @param {EventObject} e\r
     */\r
    handleDeleteClick: function(gridView, rowIndex, colIndex, column, e) {\r
        // Fire a "deleteclick" event with all the same args as this handler\r
        this.fireEvent('deleteclick', gridView, rowIndex, colIndex, column, e);\r
    },\r
\r
    /**\r
     * Handles a "checkchange" event on the "done" column\r
     * @private\r
     * @param {SimpleTasks.ux.StatusColumn} column\r
     * @param {Number} rowIndex\r
     * @param {Boolean} checked\r
     */\r
    handleCheckChange: function(column, rowIndex, checked) {\r
        this.fireEvent('recordedit', this.store.getAt(rowIndex));\r
    },\r
\r
    /**\r
     * Handles a "select" event on the reminder column\r
     * @private\r
     * @param {SimpleTasks.model.Task} task    the underlying record of the row that was clicked to show the reminder menu\r
     * @param {String|Number} value      The value that was selected\r
     */\r
    handleReminderSelect: function(task, value) {\r
        this.fireEvent('reminderselect', task, value);\r
    },\r
\r
    /**\r
     * Handles the CellEditing plugin's "edit" event\r
     * @private\r
     * @param {Ext.grid.plugin.CellEditing} editor\r
     * @param {Object} e                                an edit event object\r
     */\r
    handleCellEdit: function(editor, e) {\r
        this.fireEvent('recordedit', e.record);\r
    },\r
\r
    /**\r
     * Renderer for the list column\r
     * @private\r
     * @param {Number} value\r
     * @param {Object} metaData\r
     * @param {SimpleTasks.model.Task} task\r
     * @param {Number} rowIndex\r
     * @param {Number} colIndex\r
     * @param {SimpleTasks.store.Tasks} store\r
     * @param {Ext.grid.View} view\r
     */\r
    renderList: function(value, metaData, task, rowIndex, colIndex, store, view) {\r
        var listsStore = Ext.getStore('Lists'),\r
            node = value ? listsStore.getNodeById(value) : listsStore.getRoot();\r
\r
        return node.get('name');\r
    },\r
\r
    /**\r
     * Renderer for the group headers\r
     * @private\r
     * @param {Date} date\r
     */\r
    renderDueDate: function(date) {\r
        var today = Ext.Date.clearTime(new Date()),\r
            todayTime = today.getTime(),\r
            dueDateTime;\r
\r
        if(!date) {\r
            return '(No Date)';\r
        }\r
        dueDateTime = Ext.Date.clearTime(date).getTime();\r
        if(dueDateTime === todayTime) {\r
            return 'Today';\r
        }\r
        if(dueDateTime > todayTime) {\r
            if(dueDateTime === Ext.Date.add(today, Ext.Date.DAY, 1).getTime()) {\r
                // due date is current date + 1 day\r
                return 'Tomorrow';\r
            }\r
            if(dueDateTime < Ext.Date.add(today, Ext.Date.DAY, 7).getTime()) {\r
                // if the due date is less than one week in the future, return the day of the week.\r
                return Ext.Date.format(date, 'l');\r
            }\r
        } else {\r
            if(dueDateTime === Ext.Date.add(today, Ext.Date.DAY, -1).getTime()) {\r
                // due date is current date - 1 day.\r
                return 'Yesterday';\r
            }\r
            if(dueDateTime > Ext.Date.add(today, Ext.Date.DAY, -7).getTime()) {\r
                // if the due date is less than one week past, return 'Last' + the day of the week.\r
                return 'Last '+ Ext.Date.format(date, 'l');\r
            }\r
        }\r
        return date.getFullYear() === today.getFullYear() ? Ext.Date.format(date, 'D m/d') : Ext.Date.format(date, 'D m/d/Y');\r
    }\r
\r
});
Commit	Line	Data
6527f429 DM	1	/**\r
	2	* @class SimpleTasks.view.tasks.List\r
	3	* @extends Ext.grid.Panel\r
	4	* The tasks list view. A grid that displays a list of tasks.\r
	5	*/\r
	6	Ext.define('SimpleTasks.view.tasks.Grid', {\r
	7	extend: 'Ext.grid.Panel',\r
	8	xtype: 'taskGrid',\r
	9	requires: [\r
	10	'SimpleTasks.ux.DragDrop',\r
	11	'SimpleTasks.ux.StatusColumn',\r
	12	'SimpleTasks.ux.ReminderColumn',\r
	13	'Ext.grid.plugin.CellEditing',\r
	14	'Ext.grid.column.Action',\r
	15	'Ext.grid.column.Date',\r
	16	'Ext.grid.feature.Grouping',\r
	17	'Ext.grid.plugin.DragDrop',\r
	18	'Ext.ux.TreePicker'\r
	19	],\r
	20	store: 'Tasks',\r
	21	\r
	22	viewConfig: {\r
	23	plugins: {\r
	24	ptype: 'gridviewdragdrop',\r
	25	ddGroup: 'task',\r
	26	dragText: 'Drag task to change list',\r
	27	enableDrop: false\r
	28	},\r
	29	getRowClass: function(record, rowIndex, rowParams, store){\r
	30	var due = record.get('due');\r
	31	if(record.get('done')) {\r
	32	return 'tasks-completed-task';\r
	33	} else if(due && (due < Ext.Date.clearTime(new Date()))) {\r
	34	return 'tasks-overdue-task';\r
	35	}\r
	36	}\r
	37	},\r
	38	\r
	39	dockedItems: [\r
	40	{\r
	41	xtype: 'taskForm',\r
	42	dock: 'top',\r
	43	// the grid's column headers are a docked item with a weight of 100.\r
	44	// giving this a weight of 101 causes it to be docked under the column headers\r
	45	weight: 101,\r
	46	bodyStyle: {\r
	47	'background-color': '#E4E5E7'\r
	48	}\r
	49	}\r
	50	],\r
	51	\r
	52	/**\r
	53	* @event editclick\r
	54	* Fires when an edit icon is clicked\r
	55	* @param {Ext.grid.View} view\r
	56	* @param {Number} rowIndex\r
	57	* @param {Number} colIndex\r
	58	* @param {Ext.grid.column.Action} column\r
	59	* @param {EventObject} e\r
	60	*/\r
	61	\r
	62	/**\r
	63	* @event deleteclick\r
	64	* Fires when a delete icon is clicked\r
65	* @param {Ext.grid.View} view\r
66	* @param {Number} rowIndex\r
67	* @param {Number} colIndex\r
68	* @param {Ext.grid.column.Action} column\r
69	* @param {EventObject} e\r
70	*/\r
71	\r
72	/**\r
73	* @event edit\r
74	* Fires when a record is edited using the CellEditing plugin or the statuscolumn\r
75	* @param {SimpleTasks.model.Task} task The task record that was edited\r
76	*/\r
77	\r
78	/**\r
79	* @event reminderselect\r
80	* Fires when a reminder time is selected from the reminder column's dropdown menu\r
81	* @param {SimpleTasks.model.Task} task the underlying record of the row that was clicked to show the reminder menu\r
82	* @param {String\|Number} value The value that was selected\r
83	*/\r
84	\r
85	initComponent: function() {\r
86	var me = this,\r
87	cellEditingPlugin = Ext.create('Ext.grid.plugin.CellEditing'),\r
88	groupingFeature = Ext.create('Ext.grid.feature.Grouping', {\r
89	groupHeaderTpl: [\r
90	'{groupValue:this.renderDueDate}',\r
91	{\r
92	renderDueDate: me.renderDueDate\r
93	}\r
94	],\r
95	enableGroupingMenu: false\r
96	});\r
97	\r
98	me.plugins = [cellEditingPlugin];\r
99	\r
100	me.features = [groupingFeature];\r
101	\r
102	me.columns = {\r
103	defaults: {\r
104	draggable: false,\r
105	resizable: false,\r
106	hideable: false\r
107	},\r
108	items: [\r
109	{\r
110	xtype: 'statuscolumn',\r
111	dataIndex: 'done',\r
112	cls: 'tasks-icon-column-header tasks-done-column-header',\r
113	width: 24,\r
114	align: 'center',\r
115	menuDisabled: true,\r
116	sortable: false,\r
117	listeners: {\r
118	'checkchange': Ext.bind(me.handleCheckChange, me)\r
119	}\r
120	},\r
121	{\r
122	text: 'Title',\r
123	dataIndex: 'title',\r
124	flex: 1,\r
125	emptyCellText: '',\r
126	editor: {\r
127	xtype: 'textfield',\r
128	selectOnFocus: true\r
129	}\r
130	},\r
131	{\r
132	text: 'List',\r
133	dataIndex: 'list_id',\r
134	width: 200,\r
135	editor: {\r
136	xtype: 'treepicker',\r
137	displayField: 'name',\r
138	store: Ext.create('SimpleTasks.store.Lists', {storeId: 'Lists-TaskGrid' })\r
139	},\r
140	renderer: me.renderList\r
141	},\r
142	{\r
143	xtype: 'datecolumn',\r
144	text: 'Due Date',\r
145	dataIndex: 'due',\r
146	width: 100,\r
147	editor: 'datefield',\r
148	format: 'n/j/Y',\r
149	emptyCellText: ''\r
150	},\r
151	{\r
152	xtype: 'remindercolumn',\r
153	dataIndex: 'reminder',\r
154	cls: 'tasks-icon-column-header tasks-reminder-column-header',\r
155	width: 24,\r
156	tooltip: 'Set Reminder',\r
157	menuPosition: 'tr-br',\r
158	menuDisabled: true,\r
159	sortable: false,\r
160	emptyCellText: '',\r
161	listeners: {\r
162	select: Ext.bind(me.handleReminderSelect, me)\r
163	}\r
164	},\r
165	{\r
166	xtype: 'actioncolumn',\r
167	cls: 'tasks-icon-column-header tasks-edit-column-header',\r
168	width: 24,\r
169	icon: 'resources/images/edit_task.png',\r
170	iconCls: 'x-hidden',\r
171	tooltip: 'Edit',\r
172	menuDisabled: true,\r
173	sortable: false,\r
174	handler: Ext.bind(me.handleEditClick, me)\r
175	},\r
176	{\r
177	xtype: 'actioncolumn',\r
178	cls: 'tasks-icon-column-header tasks-delete-column-header',\r
179	width: 24,\r
180	icon: 'resources/images/delete.png',\r
181	iconCls: 'x-hidden',\r
182	tooltip: 'Delete',\r
183	menuDisabled: true,\r
184	sortable: false,\r
185	handler: Ext.bind(me.handleDeleteClick, me)\r
186	}\r
187	]\r
188	};\r
189	\r
190	me.callParent(arguments);\r
191	\r
192	cellEditingPlugin.on('edit', me.handleCellEdit, this);\r
193	\r
194	},\r
195	\r
196	/**\r
197	* Handles a click on the edit icon\r
198	* @private\r
199	* @param {Ext.grid.View} gridView\r
200	* @param {Number} rowIndex\r
201	* @param {Number} colIndex\r
202	* @param {Ext.grid.column.Action} column\r
203	* @param {EventObject} e\r
204	*/\r
205	handleEditClick: function(gridView, rowIndex, colIndex, column, e) {\r
206	// Fire a "deleteclick" event with all the same args as this handler\r
207	this.fireEvent('editclick', gridView, rowIndex, colIndex, column, e);\r
208	},\r
209	\r
210	/**\r
211	* Handles a click on a delete icon\r
212	* @private\r
213	* @param {Ext.grid.View} gridView\r
214	* @param {Number} rowIndex\r
215	* @param {Number} colIndex\r
216	* @param {Ext.grid.column.Action} column\r
217	* @param {EventObject} e\r
218	*/\r
219	handleDeleteClick: function(gridView, rowIndex, colIndex, column, e) {\r
220	// Fire a "deleteclick" event with all the same args as this handler\r
221	this.fireEvent('deleteclick', gridView, rowIndex, colIndex, column, e);\r
222	},\r
223	\r
224	/**\r
225	* Handles a "checkchange" event on the "done" column\r
226	* @private\r
227	* @param {SimpleTasks.ux.StatusColumn} column\r
228	* @param {Number} rowIndex\r
229	* @param {Boolean} checked\r
230	*/\r
231	handleCheckChange: function(column, rowIndex, checked) {\r
232	this.fireEvent('recordedit', this.store.getAt(rowIndex));\r
233	},\r
234	\r
235	/**\r
236	* Handles a "select" event on the reminder column\r
237	* @private\r
238	* @param {SimpleTasks.model.Task} task the underlying record of the row that was clicked to show the reminder menu\r
239	* @param {String\|Number} value The value that was selected\r
240	*/\r
241	handleReminderSelect: function(task, value) {\r
242	this.fireEvent('reminderselect', task, value);\r
243	},\r
244	\r
245	/**\r
246	* Handles the CellEditing plugin's "edit" event\r
247	* @private\r
248	* @param {Ext.grid.plugin.CellEditing} editor\r
249	* @param {Object} e an edit event object\r
250	*/\r
251	handleCellEdit: function(editor, e) {\r
252	this.fireEvent('recordedit', e.record);\r
253	},\r
254	\r
255	/**\r
256	* Renderer for the list column\r
257	* @private\r
258	* @param {Number} value\r
259	* @param {Object} metaData\r
260	* @param {SimpleTasks.model.Task} task\r
261	* @param {Number} rowIndex\r
262	* @param {Number} colIndex\r
263	* @param {SimpleTasks.store.Tasks} store\r
264	* @param {Ext.grid.View} view\r
265	*/\r
266	renderList: function(value, metaData, task, rowIndex, colIndex, store, view) {\r
267	var listsStore = Ext.getStore('Lists'),\r
268	node = value ? listsStore.getNodeById(value) : listsStore.getRoot();\r
269	\r
270	return node.get('name');\r
271	},\r
272	\r
273	/**\r
274	* Renderer for the group headers\r
275	* @private\r
276	* @param {Date} date\r
277	*/\r
278	renderDueDate: function(date) {\r
279	var today = Ext.Date.clearTime(new Date()),\r
280	todayTime = today.getTime(),\r
281	dueDateTime;\r
282	\r
283	if(!date) {\r
284	return '(No Date)';\r
285	}\r
286	dueDateTime = Ext.Date.clearTime(date).getTime();\r
287	if(dueDateTime === todayTime) {\r
288	return 'Today';\r
289	}\r
290	if(dueDateTime > todayTime) {\r
291	if(dueDateTime === Ext.Date.add(today, Ext.Date.DAY, 1).getTime()) {\r
292	// due date is current date + 1 day\r
293	return 'Tomorrow';\r
294	}\r
295	if(dueDateTime < Ext.Date.add(today, Ext.Date.DAY, 7).getTime()) {\r
296	// if the due date is less than one week in the future, return the day of the week.\r
297	return Ext.Date.format(date, 'l');\r
298	}\r
299	} else {\r
300	if(dueDateTime === Ext.Date.add(today, Ext.Date.DAY, -1).getTime()) {\r
301	// due date is current date - 1 day.\r
302	return 'Yesterday';\r
303	}\r
304	if(dueDateTime > Ext.Date.add(today, Ext.Date.DAY, -7).getTime()) {\r
305	// if the due date is less than one week past, return 'Last' + the day of the week.\r
306	return 'Last '+ Ext.Date.format(date, 'l');\r
307	}\r
308	}\r
309	return date.getFullYear() === today.getFullYear() ? Ext.Date.format(date, 'D m/d') : Ext.Date.format(date, 'D m/d/Y');\r
310	}\r
311	\r
312	});