task-manager 0.1.1

data/app/assets/javascripts/task-manager/extjs/app/view/task/Index.js

@@ -0,0 +1,21 @@
+Ext.define('TM.view.task.Index', {
+	extend: 'Ext.panel.Panel',
+	xtype: 'task_index',
+
+	requires: ['TM.view.task.Search'],
+	title: '任务管理',
+	closable: true,
+
+	// store: '',
+	layout: {
+    type: 'vbox',
+    align: 'stretch'
+  },
+
+	items: [{
+		xtype: 'task_search'
+	}, {
+		xtype: 'task_grid',
+		flex: 1
+	}]
+})

data/app/assets/javascripts/task-manager/extjs/app/view/task/Search.js

@@ -0,0 +1,148 @@
+Ext.define('TM.view.task.Search', {
+	extend: 'Ext.form.Panel',
+	xtype: 'task_search',
+
+	border: 0,
+  bodyPadding: '5 5 0',
+
+  items: [{
+    xtype: 'fieldset',
+    id: 'fieldset',
+    title: '查询',
+
+    layout: {
+      type: 'form',
+      border: 0,
+      margin: 2
+    },
+    items: [{
+      border: 0,
+      items: [{
+        layout: 'column',
+        border: 0,
+        defaults: {
+          xtype: 'textfield',
+          id: 'textfield',
+          labelAlign: 'right',
+          width: 300,
+          labelWidth: 130
+        },
+        items: [{
+          fieldLabel: '名称',
+          name: 'q[name_cont]'
+        }, {
+          fieldLabel: '类型',
+          editable: false,
+          xtype: 'combo',
+          id: 'types',
+          store: 'TM.store.Types',
+          valueField: 'value',
+          name: 'q[task_type_eq]'
+        }, {
+          fieldLabel: '状态',
+          xtype: 'combo',
+          editable: false,
+          valueField: 'value',
+          store: 'TM.store.Statuses',
+          name: 'q[status_eq]'
+        }]
+      }, {
+        layout: 'column',
+        border: 0,
+        defaults: {
+          border: 0,
+          labelAlign: 'right',
+          width: 300,
+          labelWidth: 130
+        },
+        items: [{
+          layout: 'column',
+          border: 0,
+          defaults: {
+            xtype: 'datefield',
+            id: 'datefield',
+            labelAlign: 'right',
+            width: 300,
+            labelWidth: 130
+          },
+          items: [{
+            fieldLabel: '完成时间 从',
+            format: 'Y-m-d',
+            editable: false,
+            name: 'q[finished_at_gteq]',
+            id: 'last_task'
+          }, {
+            fieldLabel: '截至时间 从',
+            format: 'Y-m-d',
+            xtype: 'datefield',
+            editable: false,
+            name: 'q[deadline_gteq]'
+          }]
+        }, {
+          layout: 'column',
+          border: 0,
+          defaults: {
+            xtype: 'datefield',
+            labelAlign: 'right',
+            width: 300,
+            labelWidth: 130
+          },
+          items: [{
+            fieldLabel: '至',
+            format: 'Y-m-d',
+            editable: false,
+            name: 'q[finished_at_lteq]'
+          }, {
+            fieldLabel: '至',
+            format: 'Y-m-d',
+            xtype: 'datefield',
+            editable: false,
+            name: 'q[deadline_lteq]'
+          }]
+        }, {
+          layout: 'hbox',
+          margin: '20 0 0 60',
+          items: [{
+            xtype: 'button',
+            formBind: true,
+            width: 60,
+            text: '查询',
+            action: 'query'
+          }, {
+            xtype: 'button',
+            margin: '0 0 0 20',
+            width: 60,
+            text: '重置',
+            action: 'reset'
+          }]
+        }]
+      }],
+    }]
+  }],
+
+  // buttons: [{
+  //   formBind: true,
+  //   width: 60,
+  //   text: '查询',
+  //   action: 'query'
+  // }, {
+  //   margin: '0 0 0 20',
+  //   width: 60,
+  //   text: '重置',
+  //   action: 'reset'
+  // }],
+
+  hasQueryParams: function() {
+    var hasParams = false;
+    Ext.Object.each(this.getValues(), function(key, value) {
+      if(value) {
+       hasParams = true;
+
+       // Break each
+       return false;
+      }
+    });
+
+    return hasParams;
+  }
+});

data/app/assets/javascripts/task-manager/extjs/lib/ux/MultiSelectablePagingGrid.js

@@ -0,0 +1,20 @@
+Ext.define('Ext.ux.MultiSelectablePagingGrid', {
+  extend: 'Ext.grid.Panel',
+  selType: 'checkboxmodel',
+  selModel: {
+    mode: 'MULTI',
+    allowDeselect: true,
+    checkOnly: true
+  },
+
+  initComponent: function() {
+    this.dockedItems = [{
+      xtype: 'pagingtoolbar',
+      store: this.store,
+      dock: 'bottom',
+      displayInfo: true
+    }];
+
+    this.callParent(arguments);
+  }
+});

data/app/assets/javascripts/task-manager/extjs/lib/ux/RowExpander.js

@@ -0,0 +1,230 @@
+// feature idea to enable Ajax loading and then the content
+// cache would actually make sense. Should we dictate that they use
+// data or support raw html as well?
+
+/**
+ * @class Ext.ux.RowExpander
+ * @extends Ext.AbstractPlugin
+ * Plugin (ptype = 'rowexpander') that adds the ability to have a Column in a grid which enables
+ * a second row body which expands/contracts.  The expand/contract behavior is configurable to react
+ * on clicking of the column, double click of the row, and/or hitting enter while a row is selected.
+ *
+ * @ptype rowexpander
+ */
+Ext.define('Ext.ux.RowExpander', {
+    extend: 'Ext.AbstractPlugin',
+
+    requires: [
+        'Ext.grid.feature.RowBody',
+        'Ext.grid.feature.RowWrap'
+    ],
+
+    alias: 'plugin.rowexpander',
+
+    rowBodyTpl: null,
+
+    /**
+     * @cfg {Boolean} expandOnEnter
+     * <tt>true</tt> to toggle selected row(s) between expanded/collapsed when the enter
+     * key is pressed (defaults to <tt>true</tt>).
+     */
+    expandOnEnter: true,
+
+    /**
+     * @cfg {Boolean} expandOnDblClick
+     * <tt>true</tt> to toggle a row between expanded/collapsed when double clicked
+     * (defaults to <tt>true</tt>).
+     */
+    expandOnDblClick: true,
+
+    /**
+     * @cfg {Boolean} selectRowOnExpand
+     * <tt>true</tt> to select a row when clicking on the expander icon
+     * (defaults to <tt>false</tt>).
+     */
+    selectRowOnExpand: false,
+
+    rowBodyTrSelector: '.x-grid-rowbody-tr',
+    rowBodyHiddenCls: 'x-grid-row-body-hidden',
+    rowCollapsedCls: 'x-grid-row-collapsed',
+
+
+
+    renderer: function(value, metadata, record, rowIdx, colIdx) {
+        if (colIdx === 0) {
+            metadata.tdCls = 'x-grid-td-expander';
+        }
+        return '<div class="x-grid-row-expander">&#160;</div>';
+    },
+
+    /**
+     * @event expandbody
+     * <b<Fired through the grid's View</b>
+     * @param {HTMLElement} rowNode The &lt;tr> element which owns the expanded row.
+     * @param {Ext.data.Model} record The record providing the data.
+     * @param {HTMLElement} expandRow The &lt;tr> element containing the expanded data.
+     */
+    /**
+     * @event collapsebody
+     * <b<Fired through the grid's View.</b>
+     * @param {HTMLElement} rowNode The &lt;tr> element which owns the expanded row.
+     * @param {Ext.data.Model} record The record providing the data.
+     * @param {HTMLElement} expandRow The &lt;tr> element containing the expanded data.
+     */
+
+    constructor: function() {
+        this.callParent(arguments);
+        var grid = this.getCmp();
+        this.recordsExpanded = {};
+        // <debug>
+        if (!this.rowBodyTpl) {
+            Ext.Error.raise("The 'rowBodyTpl' config is required and is not defined.");
+        }
+        // </debug>
+        // TODO: if XTemplate/Template receives a template as an arg, should
+        // just return it back!
+        var rowBodyTpl = Ext.create('Ext.XTemplate', this.rowBodyTpl),
+            features = [{
+                ftype: 'rowbody',
+                columnId: this.getHeaderId(),
+                recordsExpanded: this.recordsExpanded,
+                rowBodyHiddenCls: this.rowBodyHiddenCls,
+                rowCollapsedCls: this.rowCollapsedCls,
+                getAdditionalData: this.getRowBodyFeatureData,
+                getRowBodyContents: function(data) {
+                    return rowBodyTpl.applyTemplate(data);
+                }
+            },{
+                ftype: 'rowwrap'
+            }];
+
+        if (grid.features) {
+            grid.features = features.concat(grid.features);
+        } else {
+            grid.features = features;
+        }
+
+        // NOTE: features have to be added before init (before Table.initComponent)
+    },
+
+    init: function(grid) {
+        this.callParent(arguments);
+
+        // Columns have to be added in init (after columns has been used to create the
+        // headerCt). Otherwise, shared column configs get corrupted, e.g., if put in the
+        // prototype.
+        grid.headerCt.insert(0, this.getHeaderConfig());
+        grid.on('render', this.bindView, this, {single: true});
+    },
+
+    getHeaderId: function() {
+        if (!this.headerId) {
+            this.headerId = Ext.id();
+        }
+        return this.headerId;
+    },
+
+    getRowBodyFeatureData: function(data, idx, record, orig) {
+        var o = Ext.grid.feature.RowBody.prototype.getAdditionalData.apply(this, arguments),
+            id = this.columnId;
+        o.rowBodyColspan = o.rowBodyColspan - 1;
+        o.rowBody = this.getRowBodyContents(data);
+        o.rowCls = this.recordsExpanded[record.internalId] ? '' : this.rowCollapsedCls;
+        o.rowBodyCls = this.recordsExpanded[record.internalId] ? '' : this.rowBodyHiddenCls;
+        o[id + '-tdAttr'] = ' valign="top" rowspan="2" ';
+        if (orig[id+'-tdAttr']) {
+            o[id+'-tdAttr'] += orig[id+'-tdAttr'];
+        }
+        return o;
+    },
+
+    bindView: function() {
+        var view = this.getCmp().getView(),
+            viewEl;
+
+        if (!view.rendered) {
+            view.on('render', this.bindView, this, {single: true});
+        } else {
+            viewEl = view.getEl();
+            if (this.expandOnEnter) {
+                this.keyNav = Ext.create('Ext.KeyNav', viewEl, {
+                    'enter' : this.onEnter,
+                    scope: this
+                });
+            }
+            if (this.expandOnDblClick) {
+                view.on('itemdblclick', this.onDblClick, this);
+            }
+            this.view = view;
+        }
+    },
+
+    onEnter: function(e) {
+        var view = this.view,
+            ds   = view.store,
+            sm   = view.getSelectionModel(),
+            sels = sm.getSelection(),
+            ln   = sels.length,
+            i = 0,
+            rowIdx;
+
+        for (; i < ln; i++) {
+            rowIdx = ds.indexOf(sels[i]);
+            this.toggleRow(rowIdx);
+        }
+    },
+
+    toggleRow: function(rowIdx) {
+        var rowNode = this.view.getNode(rowIdx),
+            row = Ext.get(rowNode),
+            nextBd = Ext.get(row).down(this.rowBodyTrSelector),
+            record = this.view.getRecord(rowNode),
+            grid = this.getCmp();
+
+        if (row.hasCls(this.rowCollapsedCls)) {
+            row.removeCls(this.rowCollapsedCls);
+            nextBd.removeCls(this.rowBodyHiddenCls);
+            this.recordsExpanded[record.internalId] = true;
+            this.view.fireEvent('expandbody', rowNode, record, nextBd.dom);
+        } else {
+            row.addCls(this.rowCollapsedCls);
+            nextBd.addCls(this.rowBodyHiddenCls);
+            this.recordsExpanded[record.internalId] = false;
+            this.view.fireEvent('collapsebody', rowNode, record, nextBd.dom);
+        }
+    },
+
+    onDblClick: function(view, cell, rowIdx, cellIndex, e) {
+
+        this.toggleRow(rowIdx);
+    },
+
+    getHeaderConfig: function() {
+        var me                = this,
+            toggleRow         = Ext.Function.bind(me.toggleRow, me),
+            selectRowOnExpand = me.selectRowOnExpand;
+
+        return {
+            id: this.getHeaderId(),
+            width: 24,
+            sortable: false,
+            resizable: false,
+            draggable: false,
+            hideable: false,
+            menuDisabled: true,
+            cls: Ext.baseCSSPrefix + 'grid-header-special',
+            renderer: function(value, metadata) {
+                metadata.tdCls = Ext.baseCSSPrefix + 'grid-cell-special';
+
+                return '<div class="' + Ext.baseCSSPrefix + 'grid-row-expander">&#160;</div>';
+            },
+            processEvent: function(type, view, cell, recordIndex, cellIndex, e) {
+                if (type == "mousedown" && e.getTarget('.x-grid-row-expander')) {
+                    var row = e.getTarget('.x-grid-row');
+                    toggleRow(row);
+                    return selectRowOnExpand;
+                }
+            }
+        };
+    }
+});

data/app/assets/stylesheets/task-manager/application.css.scss

@@ -0,0 +1,13 @@
+/*
+ * This is a manifest file that'll be compiled into application.css, which will include all the files
+ * listed below.
+ *
+ * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
+ * or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path.
+ *
+ * You're free to add application-wide styles to this file and they'll appear at the top of the
+ * compiled file, but it's generally better to create a new file per style scope.
+ *
+ *= require_self
+ *= require ./extjs
+ */

data/app/assets/stylesheets/task-manager/extjs.css.scss

@@ -0,0 +1,43 @@
+/*
+ * This is a manifest file that'll be compiled into application.css, which will include all the files
+ * listed below.
+ *
+ * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
+ * or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path.
+ *
+ * You're free to add application-wide styles to this file and they'll appear at the top of the
+ * compiled file, but it's generally better to create a new file per style scope.
+ *
+ *= require_self
+ */
+.btn-add-icon {
+  background: url(image_path('task-manager/icons/add.png')) no-repeat;
+}
+.btn-edit-icon {
+  background: url(image_path('task-manager/icons/edit.png')) no-repeat;
+} 
+.btn-delete-icon {
+  background: url(image_path('task-manager/icons/delete.png')) no-repeat;
+} 
+table.data {
+  border: 1px solid #aaa;
+  width: 100%;
+	margin: 5px;
+	margin-left: 60px;
+  tr {
+    td.title {
+      font-weight: bold;
+      font-size: 14px;
+      border-right: 1px solid #aaa;
+      text-align: center;
+      width: 100px;
+    }
+    td.name {
+      text-align: right;
+      width: 70px;
+    }
+    td {
+      padding: 3px;
+    }
+  }
+}