gistfile1.rb

module Netzke
  class TreeNavigator < BorderLayoutPanel
    
    # BorderLayoutPanel's regions
    def initial_aggregatees
      {
        :west => {
          :widget_class_name => "TreePanel",
          :data_class_name => config[:tree_data_class_name],
          :region_config => {
            :width => 200
          }
        },
        :center => {
          :widget_class_name => "TabPanel",
          :items => [{
            :title => "Starter Tab",
            :widget_class_name => "Panel",
            :ext_config => {:html => "Some useful information might go here.", :header => false}
          }]
        }
      }
    end
    
    def self.js_extend_properties
      {
        # This is where we override Ext.Component#initComponent. Use it instead of js_after_constructor.
        :init_component => <<-END_OF_JAVASCRIPT.l,
          function(){
            // calling the superclass
            Ext.netzke.cache.#{short_widget_class_name}.superclass.initComponent.call(this);
            
            // Set the node click event here
            this.getWestWidget().on('click', this.onNodeClick, this);
          }
        END_OF_JAVASCRIPT
        
        # onNodeClick()
        :on_node_click => <<-END_OF_JAVASCRIPT.l,
          function(node, e){
            // add new tab with layout 'fit', where we can then dynamically load GridPanel
            var fitPanel = this.getCenterWidget().add({
              layout:'fit',
              title:"A grid"
            });
            
            // this is the way to load a widget: generally, you simply need to specify the id of the panel with layout as "container" and the name of the aggregatee is "id"
            this.loadAggregatee({
              id:"gridPanel", // aggregatee (what to load)
              container:fitPanel.id,  // where to load
              callback: function(w){ // called after the widget is loaded and instantiated
                // Activate last tab *after* the grid is loaded into it - 
                // it's becaues at the moment Netzke::TabPanel doesn't its *empty* tabs 
                // (e.g. without any widgets in them) to be activated
                var tabPanel = this.getCenterWidget();
                tabPanel.activate(tabPanel.items.last());
              },
              scope: this, // scope for the callback
              params: {node_id: node.id} // pass the clicked node id
            });
          }
        END_OF_JAVASCRIPT
        
      }
    end
    
    # Here's where we define the grid_panel that is going to be loaded into the tabs
    def initial_late_aggregatees
      # quick and dirty way to figure out foreign key which binds grid data to tree nodes
      foreign_key = config[:tree_data_class_name].underscore + "_id"
      
      super.merge({
        :grid_panel => {
          :widget_class_name => "GridPanel",
          :data_class_name => config[:grid_data_class_name],
          :ext_config => {:header => false},

          # this is how GridPanel will know that it needs to disploy only those records that belong_to selected tree node (see docs for GridPanel)
          :scopes => [[foreign_key, widget_session[:selected_node_id]]],
          
          # and here's how GridPanel will know that when a record is added, it should bind it to the selected tree node (see docs for GridPanel)
          :strong_default_attrs => {foreign_key => widget_session[:selected_node_id]}
        }
      })
    end
    
    # This is the API that is called to load the GridPanel. We interfere with that to remember the node id in the TreeNavigator's session. It will be picked up at the moment of instantiating GridPanel.
    def load_aggregatee_with_cache(params)
      widget_session[:selected_node_id] = params[:node_id].to_i
      super
    end
    
  end
end