1.rb

  js_property :items, [
    {
      xtype: 'panel',
      border: 0,
      maintainFlex: true,
      activeItem: 0,
      layout: {
        align: 'stretch',
        type: 'vbox'
      },
      bodyStyle: 'background: #DFE8F6;\n',
      flex: 1,
      items: [
        {
          xtype: 'panel',
          margin: '0 0 3 0',
          style: 'background: transparent;\n',
          bodyStyle: 'background: #f6f6f6;\nborder: 1px solid #cccccc;\n\n',
          items: section_buttons
        },
        {
          class_name: 'Cumulus::Basepack::LazyCardPanel',
          flex: 1,
          items: [
            {
              height: 400,
              preventHeader: true,
              layout: {
                type: 'card',
              },
              items: [ :application_explorer.component ],
              border: 0,
            }
          ]
        }
      ]
    }
  ]

  component :application_explorer do
    {
      class_name: 'Cumulus::Basepack::ApplicationExplorer',
      iconCls: 'icon-applications-small',
      title: 'Applications',
      border: false
    }
  end

  component :application_inspector do
    {
      class_name: 'Cumulus::Basepack::ApplicationInspector',
      iconCls: 'icon-applications-small',
      title: 'Applications',
      lazy_loading: true,
      border: false
    }
  end

2.rb

class Cumulus::Basepack::LazyCardPanel < Netzke::Basepack::Panel

  js_property :layout, 'card'

  js_method :add_card, <<-JS
    function() {
      console.log('adding card');
    }
  JS

  def initialize
    raise 'lol'
  end
end