extjs_scaffold 0.1.1

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

@@ -0,0 +1,39 @@
+/**
+ * @author Mark H Winkler
+ * @class App.ux.form.field.ParentCombo
+ * @extends Ext.form.field.ComboBox
+ * <p>Extends ComboBox to create a base class for parent 
+ * record associations in detail forms. Uses valueField = 'id', displayField = 'name</p>
+ * <pre><code>
+		Ext.create('Ext.form.Panel', {
+			items: [{
+				xtype: 'parentcombo',
+				store: Ext.data.StoreManager.lookup('store')
+			}]
+		});
+
+		Ext.create('App.ux.form.field.ParentCombo', {
+    	store: Ext.data.StoreManager.lookup('store')
+		});
+		</code></pre>
+*/
+Ext.define('<%= app_name %>.ux.form.field.ParentCombo', {
+	extend: 'Ext.form.field.ComboBox',
+	alias: 'widget.parentcombo',
+
+	valueField: 'id',
+	displayField:'name',
+	typeAhead: false,
+	selectOnFocus: true,
+	loadingText: 'Searching...',
+	hideTrigger:true,
+	forceSelection: true,
+	allowBlank: true,
+	minChars: 2,
+	lazyRender: true,
+	emptyText: 'type at least 2 characters from name',
+	width: 350,
+	listWidth: 350,
+	listClass: 'x-combo-list-small',
+	triggerClass:'x-form-search-trigger'
+});

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

@@ -0,0 +1,162 @@
+/**
+ * @author Mark H Winkler
+ * @class App.ux.data.proxy.Rails
+ * @extends Ext.data.proxy.Rest
+ * 
+ * Rails proxy extends Rest proxy to allow non-rest actions to be used.
+ * Example: 
+ *   POST /teams/delete_all.json (collection)
+ *   POST /teams/1/send_note.json (member)
+ */
+Ext.define('<%= app_name %>.ux.data.proxy.Rails', {
+	extend: 'Ext.data.proxy.Rest',
+	alias : 'proxy.rails',
+
+	/**
+	* @config: addActions
+	* config of allowed actions
+	* 
+	* addActions: {
+	*		destroy_all: {
+	*			method: 'POST',
+	*			collection: true
+	*		}
+	* }
+	*/
+	addActions: {},
+
+	/**
+	* @function: doAction(action, records, options)
+	* allows a non rest action to be passed
+	*  to Rails (e.g. /teams/delete_all.json).
+	*
+	* The format and fields sent are determined in the proxy writer.
+	*  the following will send .json => player [{id: 1},{id:2}]
+	*		writer: {
+	*			type: 'json',
+	*			root: 'player',
+	*			encode: true,
+	*			writeAllFields: false,
+	*			allowSingle: false
+	*		}
+	*
+	* 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)
+	* 
+	* When collection = false the record id is sent in query string: /teams/1/change_something.json
+	*
+	* params:
+	* action (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
+	*
+	*/
+	doAction: function(action, records, options) {
+		// create options object if not passed
+		options = Ext.apply({}, options);
+		
+		// declare config vars
+		var me = this,
+		scope  = options.scope || me,
+		operation,
+		callback;
+		
+		// create records array if not passed
+		records = records || [];
+		
+		// concat params into options object
+		Ext.apply(options, {
+			records: records,
+			action : action
+		});
+
+		// create a new operation to send to the proxy
+		operation = Ext.create('Ext.data.Operation', options);
+		
+		// create a callback chain for the action
+		callback = function(operation) {
+			if (operation.wasSuccessful()) {
+				Ext.callback(options.success, scope, [operation]);
+			} else {
+				Ext.callback(options.failure, scope, [operation]);
+			}
+			Ext.callback(options.callback, scope, [operation]);
+		};
+		
+		// call doRequest
+		me.doRequest(operation, callback, me);
+		return me;
+	},
+	
+	/**
+	* @function: getActionMethod(request)
+	* Returns the method from addActions config
+	* called from getMethod
+	*/
+	getActionMethod: function(request) {
+		var action = this.addActions[request.action];
+		if (action) {
+			return action['method'] || 'POST';
+		}
+		return null;
+	},
+	
+	/**
+	* Extending Ext.data.proxy.Ajax.getMethod() to return addActions
+	*/
+	getMethod: function(request) {
+		return this.callParent(arguments) || this.getActionMethod(request);
+	},
+
+	/**
+	* Overriding buildUrl - incorporates the {@link #appendId} and {@link #format} options from Rest proxy
+	* uses addActions object to append custom actions sent to controller
+	* cache buster string from Server proxy is appended instead of calling parent
+	*/
+	buildUrl: function(request) {
+		var me = this,
+		operation = request.operation,
+		records = operation.records || [],
+		record = records[0],
+		format = me.format,
+		url = me.getUrl(request),
+		id = record ? record.getId() : operation.id;
+		
+		// clear id if addActions type is collection
+		if (me.addActions[request.action]) {
+			if (me.addActions[request.action].collection) {
+				id = null;
+			}
+		}
+
+		if (me.appendId && id) {
+			if (!url.match(/\/$/)) {
+				url += '/';
+			}
+			url += id;
+		}
+
+		// if part of custom actions, add to url
+		if (me.addActions[request.action]) {
+			if (!url.match(/\/$/)) {
+				url += '/';
+			}
+			url += request.action;
+		} 
+		
+		if (format) {
+			if (!url.match(/\.$/)) {
+				url += '.';
+			}
+			url += format;
+		}
+
+		request.url = url;
+		
+		// adding cache buster string from Ext.data.proxy.Server
+		if (me.noCache) {
+			url = Ext.urlAppend(url, Ext.String.format("{0}={1}", me.cacheString, Ext.Date.now()));
+		}
+		return url;
+	}
+});

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

@@ -0,0 +1,170 @@
+/**
+ * @author Mark H Winkler
+ * @class App.ux.toolbar.Scrolling
+ * @extends Ext.toolbar.Toolbar
+ * <p>Extends toolbar.Toolbar</p>
+ * <p>Stripped down version of Ext.toolbar.Paging that shows total recs from store</p>
+*/
+Ext.define('<%= app_name %>.ux.toolbar.Scrolling', {
+	extend: 'Ext.toolbar.Toolbar',
+	alias: 'widget.scrollingtoolbar',
+	requires: ['Ext.toolbar.TextItem'],
+	/**
+	* @cfg {String} displayMsg
+	* The paging status message to display
+	*/
+	displayMsg : 'Total: {0}',
+	/**
+	* @cfg {String} emptyMsg
+	* The message to display when no records are found (defaults to 'No data to display')
+	*/
+	emptyMsg : 'No data to display',
+	/**
+	* @cfg {String} refreshText
+	* The quicktip text displayed for the Refresh button (defaults to <tt>'Refresh'</tt>).
+	* <b>Note</b>: quick tips must be initialized for the quicktip to show.
+*/
+	refreshText : 'Refresh',
+	/**
+	* @cfg {boolean} displayReload
+	* add reload button to toolbar
+*/
+	displayReload: false,
+
+	initComponent : function(){
+		var me = this;
+		me.items = [];
+
+		if (me.displayReload) {
+			me.items.push({
+				tooltip: 'Refresh',
+				iconCls: 'x-tbar-loading',
+				scope: me,
+				handler: me.reload
+			});
+		}
+
+		if (me.displayInfo) {
+			me.items.push('->');
+			me.items.push({xtype: 'tbtext', itemId: 'displayItem'});
+		}
+
+		me.callParent();
+
+		me.on('afterlayout', me.onLoad, me, {single: true});
+
+		me.bindStore(me.store || 'ext-empty-store', true);
+	},
+
+	// private
+	updateInfo : function(){
+		var me = this,
+		displayItem = me.child('#displayItem'),
+		store = me.store,
+		totalCount = store.getTotalCount();
+
+		if (displayItem) {
+			count = store.getCount();
+			if (count === 0) {
+				msg = me.emptyMsg;
+			} else {
+				msg = Ext.String.format(
+					me.displayMsg,
+					totalCount
+				);
+			}
+			displayItem.setText(msg);
+			me.doComponentLayout();
+		}
+	},
+
+	// private
+	onLoad : function(){
+		var me = this;
+
+		if (!me.rendered) {
+			return;
+		}
+		me.updateInfo();
+	},
+
+	// private
+	onLoadError : function(){
+		if (!this.rendered) {
+			return;
+		}
+		this.child('#refresh').enable();
+	},
+
+	/**
+	* Refresh the current page, has the same effect as clicking the 'refresh' button.
+	*/
+	// doRefresh : function(){
+	//      var me = this,
+	//          current = me.store.currentPage;
+	//      
+	//      if (me.fireEvent('beforechange', me, current) !== false) {
+	//          me.store.loadPage(current);
+	//      }
+	//  },
+
+	/**
+	* Binds the paging toolbar to the specified {@link Ext.data.Store}
+	* @param {Ext.data.Store} store The store to bind to this toolbar
+	* @param {Boolean} initial (Optional) true to not remove listeners
+	*/
+	bindStore : function(store, initial){
+		var me = this;
+
+		if (!initial && me.store) {
+			if (store !== me.store && me.store.autoDestroy) {
+				me.store.destroy();
+			} else {
+				me.store.un('load', me.onLoad, me);
+				me.store.un('exception', me.onLoadError, me);
+			}
+			if (!store) {
+				me.store = null;
+			}
+		}
+		if (store) {
+			store = Ext.data.StoreManager.lookup(store);
+			store.on({
+				scope: me,
+				load: me.onLoad,
+				exception: me.onLoadError
+			});
+		}
+		me.store = store;
+	},
+
+	// private
+	onDestroy : function(){
+		this.bindStore(null);
+		this.callParent();
+	},
+
+	updateTotal: function(total){
+		var me = this,
+			displayItem = me.child('#displayItem');
+
+		if (displayItem) {
+			count = total;
+			if (count === 0) {
+				msg = me.emptyMsg;
+			} else {
+				msg = Ext.String.format(
+					me.displayMsg,
+					count
+				);
+			}
+			displayItem.setText(msg);
+			me.doComponentLayout();
+		}
+	},
+
+	reload: function() {
+		var me = this;
+		me.store.load();
+	}
+});

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

@@ -0,0 +1,104 @@
+/**
+ * @author Adapted from Ext.ux.form.SearchField example
+ * http://www.sencha.com/
+ * @class App.ux.form.field.SearchField
+ * @extends Ext.form.field.Trigger
+ * <p>Extends Triggers with an assoicated data store,
+ * passing the entered text as an extra parameter to the store
+ * For example:</p>
+ * <pre><code>
+		Ext.create('Ext.grid.Panel', {
+			dockedItems: [{
+				xtype: 'toolbar',
+				dock: 'top',
+				items: [{
+					xtype: 'searchfield',
+					store: Ext.data.StoreManager.lookup('store')
+					}]
+			}]
+		});
+
+		Ext.create('App.ux.form.field.SearchField', {
+			store: Ext.data.StoreManager.lookup('store')
+		});
+	</code></pre>
+*/
+Ext.define('<%= app_name %>.ux.form.field.SearchField', {
+	extend: 'Ext.form.field.Trigger',
+	alias: 'widget.searchfield',
+
+	trigger1Cls: 'x-form-clear-trigger',
+	trigger2Cls: 'x-form-search-trigger',
+
+	emptyText: '',
+	width: 180,
+
+	/**
+	* @cfg {store} store
+	* The associated data store to receive query
+	*/
+	store: '',
+
+	/**
+	* @cfg {String} queryParam
+	* The query param name sent to store
+	* (defaults to <tt>query</tt>)
+	*/
+	queryParam: 'query',
+
+	initComponent: function(){
+		this.callParent(arguments);
+		this.on('specialkey', this.checkEnterKey, this);
+	},
+
+	onRender: function() {
+		this.callParent(arguments);
+		this.triggerEl.elements[0].setDisplayed('none');
+	},
+
+	// Handle enter key presses, execute the search if the field has a value
+	checkEnterKey: function(field, e) {
+		var value = this.getValue();
+		if (e.getKey() === e.ENTER) {
+			this.search();
+		}
+	},
+
+	onTrigger2Click: function() {
+		this.search();
+	},
+
+	onTrigger1Click: function() {
+		this.clearSearch();
+	},
+
+	search: function() {
+		var me = this;
+		me.triggerEl.elements[0].setDisplayed('block');
+		var v = this.getRawValue();
+		if (v.length < 1){
+			me.clearSearch();
+			return;
+		}
+		if (me.store) {
+			var query = {}
+			query[me.queryParam] = v;
+			Ext.apply(me.store.proxy.extraParams, query); 
+			me.store.load();
+		}
+		me.doComponentLayout();
+	},
+
+	clearSearch: function() {
+		var me = this;
+		me.triggerEl.elements[0].setDisplayed('none');
+		me.setValue('');
+		if (me.store) {
+			var query = {}
+			query[me.queryParam] = '';
+			Ext.apply(me.store.proxy.extraParams, query); 
+			me.store.load();
+		}
+		me.doComponentLayout();
+	}
+});