[icinga-checkins] icinga.org: icinga-web/master: * CronkBuilder form enhancements

git at icinga.org git at icinga.org
Wed Jan 5 12:18:18 CET 2011


Module: icinga-web
Branch: master
Commit: 3dc755589408ade43946891daff443c171077f42
URL:    https://git.icinga.org/?p=icinga-web.git;a=commit;h=3dc755589408ade43946891daff443c171077f42

Author: Marius Hein <marius.hein at netways.de>
Date:   Tue Jan  4 12:31:46 2011 +0100

* CronkBuilder form enhancements

---

 app/modules/Cronks/lib/js/CronkBuilder.js |   97 +++++++++++++++++++++--------
 app/modules/Cronks/lib/js/Tabhelper.js    |    1 +
 2 files changed, 73 insertions(+), 25 deletions(-)

diff --git a/app/modules/Cronks/lib/js/CronkBuilder.js b/app/modules/Cronks/lib/js/CronkBuilder.js
index 20851e8..06b8cd8 100644
--- a/app/modules/Cronks/lib/js/CronkBuilder.js
+++ b/app/modules/Cronks/lib/js/CronkBuilder.js
@@ -56,6 +56,8 @@ Ext.extend(Cronk.util.CronkBuilder, Ext.Window, {
 		
 		this.paramGrid = this._paramGrid();
 		
+		this.iconCombo = this._iconCombo();
+		
 		this.formPanel = this._buildForm();
 		
 		this.action = new Cronk.util.form.action.CronkBuilderCustom(this.formPanel.getForm(), {
@@ -66,6 +68,11 @@ Ext.extend(Cronk.util.CronkBuilder, Ext.Window, {
 				this.fireEvent('writeSuccess');
 				AppKit.notifyMessage(_('CronkBuilder'), String.format(_('Cronk "{0}" successfully written to database!'), this.formPanel.getForm().findField('name').getValue()))
 			},
+			failure: function(form, action) {
+				if (action.failureType == Ext.form.Action.CLIENT_INVALID) {
+					AppKit.notifyMessage(_('Error'), _('Please fill out required fields (marked with an exclamation mark)'));
+				}
+			},
 			scope: this
 		}, this.paramGrid);
 
@@ -143,7 +150,7 @@ Ext.extend(Cronk.util.CronkBuilder, Ext.Window, {
 	        '</div></tpl>'
 	    );
 	    
-	    return new Ext.form.ComboBox({
+	    var combo = new Ext.form.ComboBox({
     		xtype: 'combo',
     		store: iconStore,
     		displayField: 'name',
@@ -160,6 +167,12 @@ Ext.extend(Cronk.util.CronkBuilder, Ext.Window, {
     		name: 'image',
     		fieldLabel: _('Image')
     	});
+    	
+    	combo.on('select', function() {
+    		this.refreshIconPreview();
+    	}, this);
+    	
+    	return combo;
 	},
 	
 	_paramGrid : function() {
@@ -268,7 +281,10 @@ Ext.extend(Cronk.util.CronkBuilder, Ext.Window, {
 			        	name: 'cid',
 			        	fieldLabel: _('Cronk Id'),
 			        	readOnly: true,
-			        	allowBlank: false
+			        	allowBlank: false,
+			        	style: {
+			        		background: '#CF6'
+			        	}
 			        }
 			        /*, {
 			        	xtype: 'checkbox',
@@ -292,29 +308,30 @@ Ext.extend(Cronk.util.CronkBuilder, Ext.Window, {
 		        		store: this.categories,
 		        		valueField: 'title',
 		        		displayField: 'title',
-		        		msgTarget: 'side',
-		        		tbar: [{
-		        			text: _('Add'),
-		        			iconCls: 'icinga-icon-add',
-		        			handler: function(b, e) {
-		        				var c = this.categories;
-		        				
-		        				Ext.MessageBox.prompt(_('Add'), _('Add new category'), function(btn, text) {
-				    				if (!Ext.isEmpty(text)) {
-										var r = new c.recordType({
-											title: text,
-											visible: true,
-											position: 0,
-											active: false
-										});
-										
-										c.add(r);
-									}
-			        			}, this);
-		        			},
-		        			scope: this
+		        		msgTarget: 'side'
+		        	}, {
+		        		xtype: 'button',
+	        			text: _('Add'),
+	        			iconCls: 'icinga-icon-add',
+	        			fieldLabel: _('New category'),
+	        			handler: function(b, e) {
+	        				var c = this.categories;
+	        				
+	        				Ext.MessageBox.prompt(_('Add'), _('Add new category'), function(btn, text) {
+			    				if (!Ext.isEmpty(text)) {
+									var r = new c.recordType({
+										title: text,
+										visible: true,
+										position: 0,
+										active: false
+									});
+									
+									c.add(r);
+								}
+		        			}, this);
+	        			},
+	        			scope: this
 		        		}]
-		        	}]
 		        }, {
 		        	xtype: 'fieldset',
 		        	title: _('Share your Cronk'),
@@ -360,7 +377,11 @@ Ext.extend(Cronk.util.CronkBuilder, Ext.Window, {
 		    		xtype: 'fieldset',
 		    		title: _('Image'),
 		    		defaults: { msgTarget: 'side' },
-		    		items: this._iconCombo()
+		    		items: [this.iconCombo, {
+		    			xtype: 'panel',
+		    			border: false,
+		    			id: this.id + '-panel-icon-preview'
+		    		}]
 		    	}, {
 		    		xtype: 'fieldset',
 		    		title: _('Parameters'),
@@ -411,14 +432,17 @@ Ext.extend(Cronk.util.CronkBuilder, Ext.Window, {
 		
 		var fParameters = Ext.getCmp(this.id + '-fieldset-parameters');
 		var fAgaviSettings = Ext.getCmp(this.id + '-fieldset-agavi-settings');
+		var fCronkId = this.formPanel.getForm().findField('cid');
 		
 		if (show == true) {
 			fParameters.show();
 			fAgaviSettings.show();
+			fCronkId.show();
 		}
 		else {
 			fParameters.hide();
 			fAgaviSettings.hide();
+			fCronkId.hide();
 		}
 	},
 	
@@ -456,6 +480,8 @@ Ext.extend(Cronk.util.CronkBuilder, Ext.Window, {
 			if (cronkFrame && cronkFrame.stateful && cronkFrame.getState()) {
 				form.findField('state').setValue(Ext.encode(cronkFrame.getState()));
 			}
+			
+			this.refreshIconPreview();
 		}
 	},
 	
@@ -478,6 +504,7 @@ Ext.extend(Cronk.util.CronkBuilder, Ext.Window, {
 		
 		this.paramGrid.setSource(Ext.isObject(o['ae:parameter']) ? o['ae:parameter'] : {});
 		
+		this.refreshIconPreview();
 	},
 	
 	resetForm : function() {
@@ -489,6 +516,26 @@ Ext.extend(Cronk.util.CronkBuilder, Ext.Window, {
 			catch (e) {}
 		});
 		this.paramGrid.setSource({});
+	},
+	
+	refreshIconPreview : function() {
+		
+		var panel = Ext.getCmp(this.id + '-panel-icon-preview');
+		
+		if (panel.getEl().last()) {
+			panel.getEl().last().remove();
+		}
+		
+		var index = this.iconCombo.getStore().findExact('short', this.iconCombo.getValue());
+		
+		if (index>=0) {
+			var record = this.iconCombo.getStore().getAt(index);
+			
+			panel.getEl().insertFirst({
+				tag: 'img',
+				src: record.data.web_path
+			});
+		}
 	}
 	
 });
diff --git a/app/modules/Cronks/lib/js/Tabhelper.js b/app/modules/Cronks/lib/js/Tabhelper.js
index 65dd055..3c69cb2 100755
--- a/app/modules/Cronks/lib/js/Tabhelper.js
+++ b/app/modules/Cronks/lib/js/Tabhelper.js
@@ -158,6 +158,7 @@ Cronk.util.CronkTabHelper = Ext.extend(Object, {
 					}
 				}, {
 					text: _("Settings"),
+					iconCls: 'icinga-icon-cog',
 					menu: [{
 						text: _("Save Cronk"),
 						tooltip: _("Save this view as new cronk"),





More information about the icinga-checkins mailing list