extjs_scaffold 0.1.1

data/lib/generators/extjs_scaffold/install/templates/Actionable.js

@@ -0,0 +1,27 @@
+/**
+ * @author Mark H Winkler
+ * @mixin App.ux.data.Actionable
+ * Required use: class using App.ux.data.proxy.Rails
+ * 
+ * Adds doAction function to class - convenience method for rails proxy doAction
+ *  allowing a non rest action to be passed
+ *  to Rails (e.g. /teams/delete_all.json).
+ *
+ * The actionName must exist in the proxy under the 'addActions' config which stores 
+ *  the METHOD (GET, POST, PUT, DELETE) and Collection (true = collection or false = member)
+ * 
+ * params:
+ * actionName (string) - required - name of action added to proxy
+ * records (array) - optional - array of Model Records
+ * options (object) - optional - options to associate with action including callback
+ *
+ */
+
+Ext.define('<%= app_name %>.ux.data.Actionable', {
+	doAction: function(action, records, options) {
+		var me = this;
+		// call doAction in proxy
+		me.getProxy().doAction(action, records, options);
+		return me;
+	}
+});

data/lib/generators/extjs_scaffold/install/templates/App.js

@@ -0,0 +1,11 @@
+Ext.application({
+	name: '<%= app_name %>',
+	autoCreateViewport: false,
+	models: [],
+	stores: [],
+	controllers: [],
+	
+	launch: function() {
+		
+	}
+});

data/lib/generators/extjs_scaffold/install/templates/EditWindow.js

@@ -0,0 +1,135 @@
+/**
+ * @author Mark H Winkler
+ * @class App.ux.window.EditWindow
+ * @extends Ext.Window
+ * <p>Ext.Window modal window used for editing list detail.</p>
+*/
+Ext.define('<%= app_name %>.ux.window.EditWindow', {
+	extend: 'Ext.Window',
+	
+	/**
+ 	* Config defaults
+ 	*/
+	width: 600,
+	modal: true,
+	constrainHeader: true,
+	resizable: false,
+	closable: false,
+	
+	/**
+  * Custom Config Params
+  */
+	recordId: -3,
+	gridId: '',
+	formItemId: '',
+	model: '',
+	baseUrl: '',
+	submitDirtyOnly: true,
+	/**
+	* boolean trigger for grid load on cancel
+	* used in save and add another
+	*/
+	submitDirtyOnly: true,
+	
+	initComponent: function() {
+		var me = this;
+		me.buttons = this.buildButtons();
+		me.callParent(arguments);
+		me.addEvents(
+			/**
+       * @event afterloadrecord
+       * Fires after a blank record is loaded into the underlying form
+       * @param {Ext.window.Window} this
+       * @param {Ext.data.Model} record loaded
+       */
+      'afterloadrecord'
+		);
+		me.on('afterrender', this.loadRecord, this);
+	},
+	
+	/**
+  * set up bottom window buttons
+ 	*/
+	buildButtons: function() {
+		var me = this;
+		items = [];
+		items.push({
+        text: 'Cancel',
+				scope: me,
+        handler: me.closeWindow
+    });
+		
+		items.push({
+			text: 'Save and Close',
+			scope: me,
+      handler: me.saveRecord
+		});
+	  
+		return items;
+	},
+	
+	/**
+  * New Record (recordID < 1) loads a new model
+	* Existing Records loaded via form.load
+  */
+	loadRecord: function() {
+		var me = this;
+		var  formPanel = me.getComponent(me.formItemId);
+		if (me.recordId < 1) {
+			var newModel  = Ext.ModelManager.create({}, me.model);
+			formPanel.getForm().loadRecord(newModel);
+			// fire event and pass model
+			me.fireEvent('afterloadrecord', me, newModel);
+			return;
+		}	
+		
+		formPanel.getForm().load({
+			waitMsg: 'Loading...',
+			// rails formatting for edit record
+			url: me.baseUrl+'/'+me.recordId+'/edit.json',
+			method: 'GET',
+			failure: function(form, action) {
+				Ext.Msg.alert("Load failed", action.result.errorMessage);
+			}
+		});
+		
+	},
+	
+	/**
+     * Close window called from Cancel button
+     */
+	closeWindow: function() {
+		var me = this;
+		me.close();
+	},
+	
+	/**
+     * Calls the associated grid uses gridId config
+	 * Note that ajax failure is now handled automatically using json errors object
+     */
+	saveRecord: function() {
+		var me = this;
+		var grid = Ext.getCmp(me.gridId);
+		var formPanel = me.getComponent(me.formItemId);
+		var form = formPanel.getForm();
+		var entity = 'data';
+
+		if ( me.submitDirtyOnly ) { //don't submit form if no changes were made
+			if (!form.isDirty()) {
+				me.closeWindow();
+				return;
+			}
+		}
+		
+		if (form.isValid()) {
+			form.submit({
+ 				waitMsg: 'Saving...',
+ 				success: function(form, action) {
+					var updatedRecord = Ext.ModelManager.create(action.result[entity], me.model);
+       		grid.updateRecord(me.recordId, updatedRecord, action.result);
+					me.closeWindow();
+ 				}
+     	});
+    }
+	}
+});

data/lib/generators/extjs_scaffold/install/templates/FormPanel.js

@@ -0,0 +1,27 @@
+/**
+ * @author Mark H Winkler
+ * @class App.ux.form.Panel
+ * @extends Ext.form.Panel
+ * <p>Extends form.Panel to establish form config defaults.</p>
+*/
+Ext.define('<%= app_name %>.ux.form.Panel', {
+	extend: 'Ext.form.Panel',
+
+	bodyPadding: 5,
+
+	defaults: {
+		style: 'padding-bottom: 2px',
+		labelStyle: 'padding-right: 5px',
+		labelAlign: 'right',
+		labelWidth: 120,
+		width: 400
+	},
+
+	// The fields
+	defaultType: 'textfield',
+
+	initComponent: function() {
+		this.callParent(arguments);
+		this.getForm().trackResetOnLoad = true;
+	}
+});

data/lib/generators/extjs_scaffold/install/templates/Format.js

@@ -0,0 +1,34 @@
+/**
+ * @singleton
+ * 
+ * application wide formatting
+ *
+ */
+(function() {
+	Ext.ns('<%= app_name %>.util');
+	
+	<%= app_name %>.util.Format = {};
+	var AppUtilFormat = <%= app_name %>.util.Format;
+
+	Ext.apply(AppUtilFormat, {
+		/**
+		* Returns a date as set format - used to control application wide grid dates
+		* @return {Function} The date formatting function
+		*/
+		dateRenderer : function() {
+			return function(v) {
+				return Ext.util.Format.date(v, 'm/d/Y');
+			}
+		},
+		
+		/**
+		* Returns an image or empty string - used to control application wide grid booleans
+		* @return {Function} The boolean formatting function
+		*/
+		booleanRenderer: function() {
+			return function(v) {
+				return v ? '<img src="/images/extjs_scaffold/tick.png">' : '';
+			}
+		}
+	});	
+})();

data/lib/generators/extjs_scaffold/install/templates/GridPanel.js

@@ -0,0 +1,289 @@
+/**
+ * @author Mark H Winkler
+ * @class App.ux.grid.Panel
+ * @extends Ext.grid.Panel
+ * <p>Extends grid.Panel to establish list grid config defaults.</p>
+*/
+Ext.define('<%= app_name %>.ux.grid.Panel', {
+	extend: 'Ext.grid.Panel',
+
+	/**
+	* Config defaults
+	*/
+	multiSelect: true,
+
+	// Use a PagingGridScroller
+	verticalScrollerType: 'paginggridscroller',
+	invalidateScrollerOnRefresh: false,
+	//disableSelection: true,
+
+	enableColumnHide: false,
+	enableColumnMove: false,
+	enableColumnResize: false,
+
+	height: 600,
+	width: 800,
+
+	preventHeader: true,
+
+	style: {
+		marginTop: '10px',
+		marginBottom: '10px'
+	},
+
+	/**
+	* Custom Config Params
+	*/
+	// used in dialogs and detail form titles
+	//  entitySingular also used in editWindow.saveRecord() 
+	//  for response root (action.result[entity])
+	entitySingular: 'Record',
+	entityPlural: 'Records',
+	// edit window class used in openEditWindow()
+	editWindow: 'App.ux.window.EditWindow',
+	
+	// update window class used in openUpdateWindow()
+	updateWindow: 'App.ux.window.UpdateWindow',
+	
+	// enabling top bar buttons by default
+	enableRemoteSearch: true,
+	enableAddRecord: true,
+	enableDeleteRecord: true,
+	enableUpdateAll: true,
+	enableStoreReload: true,
+
+	// hides the bottom bar
+	hideBottomToolbar: false,
+
+	initComponent: function() {
+		this.dockedItems = this.buildDockedItems();
+		this.callParent(arguments);
+		this.on('itemdblclick', this.onDblClick, this);
+	},
+
+	/**
+	* Setup for top and bottom toolbars
+	*/
+	buildDockedItems: function() {
+		var me = this,
+			topitems = [],
+			toolbars = [];
+
+		if ( me.enableRemoteSearch ) {
+			topitems.push({ xtype: 'searchfield', store: me.store });
+			topitems.push( '-' );
+		}
+
+		if ( me.enableAddRecord ) {
+			topitems.push({ 
+				text: 'Add Record',
+				tooltip: 'Add new '+this.entitySingular,
+				iconCls: 'add',
+				scope: me,
+				handler: me.newRecord 
+			});
+			topitems.push( '-' );
+		}
+	
+		if ( me.enableDeleteRecord ) {
+			topitems.push({
+				text: 'Delete All',
+				tooltip: 'Delete selected records',
+				iconCls: 'remove',
+				scope: me,
+				handler: me.deleteRecords
+			});
+			topitems.push( '-' );
+		}
+    		
+		if ( me.enableUpdateAll ) {
+			topitems.push({
+				text: 'Update All',
+				tooltip: 'Update all selected records',
+				iconCls: 'updateall',
+				scope: me,
+				handler: me.updateAll
+			});
+			topitems.push( '-' );
+		}
+		
+		toolbars.push({
+			xtype: 'toolbar',
+			itemId: 'toptoolbar',
+		  dock: 'top',
+			items: topitems
+		});
+		
+		if (!me.hideBottomToolbar) {
+			toolbars.push({
+				xtype: 'scrollingtoolbar',
+				itemId: 'bottomtoolbar',
+				store: me.store,
+				dock: 'bottom',
+				displayInfo: true,
+				displayReload: me.enableStoreReload
+			});
+		}	
+		
+		return toolbars;
+	},
+	
+	/**
+	* Grid double click handler
+	*/
+	onDblClick: function(view, record, item, index, event, options) {
+		this.editRecord(record);
+	},
+		
+	/**
+	* Opens edit window with new record
+	* called from top toolbar Add button
+	*/
+	newRecord: function() {
+		this.openEditWindow(-3);
+	},
+	
+	/**
+	* Opens edit window with passed record
+	* called from onDblClick handler
+	*/
+	editRecord: function(record) {
+		if (record) { // edit the record
+			var recordId = record.get('id');
+			this.openEditWindow(recordId);
+		}
+	},
+	
+	/**
+	* Uses the App.ux.data.Actionable mixin to delete one or more records
+	* called from top toolbar Delete button
+	*/
+	deleteRecords: function() {
+		var me = this;
+		var records = me.getSelectionModel().getSelection();
+		if (records.length > 0) {
+			// confirm that records should be deleted
+			var entity = records.length > 1 ? me.entityPlural : me.entitySingular;
+			Ext.Msg.confirm('Warning','Do you really want to delete '+records.length+' '+entity+'. This cannot be undone!', function(btn){
+				if(btn=='yes'){
+					me.setLoading('Deleting..');
+					// call the actionable mixin in the store
+					me.getStore().doAction('destroy_all', records,
+						{
+							success: function(operation){
+								me.setLoading(false);
+								me.getStore().load();
+							},
+							failure: function(operation){
+								me.setLoading(false);
+								alert('Could not delete, changes rolled back');
+							}
+					});
+				};
+			});
+		}
+	},
+
+	/**
+	* Opens update window if records are selected
+	* called from onDblClick handler
+	*/
+	updateAll: function() {
+		var me = this;
+		var records = me.getSelectionModel().getSelection();
+		if (records.length > 0) {
+			me.openUpdateWindow(records);
+		} else {
+			alert('Please select records to update');
+		}
+	},
+	
+	/**
+	* Uses the App.ux.data.Actionable mixin to update one or more records
+	* called from App.ux.window.UpdateWindow
+	*/
+	updateAllRecords: function(records) {
+		var me = this;
+	
+		me.setLoading('Updating..');
+		// call the actionable mixin in the store
+		me.getStore().doAction('update_all', records,
+			{
+				success: function(operation){
+					me.setLoading(false);
+					for(var i=0; i < records.length; i++) {
+						records[i].commit();
+					}
+				},
+				failure: function(operation){
+					me.setLoading(false);
+					for(var i=0; i < records.length; i++) {
+						records[i].reject();
+					}
+					alert('Could not update, changes rolled back');
+				}
+		});
+	},
+	
+	/**
+	* Opens edit window with new or existing record
+	* called newRecord() and editRecord()
+	*/
+	openEditWindow: function(recordId) {
+		var me = this;
+		
+		if (me.editWindow != '') {
+			var title = recordId > 0 ? 'Update '+me.entitySingular : 'Add '+me.entitySingular;
+			var editWindow = Ext.create(me.editWindow, {
+				title: title,
+				gridId: me.id,
+				recordId: recordId
+			})
+		
+			editWindow.show();
+		}
+	},
+
+	/**
+	* Opens update window to update all
+	*/
+	openUpdateWindow: function(records) {
+		var me = this;
+		
+		if (me.updateWindow != '') {
+			var updateWindow = Ext.create(me.updateWindow, {
+				gridId: me.id,
+				selectedRecords: records
+			})
+		
+			updateWindow.show();
+		}
+	},
+
+	/**
+	* calls the App.ux.data.Updateable model mixin to update grid record with passed config 
+	* called App.ux.window.EditWindow.saveRecord()
+	*/
+	updateRecord: function(recordId, updateRecord, response) {
+		var me = this;
+
+		// add or update the edited record
+		if (recordId < 1) {
+			me.getStore().load();
+		} else {
+			var record = me.store.getById(recordId);
+			if (record) {
+				record.updateModel(updateRecord);
+			}
+		}
+	},
+	
+	/**
+	* Loads the grid store and handles the initial section completed display
+	*/
+	load: function() {
+		var me = this;
+		
+		me.store.guaranteeRange(0, 199);	
+	}
+});