New design using the ViewEditGrid object.

static/uijs/vieweditdistributions.js

@@ -12,12 +12,6 @@ Ext.onReady(function(){
 
     Ext.QuickTips.init();
 
-	var grid1 = new App.ViewEditGrid({
-		
-	});
-
-/*
-
     // define the datastore to fill the grid
     var mystore = new Ext.data.JsonStore({
         baseParams: {
@@ -39,113 +33,45 @@ Ext.onReady(function(){
         {header: "Date", width: 20, sortable: true, dataIndex: 'date'}
     ]);
 
-	// define the entry form associated to the row
-	var form3 = new App.EntryForm({
-        table: 'distributions',
-		closeAction: 'hide',
-        items: [{
-            fieldLabel: 'Version',
-            name: 'version',
-            allowBlank:false
-        }, {
-			xtype: 'datefield',
-            fieldLabel: 'Date',
-            name: 'date',
-            format:'Y-m-d'
-        }, {
-			xtype: 'textarea',
-            fieldLabel: 'Note',
-            name: 'note',
-            grow: true
-        }]
-    });
-
-    // create the window housing the new entry form
-	 var win3 = new Ext.Window({
-		id: 'mywin3',
+	// define the new entry form and associate window
+	 var win1 = new Ext.Window({
         layout: 'fit',
         width: 500,
         height: 300,
         closeAction:'hide',
         plain: true,
 		title: 'New distribution record...',
-        items: form3
+        items: [{
+			xtype: 'appentryform',
+	        table: 'distributions',
+			closeAction: 'hide',
+	        items: [{
+		            fieldLabel: 'Version',
+		            name: 'version',
+		            allowBlank:false
+		        }, {
+					xtype: 'datefield',
+		            fieldLabel: 'Date',
+		            name: 'date',
+		            format:'Y-m-d'
+		        }, {
+					xtype: 'textarea',
+		            fieldLabel: 'Note',
+		            name: 'note',
+		            grow: true
+	        }]
+	    }]
       });
-
-	// define the grid with all buttons, menus, .....
-    var grid3 = new Ext.grid.GridPanel({
-
+	
+	// create the grid
+	var grid1 = new App.ViewEditGrid({
+		addItemWindow: win1,
         store: mystore,
-        cm: mymodel,
-        id: 'mygrid3',
-        viewConfig: {forceFit: true},
-
-        // inline toolbars
-        tbar:[{
-            text:'Add',
-            tooltip:'Add a new row',
-            iconCls:'add',
-			handler: function(){win3.show();}
-        }, '-', {
-            text:'Clone',
-            tooltip:'Clone selected items',
-            iconCls:'option'
-        }, '-', {
-            text:'Update',
-            tooltip:'Update selected items',
-            iconCls:'option'
-        }],
-
-        frame: true,
-        autoExpandColumn: 'note',
-
-        listeners: {
-            actioncomplete: function (form, action){
-                console.log("action complete !!");
-                grid3.getStore().load();
-                Ext.ComponentMgr.get('mywin3').hide();
-            }
-        },
-
-        width: 600,
-        height: 300,
+        colModel: mymodel,
         title: 'Distributions',
-        iconCls: 'icon-grid',
-        renderTo: document.body
-    });
-
-    // relay events
-    //grid3.relayEvents(form3, ['actioncomplete', 'actionfailed'])
+	});
 	
-    // Create the delete button and the relate action
-    grid3.getTopToolbar().addButton({
-        text: 'Remove',
-        handler: function(){
-            len = grid3.getSelectionModel().getCount();
-            records = grid3.getSelectionModel().getSelections();
-            for(var i=0; i<len; i++){
-                console.log("Record "+records[i].data.id)
-                ar = new App.AjaxRequest({
-                    params: {
-                        'service': 'delete',
-                        'query': 'db.distributions.id=='+records[i].data.id,
-                        'debug': 'true'
-                    },
-                    success: function(response, options){
-                        resp = Ext.util.JSON.decode(response.responseText);
-                        if (!resp.success){
-                            Ext.MessageBox.alert('Status', resp.msg);
-                            return;
-                        } else {
-                            grid3.getStore().load();
-                        }
-                    }
-                });
-            }
-        }
-    });
-
-    grid3.getStore().load();
-*/
+	// render the grid
+ 	grid1.render(document.body);
 
 });