skozlov-netzke-basepack 0.1.1.2 → 0.5.0

data/lib/netzke/grid_panel_extras/javascripts/check-column.js

@@ -0,0 +1,33 @@
+// CheckColumn
+Ext.grid.CheckColumn = function(config){
+    Ext.apply(this, config);
+    if(!this.id){
+        this.id = Ext.id();
+    }
+    this.renderer = this.renderer.createDelegate(this);
+};
+
+Ext.grid.CheckColumn.prototype ={
+    init : function(grid){
+        this.grid = grid;
+		if (this.disabled) {return;} // SK
+        this.grid.on('render', function(){
+            var view = this.grid.getView();
+            view.mainBody.on('mousedown', this.onMouseDown, this);
+        }, this);
+    },
+
+    onMouseDown : function(e, t){
+        if(t.className && t.className.indexOf('x-grid3-cc-'+this.id) != -1){
+            e.stopEvent();
+            var index = this.grid.getView().findRowIndex(t);
+            var record = this.grid.store.getAt(index);
+            record.set(this.dataIndex, !record.data[this.dataIndex]);
+        }
+    },
+
+    renderer : function(v, p, record){
+        p.css += ' x-grid3-check-col-td'; 
+        return '<div class="x-grid3-check-col'+(v?'-on':'')+' x-grid3-cc-'+this.id+'">&#160;</div>';
+    }
+};

data/lib/netzke/grid_panel_extras/javascripts/rows-dd.js

@@ -0,0 +1,280 @@
+Ext.namespace('Ext.ux.dd');
+
+Ext.ux.dd.GridDragDropRowOrder = Ext.extend(Ext.util.Observable,
+{
+    copy: false,
+
+    scrollable: false,
+
+    constructor : function(config)
+    {
+        Ext.ux.dd.GridDragDropRowOrder.superclass.constructor.call(this);
+        if (config)
+            Ext.apply(this, config);
+
+        this.addEvents(
+        {
+            beforerowmove: true,
+            afterrowmove: true,
+            beforerowcopy: true,
+            afterrowcopy: true
+        });
+    },
+
+    init : function (grid)
+    {
+        this.grid = grid;
+        grid.enableDragDrop = true;
+
+        grid.on({
+            render: { fn: this.onGridRender, scope: this, single: true }
+        });
+    },
+
+    onGridRender : function (grid)
+    {
+        var self = this;
+
+        this.target = new Ext.dd.DropTarget(grid.getEl(),
+        {
+            ddGroup: grid.ddGroup || 'GridDD',
+            grid: grid,
+            gridDropTarget: this,
+
+            notifyDrop: function(dd, e, data)
+            {
+                // Remove drag lines. The 'if' condition prevents null error when drop occurs without dragging out of the selection area
+                if (this.currentRowEl)
+                {
+                    this.currentRowEl.removeClass('grid-row-insert-below');
+                    this.currentRowEl.removeClass('grid-row-insert-above');
+                }
+
+                // determine the row
+                var t = Ext.lib.Event.getTarget(e);
+                var rindex = this.grid.getView().findRowIndex(t);
+                if (rindex === false || rindex == data.rowIndex)
+                {
+                    return false;
+                }
+                // fire the before move/copy event
+                if (this.gridDropTarget.fireEvent(self.copy ? 'beforerowcopy' : 'beforerowmove', this.gridDropTarget, data.rowIndex, rindex, data.selections, 123) === false)
+                {
+                    return false;
+                }
+
+                // update the store
+                var ds = this.grid.getStore();
+
+                // Changes for multiselction by Spirit
+                var selections = new Array();
+                var keys = ds.data.keys;
+                for (var key in keys)
+                {
+                    for (var i = 0; i < data.selections.length; i++)
+                    {
+                        if (keys[key] == data.selections[i].id)
+                        {
+                            // Exit to prevent drop of selected records on itself.
+                            if (rindex == key)
+                            {
+                                return false;
+                            }
+                            selections.push(data.selections[i]);
+                        }
+                    }
+                }
+
+                // fix rowindex based on before/after move
+                if (rindex > data.rowIndex && this.rowPosition < 0)
+                {
+                    rindex--;
+                }
+                if (rindex < data.rowIndex && this.rowPosition > 0)
+                {
+                    rindex++;
+                }
+
+                // fix rowindex for multiselection
+                if (rindex > data.rowIndex && data.selections.length > 1)
+                {
+                    rindex = rindex - (data.selections.length - 1);
+                }
+
+                // we tried to move this node before the next sibling, we stay in place
+                if (rindex == data.rowIndex)
+                {
+                    return false;
+                }
+
+                // fire the before move/copy event
+                /* dupe - does it belong here or above???
+                if (this.gridDropTarget.fireEvent(self.copy ? 'beforerowcopy' : 'beforerowmove', this.gridDropTarget, data.rowIndex, rindex, data.selections, 123) === false)
+                {
+                    return false;
+                }
+                */
+
+                if (!self.copy)
+                {
+                    for (var i = 0; i < data.selections.length; i++)
+                    {
+                        ds.remove(ds.getById(data.selections[i].id));
+                    }
+                }
+
+                for (var i = selections.length - 1; i >= 0; i--)
+                {
+                    var insertIndex = rindex;
+                    ds.insert(insertIndex, selections[i]);
+                }
+
+                // re-select the row(s)
+                var sm = this.grid.getSelectionModel();
+                if (sm)
+                {
+                    sm.selectRecords(data.selections);
+                }
+                
+                // console.info(this.gridDropTarget);
+
+                // fire the after move/copy event
+                this.gridDropTarget.fireEvent(self.copy ? 'afterrowcopy' : 'afterrowmove', this.gridDropTarget, data.rowIndex, rindex, data.selections);
+                return true;
+            },
+
+            notifyOver: function(dd, e, data)
+            {
+                var t = Ext.lib.Event.getTarget(e);
+                var rindex = this.grid.getView().findRowIndex(t);
+
+                // Similar to the code in notifyDrop. Filters for selected rows and quits function if any one row matches the current selected row.
+                var ds = this.grid.getStore();
+                var keys = ds.data.keys;
+                for (var key in keys)
+                {
+                    for (var i = 0; i < data.selections.length; i++)
+                    {
+                        if (keys[key] == data.selections[i].id)
+                        {
+                            if (rindex == key)
+                            {
+                                if (this.currentRowEl)
+                                {
+                                    this.currentRowEl.removeClass('grid-row-insert-below');
+                                    this.currentRowEl.removeClass('grid-row-insert-above');
+                                }
+                                return this.dropNotAllowed;
+                            }
+                        }
+                    }
+                }
+
+                // If on first row, remove upper line. Prevents negative index error as a result of rindex going negative.
+                if (rindex < 0 || rindex === false)
+                {
+                    this.currentRowEl.removeClass('grid-row-insert-above');
+                    return this.dropNotAllowed;
+                }
+
+                try
+                {
+                    var currentRow = this.grid.getView().getRow(rindex);
+                    // Find position of row relative to page (adjusting for grid's scroll position)
+                    var resolvedRow = new Ext.Element(currentRow).getY() - this.grid.getView().scroller.dom.scrollTop;
+                    var rowHeight = currentRow.offsetHeight;
+
+                    // Cursor relative to a row. -ve value implies cursor is above the row's middle and +ve value implues cursor is below the row's middle.
+                    this.rowPosition = e.getPageY() - resolvedRow - (rowHeight/2);
+
+                    // Clear drag line.
+                    if (this.currentRowEl)
+                    {
+                        this.currentRowEl.removeClass('grid-row-insert-below');
+                        this.currentRowEl.removeClass('grid-row-insert-above');
+                    }
+
+                    if (this.rowPosition > 0)
+                    {
+                        // If the pointer is on the bottom half of the row.
+                        this.currentRowEl = new Ext.Element(currentRow);
+                        this.currentRowEl.addClass('grid-row-insert-below');
+                    }
+                    else
+                    {
+                        // If the pointer is on the top half of the row.
+                        if (rindex - 1 >= 0)
+                        {
+                            var previousRow = this.grid.getView().getRow(rindex - 1);
+                            this.currentRowEl = new Ext.Element(previousRow);
+                            this.currentRowEl.addClass('grid-row-insert-below');
+                        }
+                        else
+                        {
+                            // If the pointer is on the top half of the first row.
+                            this.currentRowEl.addClass('grid-row-insert-above');
+                        }
+                    }
+                }
+                catch (err)
+                {
+                    console.warn(err);
+                    rindex = false;
+                }
+                return (rindex === false)? this.dropNotAllowed : this.dropAllowed;
+            },
+
+            notifyOut: function(dd, e, data)
+            {
+                // Remove drag lines when pointer leaves the gridView.
+                if (this.currentRowEl)
+                {
+                    this.currentRowEl.removeClass('grid-row-insert-above');
+                    this.currentRowEl.removeClass('grid-row-insert-below');
+                }
+            }
+        });
+
+        if (this.targetCfg)
+        {
+            Ext.apply(this.target, this.targetCfg);
+        }
+
+        if (this.scrollable)
+        {
+            Ext.dd.ScrollManager.register(grid.getView().getEditorParent());
+            grid.on({
+                beforedestroy: this.onBeforeDestroy,
+                scope: this,
+                single: true
+            });
+        }
+    },
+
+    getTarget: function()
+    {
+        return this.target;
+    },
+
+    getGrid: function()
+    {
+        return this.grid;
+    },
+
+    getCopy: function()
+    {
+        return this.copy ? true : false;
+    },
+
+    setCopy: function(b)
+    {
+        this.copy = b ? true : false;
+    },
+
+    onBeforeDestroy : function (grid)
+    {
+        // if we previously registered with the scroll manager, unregister
+        // it (if we don't it will lead to problems in IE)
+        Ext.dd.ScrollManager.unregister(grid.getView().getEditorParent());
+    }
+});

data/lib/netzke/grid_panel_js.rb

@@ -0,0 +1,721 @@
+module Netzke
+  module GridPanelJs
+    def self.included(base)
+      base.extend ClassMethods
+    end
+
+    def js_config
+      res = super
+      res.merge!(:clmns => columns)
+      res.merge!(:data_class_name => config[:data_class_name])
+      res.merge!(:inline_data => get_data) if ext_config[:load_inline_data]
+      res
+    end
+
+    module ClassMethods
+
+      def js_base_class 
+        'Ext.grid.EditorGridPanel'
+      end
+
+      # Ext.Component#initComponent, built up from pices (dependent on class configuration)
+      def js_init_component
+        
+        # Optional "edit in form"-related events
+        edit_in_form_events = <<-END_OF_JAVASCRIPT if config[:edit_in_form_available]
+          if (this.enableEditInForm) {
+            this.getSelectionModel().on('selectionchange', function(selModel){
+              // Disable "edit in form" button if new record is present in selection
+              var disabled = !selModel.each(function(r){
+                if (r.isNew) { return false; }
+              });
+              this.actions.editInForm.setDisabled(disabled);
+            }, this);
+          }
+        END_OF_JAVASCRIPT
+        
+        # Result
+        <<-END_OF_JAVASCRIPT
+          function(){
+            if (!this.clmns) {this.feedback('No columns defined for grid '+this.id);}
+
+            /* Process columns - all in sake of creating the column model */
+            // Normalize columns passed in the config
+            var normClmns = [];
+            Ext.each(this.clmns, function(c){
+              if (!c.excluded) {
+                // normalize columns
+                if (typeof c == 'string') {
+                  normClmns.push({name:c});
+                } else {
+                  normClmns.push(c);
+                }
+              }
+            });
+
+            delete this.clmns; // we don't need them anymore
+            
+            var cmConfig = []; // column model config - we'll use it later to create the ColumnModel
+            this.plugins = []; // checkbox colums is a special case, being a plugin
+
+            var filters = [];
+            
+            // Run through columns
+            Ext.each(normClmns, function(c){
+              // Apply default column config
+              Ext.applyIf(c, this.defaultColumnConfig);
+
+              // setting dataIndex separately
+              c.dataIndex = c.name;
+
+              // Automatically calculated default values
+              if (!c.header) {c.header = c.name.humanize()}
+
+              // normalize editor
+              if (c.editor) {
+                c.editor = Netzke.isObject(c.editor) ? c.editor : {xtype:c.editor};
+              } else {
+                c.editor = {xtype: 'textfield'}
+              }
+              
+              // collect filters
+              if (c.withFilters){
+                filters.push({type:Ext.netzke.filterMap[c.editor.xtype], dataIndex:c.name});
+              }
+
+              if (c.editor && c.editor.xtype == 'checkbox') {
+                // Special case of checkbox column
+                var plugin = new Ext.grid.CheckColumn(c);
+                this.plugins.push(plugin);
+                cmConfig.push(plugin);
+              } else {
+                // "normal" column, not a plugin
+                if (!c.readOnly && !this.prohibitUpdate) {
+                  // c.editor contains complete config of the editor
+                  var xtype = c.editor.xtype;
+                  c.editor = Ext.ComponentMgr.create(Ext.apply({
+                    parentId:this.id,
+                    name: c.name,
+                    selectOnFocus:true
+                  }, c.editor));
+                } else {
+                  c.editor = null;
+                }
+
+                // set the renderer
+                c.renderer = Ext.netzke.normalizedRenderer(c.renderer);
+                
+                // add to the list
+                cmConfig.push(c);
+              }
+
+            }, this);
+
+            // Finally, create the ColumnModel based on processed columns
+            this.cm = new Ext.grid.ColumnModel(cmConfig);
+            this.cm.on('hiddenchange', this.onColumnHiddenChange, this);
+
+            /* ... and done with columns */
+            
+            // Filters
+            if (this.enableColumnFilters) {
+              this.plugins.push(new Ext.grid.GridFilters({filters:filters}));
+            }
+            
+            // Create Ext.data.Record constructor specific for our particular column configuration
+            this.recordConfig = [];
+            Ext.each(normClmns, function(column){this.recordConfig.push({name:column.name});}, this);
+            this.Row = Ext.data.Record.create(this.recordConfig);
+
+            // Drag'n'Drop
+            if (this.enableRowsReordering){
+              this.ddPlugin = new Ext.ux.dd.GridDragDropRowOrder({
+                  scrollable: true // enable scrolling support (default is false)
+              });
+              this.plugins.push(this.ddPlugin);
+            }
+
+            // Explicitely create the connection to get grid's data, 
+            // because we don't want the app-wide Ext.Ajax to be used,
+            // as we are going to subscribe to its events
+            var connection = new Ext.data.Connection({
+              url:this.id+"__get_data",
+              extraParams : {
+                authenticity_token : Ext.authenticityToken
+              },
+
+              // inform Ext.Ajax about our events
+              listeners: {
+                beforerequest: function(){
+                  Ext.Ajax.fireEvent('beforerequest', arguments);
+                },
+                requestexception: function(){
+                  Ext.Ajax.fireEvent('requestexception', arguments);
+                },
+                requestcomplete: function(){
+                  Ext.Ajax.fireEvent('requestcomplete', arguments);
+                }
+              }
+            });
+
+            // besides getting data into the store, we may also get commands to execute
+            connection.on('requestcomplete', function(conn, r){
+              var response = Ext.decode(r.responseText);
+
+              // delete data-related properties
+              Ext.each(['data', 'total', 'success'], function(property){delete response[property];});
+              this.bulkExecute(response);
+            }, this);
+
+            // HttpProxy that uses our custom connection
+            var httpProxy = new Ext.data.HttpProxy(connection);
+
+            // Data store
+            this.store = new Ext.data.Store({
+                proxy: this.proxy = httpProxy,
+                reader: new Ext.data.ArrayReader({root: "data", totalProperty: "total", successProperty: "success", id:0}, this.Row),
+                remoteSort: true,
+                listeners:{'loadexception':{
+                  fn:this.loadExceptionHandler,
+                  scope:this
+                }}
+            });
+
+            // Normalize bottom bar
+            this.bbar = (this.enablePagination) ? new Ext.PagingToolbar({
+              pageSize : this.rowsPerPage,
+              items : this.bbar ? ["-"].concat(this.bbar) : [],
+              store : this.store, 
+              emptyMsg: 'Empty'
+            }) : this.bbar;
+            
+            // Selection model
+            this.sm = new Ext.grid.RowSelectionModel();
+            
+            // Now let Ext.grid.EditorGridPanel do the rest
+            // Original initComponent
+            Ext.netzke.cache.GridPanel.superclass.initComponent.call(this);
+            
+            // Set the events
+            this.on('columnresize', this.onColumnResize, this);
+            this.on('columnmove', this.onColumnMove, this);
+            
+            // Context menu
+            if (this.enableContextMenu) {
+              this.on('rowcontextmenu', this.onRowContextMenu, this);
+            }
+            
+            // Load data AFTER the toolbar is bound to the store, which will provide for correct page number
+            if (this.loadInlineData) {
+              this.getStore().loadData(this.inlineData);
+
+              // If rows per page specified, fake store.lastOptions as if the data was loaded
+              // by PagingToolbar (for correct functionning of refresh tool and extended search)
+              if (this.rowsPerPage) {
+                this.getStore().lastOptions = {params:{limit:this.rowsPerPage, start:0}}; // this is how PagingToolbar does it...
+              }
+              
+              // inlineData may also contain commands (TODO: make it DRY)
+              // delete data-related properties
+              Ext.each(['data', 'total', 'success'], function(property){delete this.inlineData[property];}, this);
+              this.bulkExecute(this.inlineData);
+            }
+            
+            // Process selectionchange event
+            this.getSelectionModel().on('selectionchange', function(selModel){
+              // enable/disable actions
+              this.actions.del.setDisabled(!selModel.hasSelection() || this.prohibitDelete);
+              this.actions.edit.setDisabled(selModel.getCount() != 1 || this.prohibitUpdate);
+            }, this);
+            
+            // Drag n Drop event
+            if (this.enableRowsReordering){
+              this.ddPlugin.on('afterrowmove', this.onAfterRowMove, this);
+            }
+            
+            // GridView
+            this.getView().getRowClass = this.defaultGetRowClass;
+            
+            #{edit_in_form_events}
+          }
+          
+        END_OF_JAVASCRIPT
+        
+      end
+
+      def js_extend_properties
+        res = super
+        
+        # Defaults
+        res.merge!(
+        {
+          :track_mouse_over => true,
+          :load_mask        => true,
+          :auto_scroll      => true,
+
+          :default_column_config => config_columns.inject({}){ |r, c| c.is_a?(Hash) ? r.merge(c[:name] => c[:default]) : r },
+          
+          :init_component => js_init_component.l,
+          
+          :load_exception_handler => <<-END_OF_JAVASCRIPT.l,
+          function(proxy, options, response, error){
+            if (response.status == 200 && (responseObject = Ext.decode(response.responseText)) && responseObject.flash){
+              this.feedback(responseObject.flash);
+            } else {
+              if (error){
+                this.feedback(error.message);
+              } else {
+                this.feedback(response.statusText);
+              }  
+            }
+          }        
+          END_OF_JAVASCRIPT
+  
+          :update => <<-END_OF_JAVASCRIPT.l,
+            function(){
+              this.refresh();
+            }
+          END_OF_JAVASCRIPT
+  
+          :load_store_data => <<-END_OF_JAVASCRIPT.l,
+            function(data){
+              this.store.loadData(data);
+              Ext.each(['data', 'total', 'success'], function(property){delete data[property];}, this);
+              this.bulkExecute(data);
+            }
+          END_OF_JAVASCRIPT
+  
+          :add => <<-END_OF_JAVASCRIPT.l,
+            function(){
+              var rowConfig = {};
+              var r = new this.Row(rowConfig); // TODO: add default values
+              r.isNew = true; // to distinguish new records
+              r.set('id', r.id); // otherwise later r.get('id') returns empty string
+              this.stopEditing();
+              this.store.add(r);
+              this.tryStartEditing(this.store.indexOf(r));
+            }
+          END_OF_JAVASCRIPT
+  
+          :edit => <<-END_OF_JAVASCRIPT.l,
+            function(){
+              var row = this.getSelectionModel().getSelected();
+              if (row){
+                this.tryStartEditing(this.store.indexOf(row));
+              }
+            }
+          END_OF_JAVASCRIPT
+  
+          # try editing the first editable (i.e. not hidden, not read-only) sell
+          :try_start_editing => <<-END_OF_JAVASCRIPT.l,
+            function(row){
+              if (row === null) {return;}
+              var editableColumns = this.getColumnModel().getColumnsBy(function(columnConfig, index){
+                return !columnConfig.hidden && !!columnConfig.editor;
+              });
+              var firstEditableColumn = editableColumns[0];
+              if (firstEditableColumn){
+                this.startEditing(row, firstEditableColumn.id);
+              }
+            }
+          END_OF_JAVASCRIPT
+
+          :del => <<-END_OF_JAVASCRIPT.l,
+            function() {
+              if (this.getSelectionModel().hasSelection()){
+                Ext.Msg.confirm('Confirm', 'Are you sure?', function(btn){
+                  if (btn == 'yes') {
+                    var records = [];
+                    this.getSelectionModel().each(function(r){
+                      if (r.isNew) {
+                        // this record is not know to server - simply remove from store
+                        this.store.remove(r);
+                      } else {
+                        records.push(r.get('id'));
+                      }
+                    }, this);
+
+                    if (records.length > 0){
+                      // call API
+                      this.deleteData({records: Ext.encode(records)});
+                    }
+                  }
+                }, this);
+              }
+            }
+          END_OF_JAVASCRIPT
+
+          # Called by the server side to update newly created records
+          :update_new_records => <<-END_OF_JAVASCRIPT.l,
+            function(records){
+              this.updateRecords(records);
+            }
+          END_OF_JAVASCRIPT
+          
+          # Called by the server side to update modified records
+          :update_mod_records => <<-END_OF_JAVASCRIPT.l,
+            function(records){
+              this.updateRecords(records, true);
+            }
+          END_OF_JAVASCRIPT
+          
+          # Updates modified or newly created records
+          # Example of the records argument:
+          #   {1098 => [1, 'value1', 'value2'], 1099 => [2, 'value1', 'value2']}
+          :update_records => <<-END_OF_JAVASCRIPT.l,
+            function(records, mod){
+              if (!mod) {mod = false;}
+              var modRecordsInGrid = [].concat(this.store.getModifiedRecords()); // there must be a better way to clone an array...
+
+              // replace arrays of data in the args object with Ext.data.Record objects
+              for (var k in records){
+                records[k] = this.store.reader.readRecords([records[k]]).records[0];
+              }
+              
+              // for each new record write the data returned by the server, and commit the record
+              Ext.each(modRecordsInGrid, function(recordInGrid){
+                if (mod ^ recordInGrid.isNew) {
+                  // new data that the server sent us to update this record
+                  var newData = records[recordInGrid.get('id')];
+                  
+                  if (newData){
+                    for (var k in newData.data){
+                      recordInGrid.set(k, newData.get(k));
+                    }
+
+                    recordInGrid.isNew = false;
+                    recordInGrid.commit();
+                  }
+                  
+                }
+              });
+              
+              // clear the selections
+              this.getSelectionModel().clearSelections();
+
+              // check if there are still records with errors
+              var modRecords = this.store.getModifiedRecords();
+              if (modRecords.length == 0) {
+                // if all records are accepted, reload the grid (so that eventual order/filtering is correct)
+                this.store.reload();
+                
+                // ... and set default getRowClass function
+                this.getView().getRowClass = this.defaultGetRowClass;
+              } else {
+                this.getView().getRowClass = function(r){
+                  return r.dirty ? "grid-dirty-record" : ""
+                }
+              }
+              
+              this.getView().refresh();
+            }
+          END_OF_JAVASCRIPT
+          
+          :default_get_row_class => <<-END_OF_JAVASCRIPT.l,
+            function(r){
+              return r.isNew ? "grid-dirty-record" : ""
+            }
+          END_OF_JAVASCRIPT
+          
+          :apply => <<-END_OF_JAVASCRIPT.l,
+            function(){
+              var newRecords = [];
+              var updatedRecords = [];
+
+              Ext.each(this.store.getModifiedRecords(),
+                function(r) {
+                  if (r.isNew) {
+                    newRecords.push(Ext.apply(r.getChanges(), {id:r.get('id')}));
+                  } else {
+                    updatedRecords.push(Ext.apply(r.getChanges(), {id:r.get('id')}));
+                  }
+                }, 
+              this);
+        
+              if (newRecords.length > 0 || updatedRecords.length > 0) {
+                var params = {};
+
+                if (newRecords.length > 0) {
+                  params.created_records = Ext.encode(newRecords);
+                }
+                
+                if (updatedRecords.length > 0) {
+                  params.updated_records = Ext.encode(updatedRecords);
+                }
+                
+                if (this.store.baseParams !== {}) {
+                  params.base_params = Ext.encode(this.store.baseParams);
+                }
+                
+                this.postData(params);
+              }
+        
+            }
+          END_OF_JAVASCRIPT
+ 
+          :select_first_row => <<-END_OF_JAVASCRIPT.l,
+            function(){
+              this.getSelectionModel().suspendEvents();
+              this.getSelectionModel().selectRow(0);
+              this.getSelectionModel().resumeEvents();
+            }
+          END_OF_JAVASCRIPT
+          
+          :refresh => <<-END_OF_JAVASCRIPT.l,
+            function() {
+              if (this.fireEvent('refresh', this) !== false) {
+                this.store.reload();
+              }
+            }
+          END_OF_JAVASCRIPT
+    
+          :on_column_resize => <<-END_OF_JAVASCRIPT.l,
+            function(index, size){
+              this.resizeColumn({
+                index:index,
+                size:size
+              });
+            }
+          END_OF_JAVASCRIPT
+    
+          :on_column_hidden_change => <<-END_OF_JAVASCRIPT.l,
+            function(cm, index, hidden){
+              this.hideColumn({
+                index:index,
+                hidden:hidden
+              });
+            }
+          END_OF_JAVASCRIPT
+    
+          # :reorder_columns => <<-END_OF_JAVASCRIPT.l,
+          #   function(columns){
+          #     columnsInNewShipment = [];
+          #     Ext.each(columns, function(c){
+          #       columnsInNewShipment.push({name:c});
+          #     });
+          #     newRecordType = Ext.data.Record.create(columnsInNewShipment);
+          #     this.store.reader.recordType = newRecordType; // yes, recordType is a protected property, but that's the only way we can do it, and it seems to work for now
+          #   }
+          # END_OF_JAVASCRIPT
+    
+          :on_column_move => <<-END_OF_JAVASCRIPT.l,
+            function(oldIndex, newIndex){
+              this.moveColumn({
+                old_index:oldIndex,
+                new_index:newIndex
+              });
+            }
+          END_OF_JAVASCRIPT
+          
+          :on_row_context_menu => <<-END_OF_JAVASCRIPT.l,
+            function(grid, rowIndex, e){
+              e.stopEvent();
+              var coords = e.getXY();
+              
+              if (!grid.getSelectionModel().isSelected(rowIndex)) {
+                grid.getSelectionModel().selectRow(rowIndex);
+              }
+              
+              var menu = new Ext.menu.Menu({
+                items: this.contextMenu
+              });
+              
+              menu.showAt(coords);
+            }
+          END_OF_JAVASCRIPT
+          
+          :on_after_row_move => <<-END_OF_JAVASCRIPT.l,
+            function(dt, oldIndex, newIndex, records){
+          		var ids = [];
+          		// collect records ids
+          		Ext.each(records, function(r){ids.push(r.get('id'))});
+          		// call GridPanel's API
+          		this.moveRows({ids:Ext.encode(ids), new_index: newIndex});
+            }
+          END_OF_JAVASCRIPT
+        }
+        )
+        
+        # Edit in form
+        res.merge!(
+        {
+          :on_successfull_record_creation => <<-END_OF_JAVASCRIPT.l,
+            function(){
+              this.formWindow.hide();
+              this.getStore().reload();
+            }
+          END_OF_JAVASCRIPT
+
+          :on_successfull_edit => <<-END_OF_JAVASCRIPT.l,
+            function(){
+              this.editFormWindow.close();
+              delete this.editFormWindow;
+              this.getStore().reload();
+            }
+          END_OF_JAVASCRIPT
+
+          :edit_in_form => <<-END_OF_JAVASCRIPT.l,
+            function(){
+              // create the window
+              delete this.editFormWindow;
+              this.editFormWindow = new Ext.Window({
+                title: 'Edit',
+                layout: 'fit',
+                modal: true,
+                width: 400,
+                height: Ext.lib.Dom.getViewHeight() *0.9,
+                buttons:[{
+                  text: 'OK',
+                  handler: function(){
+                    this.ownerCt.getWidget().apply();
+                  }
+                },{
+                  text:'Cancel',
+                  handler:function(){
+                    this.ownerCt.close();
+                  }
+                }]
+              });
+
+              // show it and load the correct aggregatee in it
+              this.editFormWindow.show(null, function(){
+                var selModel = this.getSelectionModel();
+                if (selModel.getCount() > 1) {
+                  this.editFormWindow.setTitle('Multi-edit');
+                  // multiedit
+                  this.loadAggregatee({
+                    id: "multi_edit_form",
+                    container: this.editFormWindow.id,
+                    callback: function(aggr){
+                      aggr.on('apply', function(){
+                        var ids = [];
+                        selModel.each(function(r){
+                          ids.push(r.get('id'));
+                        });
+                        aggr.baseParams = {ids: Ext.encode(ids)}
+                      }, this);
+                    },
+                    scope: this
+                  });
+                } else {
+                  // single edit
+                  this.editFormWindow.setTitle('Edit');
+                  var recordId = selModel.getSelected().get('id');
+                  this.loadAggregatee({
+                    id: "edit_form",
+                    container: this.editFormWindow.id,
+                    scope: this,
+                    record_id: recordId
+                  });
+                }
+              }, this);
+
+            }
+          END_OF_JAVASCRIPT
+
+          :add_in_form => <<-END_OF_JAVASCRIPT.l,
+            function(){
+              if (!this.formWindow) {
+                this.formWindow = new Ext.Window({
+                  title:'Add',
+                  layout: 'fit',
+                  modal: true,
+                  width: 400,
+                  height: Ext.lib.Dom.getViewHeight() *0.9,
+                  closeAction: 'hide',
+                  buttons:[{
+                    text: 'OK',
+                    handler: function(){
+                      this.ownerCt.getWidget().apply();
+                    }
+                  },{
+                    text:'Cancel',
+                    handler:function(){
+                      this.ownerCt.close();
+                    }
+                  }]
+                });
+              }
+
+              this.formWindow.show(null, function(){
+                this.formWindow.closeRes = 'cancel';
+                if (!this.formWindow.getWidget()){
+                  this.loadAggregatee({id:"new_record_form", container:this.formWindow.id});
+                }
+              }, this);
+
+            }
+          END_OF_JAVASCRIPT
+          
+        }
+        ) if config[:edit_in_form_available]
+        
+        # Extended search
+        res.merge!(
+        {
+          :search => <<-END_OF_JAVASCRIPT.l,
+            function(){
+              if (!this.searchWindow){
+                this.searchWindow = new Ext.Window({
+                  title:'Advanced search',
+                  layout:'fit',
+                  modal: true,
+                  width: 400,
+                  height: Ext.lib.Dom.getViewHeight() *0.9,
+                  closeAction:'hide',
+                  buttons:[{
+                    text: 'OK',
+                    handler: function(){
+                      this.ownerCt.closePositively();
+                    }
+                  },{
+                    text:'Cancel',
+                    handler:function(){
+                      this.ownerCt.closeNegatively();
+                    }
+                  }],
+                  closePositively : function(){
+                    this.conditions = this.getWidget().getForm().getValues();
+                    this.closeRes = 'OK'; 
+                    this.hide();
+                  },
+                  closeNegatively: function(){
+                    this.closeRes = 'cancel'; 
+                    this.hide();
+                  }
+
+                });
+
+                this.searchWindow.on('hide', function(){
+                  if (this.searchWindow.closeRes == 'OK'){
+                    this.getStore().baseParams = {extra_conditions: Ext.encode(this.searchWindow.conditions)};
+                    this.getStore().reload();
+                  }
+                }, this);
+
+                this.searchWindow.on('add', function(container, searchPanel){
+                  searchPanel.on('apply', function(widget){
+                    this.searchWindow.closePositively();
+                    return false; // stop the event
+                  }, this);
+                }, this);
+              }
+
+              this.searchWindow.show(null, function(){
+                this.searchWindow.closeRes = 'cancel';
+                if (!this.searchWindow.getWidget()){
+                  this.loadAggregatee({id:"search_panel", container:this.searchWindow.id});
+                }
+              }, this);
+
+            }
+          END_OF_JAVASCRIPT
+          
+        }
+        ) if config[:extended_search_available]
+        
+        res
+      end
+    end
+  end
+end