Module: Netzke::GridPanelJs::ClassMethods

Defined in:

lib/netzke/grid_panel_js.rb

Instance Method Summary

• #js_base_class ⇒ Object
• #js_extend_properties ⇒ Object
• #js_init_component ⇒ Object

  Ext.Component#initComponent, built up from pices (dependent on class configuration).

Instance Method Details

#js_base_class ⇒ Object

# File 'lib/netzke/grid_panel_js.rb', line 17

def js_base_class 
  'Ext.grid.EditorGridPanel'
end

#js_extend_properties ⇒ Object

# File 'lib/netzke/grid_panel_js.rb', line 246

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,
  
    :update => <<-END_OF_JAVASCRIPT.l,
  
    :load_store_data => <<-END_OF_JAVASCRIPT.l,
  
    :add => <<-END_OF_JAVASCRIPT.l,
  
    :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,

    :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,
    
    :default_get_row_class => <<-END_OF_JAVASCRIPT.l,
    
    :apply => <<-END_OF_JAVASCRIPT.l,
 
    :select_first_row => <<-END_OF_JAVASCRIPT.l,
    
    :refresh => <<-END_OF_JAVASCRIPT.l,
    
    :on_column_resize => <<-END_OF_JAVASCRIPT.l,
    
    :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,
    
    :on_row_context_menu => <<-END_OF_JAVASCRIPT.l,
    
    :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,

    :on_successfull_edit => <<-END_OF_JAVASCRIPT.l,

    :edit_in_form => <<-END_OF_JAVASCRIPT.l,

    :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:"newRecordForm", 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:"searchPanel", container:this.searchWindow.id});
          }
        }, this);

      }
    END_OF_JAVASCRIPT
    
  }
  ) if config[:extended_search_available]
  
  res
end

#js_init_component ⇒ Object

Ext.Component#initComponent, built up from pices (dependent on class configuration)

# File 'lib/netzke/grid_panel_js.rb', line 22

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