Грид + форма внизу

[Anton]

Добрый день!

Хочу реализовать следующее:
вверху - список клерков в гриде
внизу   - детальная информация о клерке

class ClerkDetails < Netzke::Base
  # Remember regions collapse state and size
  include Netzke::Basepack::ItemPersistence

  def configure(c)
    super
    c.items = [
      { netzke_component: :clerks, region: :center },
      { netzke_component: :clerk_info, region: :south, height: 350, split: true }
    ]
  end

  js_configure do |c|
    c.layout = :border
    c.border = false

    # Overriding initComponent
    c.init_component = <<-JS
      function(){
        // calling superclass's initComponent
        this.callParent();

        // setting the 'rowclick' event
        var view = this.getComponent('clerks').getView();
        view.on('itemclick', function(view, record){
          // The beauty of using Ext.Direct: calling 3 endpoints in a row, which results in a single call to the server!
          this.selectClerk({clerk_id: record.get('id')});
          this.getComponent('clerk_info').getStore().load();
        }, this);
      }
    JS
  end

  endpoint :select_clerk do |params, this|
    # store selected boss id in the session for this component's instance
    component_session[:selected_clerk_id] = params[:clerk_id]
  end

  component :clerks do |c|
    c.klass = Netzke::Basepack::Grid
    c.model = "Clerk"
  end

  component :clerk_info do |c|
    c.klass = ClerkForm
    c.data_store = {auto_load: false}
    c.scope = {:id => component_session[:selected_clerk_id]}
    c.strong_default_attrs = {:id => component_session[:selected_clerk_id]}
  end
end

# Грид
class Clerks < Netzke::Basepack::Grid
  css_configure do |c|
    # include CSS for displaying the light bulb (see the source code)
    c.require :main
  end

  def configure(c)
    c.model = "Clerk"
    c.persistence = true

    # Declaring columns
    c.columns = [
      { :name => :name,
        # Declaring columns
        :renderer => "uppercase",
        :width => 200
      },
      :first_name,
      :last_name,
      { :name => :updated_bulb,
        :width => 30,
        :header => "",
        :tooltip => "Recently updated",
        :getter => lambda { |r|
          bulb = r.updated ? "on" : "off"
          "<div class='bulb-#{bulb}' />"
        }
      },
      :email,
      { :name => :boss__last_name,
        :header => "Boss"
      },
      {:name => :image, :getter => lambda{ |r| "<a href='#{r.image.url}'>Download</a>" if r.image.url }}
    ]
    super
  end
end

# Форма
class ClerkForm < Netzke::Basepack::PagingForm
  def configure(c)

    super
    c.model = "Clerk"

    c.file_upload = true
    c.items = [
        :first_name,
        :last_name,
        :email
    ]
  end
end

При клике на любой строке грида внизу в форме отображается информация о самом первом клерке из грида
Как это поправить?

[Anton]

Вот на что этодолжно быть похоже:

http://docs.sencha.com/extjs/4.2.1/extjs-build/examples/build/KitchenSink/ext-theme-neptune/#form-grid

Как такое реализовать?

[Anton]

Освежил сlerk_inspector.rb (может кому пригодится):
# When a row in the grid panel is clicked, the form panel dynamically loads the corresponding record.
class ClerkInspector < Netzke::Base

  def configure(c)
    super
    c.items = [

        {netzke_component: :clerk_grid, region:  :center, :split => true, :title => "List"},
        {netzke_component: :clerk_form, region: :south, height: 350, split: true,  :title => "Details"}
    ]
  end

  component :clerk_grid do |c|

    c.klass = Netzke::Basepack::Grid
    c.model = "Clerk"
  end

  component :clerk_form do |c|
    c.klass = Netzke::Basepack::PagingForm
    c.model = "Clerk"

    c.items = [
        :first_name,
        :last_name,
        :email
    ]
  end

  js_configure do |c|
    c.layout = :border
    c.border = false

    # Overriding initComponent
    c.init_component = <<-JS
    function(){

      this.callParent();

      this.clerkGrid = this.getComponent('clerk_grid');
      this.clerkForm = this.getComponent('clerk_form');

      // When a row is clicked in the clerk grid, make the clerk form load the corresponding record
      this.clerkGrid.on('itemclick', function(view, record){
        this.clerkForm.netzkeLoad({id: record.getId()});
      }, this);
    }
  JS
  end
end

ЗЫ: Макс, спасибо за то, что сделали Netzke!