First GridPanel implementation.

static/uijs/vieweditdistributions.js

@@ -7,3 +7,62 @@
  *
  */
 
+
+Ext.onReady(function(){
+
+    Ext.QuickTips.init();
+
+    //define the datastore
+    var mystore = new Ext.data.JsonStore({
+        url: '/mdvPostInstall/database/select?table=distributions',
+        fields: ['id', 'version', 'note', 'date']
+    });
+
+
+    //define the columns model
+    var mymodel = new Ext.grid.ColumnModel([
+        new Ext.grid.RowNumberer(),
+        {header: "Id", width: 10, sortable: true, dataIndex: 'id', hidden: true},
+        {header: "Version", width: 15, sortable: true, dataIndex: 'version'},
+        {header: "Note", width: 70, sortable: true, dataIndex: 'note'},
+        {header: "Date", width: 20, sortable: true, dataIndex: 'date'}
+    ]);
+
+    var grid3 = new Ext.grid.GridPanel({
+
+        store: mystore,
+        cm: mymodel,
+        viewConfig: {forceFit: true},
+
+        // inline buttons
+        buttons: [{text:'Save'},{text:'Cancel'}],
+        buttonAlign: 'right',
+
+        // inline toolbars
+        tbar:[{
+            text:'Add Something',
+            tooltip:'Add a new row',
+            iconCls:'add'
+        }, '-', {
+            text:'Options',
+            tooltip:'Blah blah blah blaht',
+            iconCls:'option'
+        },'-',{
+            text:'Remove Something',
+            tooltip:'Remove the selected item',
+            iconCls:'remove'
+        }],
+
+        frame: true,
+        autoExpandColumn: 'note',
+
+        width: 600,
+        height: 300,
+        title: 'Distributions',
+        iconCls: 'icon-grid',
+        renderTo: document.body
+    });
+
+    grid3.getStore().load();
+
+});