1

Here is the requirement:

In a border layout UI, a user(staff) grid is at the west, while the accordion at the center will show the selected user's several collections(say, awards, etc) in each panel when one staff is selected.

The code:

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

  def configure(c)
    super
    c.items = [
      { netzke_component: :staffs, region: :west, width: 300, split: true },
      { netzke_component: :accordion, region: :center }
    ]
  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('staffs').getView();
        view.on('itemclick', function(view, record){
          this.selectStaff({staff_id: record.get('id')});
          this.getComponent('awards').getStore().load();
        }, this);
      }
    JS
  end

  endpoint :select_staff do |params, this|
    component_session[:selected_staff_id] = params[:staff_id]
  end

  component :staffs do |c|
    c.klass = Netzke::Basepack::Grid
    c.model = "Staff"
    c.region = :west
  end

  component :awards do |c|
    c.kclass = Netzke::Basepack::Grid
    c.model = 'Award'
    c.data_store = {auto_load: false}
    c.scope = {:staff_id => component_session[:selected_staff_id]}
    c.strong_default_attrs = {:staff_id => component_session[:selected_staff_id]}
  end

  component :accordion do |c|
    c.klass = Netzke::Basepack::Accordion
    c.region = :center
    c.prevent_header = true
    c.items = [ { :title => "A Panel" }, :awards ]    # The error may occur here. :awards cannot be found. 
  end

end

The error is "NameError (uninitialized constant Awards)". Seems :awards component can not be found, even though it's already defined in the above.

Can one component be embedded in another one? Or how to solve it? Thanks.

4

1 回答 1

2

您在这里犯了一个很常见的错误，将 :awards 组件声明为 StaffsAndAwards 的子组件，而它应该是 Accordion 的子组件。

这很容易修复。单独声明您的手风琴组件（例如，我们将其命名为 AwardsAndStuff），将 :awards 声明移到它上面，然后在 StaffAndAwards 中引用它：

component :accordion do |c|
  # if you call the component :awards_and_stuff instead of :accordion, next line is not needed
  c.klass = AwardsAndStuff

  # important - pass the staff_id
  c.staff_id = component_session[:selected_staff_id]

  c.region = :center
  c.prevent_header = true
end

在 AwardsAndStuff 中，您可以访问 staff_id 作为config.staff_id，并将其传递给 :awards 组件：

component :awards do |c|
  c.kclass = Netzke::Basepack::Grid
  c.model = 'Award'
  c.data_store = {auto_load: false}
  c.scope = {:staff_id => config.staff_id}
  c.strong_default_attrs = {:staff_id => config.staff_id}
end

这样，您还可以独立测试 AwardsAndStuff。

于 2013-04-26T09:23:03.340 回答