AddItemWindow and updateItemWindow are generated in fly.

Add the property table.
Design the handler clone and polish the other one.
first version with all basic functionalities.

static/uijs/appvieweditgrid.js

@@ -14,7 +14,11 @@
  *   - handler associate to each operation: add, update, clone, remove
  *     They can be methods of this class !
  *
- * @extends Ext.Ajax.request
+ * @extends Ext.gridPanel
+ * @param {Object} addItemWindow configuration object
+ * @param {String} table 
+ * @param {Object} updateItemWindow configuration object
+ *  
  * @version $Id$
  */
 /**
@@ -24,6 +28,7 @@
 App.ViewEditGrid = Ext.extend(Ext.grid.GridPanel, {
 	
 	addItemWindow: '',
+	table: '',
 	updateItemWindow: '',
 	
 	initComponent: function(){
@@ -58,15 +63,55 @@ App.ViewEditGrid = Ext.extend(Ext.grid.GridPanel, {
 		
 		App.ViewEditGrid.superclass.initComponent.apply(this, arguments);
 		
+		if (!this.table.length){
+			throw new Error("The configuration parameter 'table' is not defined");
+		}
 	},
 	
-	
+	/**
+	 * hanlder to add a new item in the database
+	 */
 	addItem: function(){
+		
+		if (!(this.addItemWindow instanceof Ext.Window)){
+		
+			this.addItemWindow = Ext.ComponentMgr.create(this.addItemWindow);
+			
+			// TODO: be carefull with the adressing, use key instead ?
+			var form = this.addItemWindow.items.itemAt(0).getForm()
+			this.relayEvents(form, ['actioncomplete', 'actionfailed']);
+
+			this.addListener(
+				'actioncomplete',
+				function(form, action){
+					this.addItemWindow.hide();
+					this.getStore().load();
+				},
+				this
+			);
+
+		}
 		this.addItemWindow.show();
 	},
 	
-	cloneItem: function(){
-		Ext.MessageBox.alert('Status', 'Clone item handler not yet implemented');
+	/**
+	 * Handler to clone and existing items
+	 * Values can be modified on the flight
+	 * TODO: doen't work when several items are selectec !
+	 */
+	cloneItems: function(){
+		this.addItem();
+
+	    var nRec = this.getSelectionModel().getCount();
+        var records = this.getSelectionModel().getSelections();
+
+		// TODO: be carefull with the adressing, use key instead ?
+		var form = this.addItemWindow.items.itemAt(0).getForm();
+		
+		for (var i = 0; i < nRec; i++) {
+			this.addItemWindow.show();
+			form.loadRecord(records[i]);
+		}
 	},
 	
 	/**
@@ -81,33 +126,20 @@ App.ViewEditGrid = Ext.extend(Ext.grid.GridPanel, {
 		App.ViewEditGrid.superclass.onRender.apply(this, arguments);
 		
 		// associate handler to the top toolbar buttons
+		// TODO: be carefull with the adressing, use key instead ?
 		var btns = this.getTopToolbar().items;
 		btns.itemAt(0).on('click', this.addItem, this);
-		btns.itemAt(2).on('click', this.cloneItem, this);
-		btns.itemAt(4).on('click', this.updateItem, this); 
-		btns.itemAt(6).on('click', this.removeItem, this);
-		
-		// hide the addItemWindow and update the grid content
-		// when the AddItem request is successfull
-		var formAdd = this.addItemWindow.items.itemAt(0).getForm()
-		this.relayEvents(formAdd, ['actioncomplete', 'actionfailed']);
-		// TODO: imporve the design --> initComponent ? Handle all widget at once ?
-		this.addListener(
-			'actioncomplete',
-			function(form, action){
-				this.addItemWindow.hide();
-				this.getStore().load();
-			},
-			this
-		);
-		
+		btns.itemAt(2).on('click', this.cloneItems, this);
+		btns.itemAt(4).on('click', this.updateItems, this); 
+		btns.itemAt(6).on('click', this.removeItems, this);
+				
 	},
 	
 	/**
-	 * Handler to remove selected items
+	 * Handler to remove selected items in the database
 	 * TODO this operation required confirmation ?
 	 */
-	removeItem: function(){
+	removeItems: function(){
 				
         var ajaxRequestCfg = new App.AjaxRequest({
 			params: {
@@ -120,17 +152,54 @@ App.ViewEditGrid = Ext.extend(Ext.grid.GridPanel, {
 	    var nRec = this.getSelectionModel().getCount();
         var records = this.getSelectionModel().getSelections();
 	
+		console.log(nRec);
+		
 		for (var i = 0; i < nRec; i++) {
-			pb.updateText('Deleting record '+i+' ....');
-			ajaxRequestCfg.params.query = 'db.distributions.id=='+records[i].data.id;
+			ajaxRequestCfg.params.query = App.fieldString(this.table, 
+														  'id', 
+														  '==', 
+														  records[i].data.id);
 			Ext.Ajax.request(ajaxRequestCfg);
 		}
 		
+		// TODO: update of the form can't be here since ajax is asynchronous !!
 		this.getStore().load();
 	},
 	
-	updateItem: function(){
-		Ext.MessageBox.alert('Status', 'Update item handler not yet implemented');		
+	/**
+	 * Handler to update select items in the database
+	 */
+	updateItems: function(){
+
+		if (!(this.updateItemWindow instanceof Ext.Window)){
+		
+			this.updateItemWindow = Ext.ComponentMgr.create(this.updateItemWindow);
+			
+			// TODO: be carefull with the adressing, use key instead ?
+			var form = this.updateItemWindow.items.itemAt(0).getForm()
+			this.relayEvents(form, ['actioncomplete', 'actionfailed']);
+
+			this.addListener(
+				'actioncomplete',
+				function(form, action){
+					this.updateItemWindow.hide();
+					this.getStore().load();
+				},
+				this
+			);
+
+		}
+
+	    var nRec = this.getSelectionModel().getCount();
+        var records = this.getSelectionModel().getSelections();
+
+		// TODO: be carefull with the adressing, use key instead ?
+		var form = this.updateItemWindow.items.itemAt(0).getForm();
+		
+		for (var i = 0; i < nRec; i++) {
+			this.updateItemWindow.show();
+			form.loadRecord(records[i]);
+		}
 	}
 	
 });
\ No newline at end of file