Hello world extjs

Let's create a simple "Hello world!" component and embed it into a Rails' view. It'll be an Ext.container.Viewport-based component. This application will look exactly like Hello world application from Senchas Getting Started tutorial.

Create YOUR_APP/app/components/hello_world_component.rb, and put in the following content:

class HelloWorldComponent < Netzke::Basepack::Viewport
  js_configure do |c|
    c.layout = :fit
  end

  def configure(c)
    super
    c.items = [
      title: "Hello Ext",
      html: "Hello! Welcome to Ext JS."
    ]
  end
end

Embedding the component into Rails views

To embed a Netzke component into your Rails view do the following:

• Add netzke routes:

# in routes.rb
RailsApp::Application.routes.draw do
  netzke
  ...
end

• In your layout, within the "head" tag, use the load_netzke helper to include all the necessary JavaScript and styles.

<%= load_netzke %>

# You can optionally specify an Ext theme:
<%= load_netzke :theme => 'neptune' %>

• In your view use the netzke helper to embed the component:

<%= netzke :hello_world_component %>

That's it. While playing with the component, use Firebug or similar tool to understand better what's going on behind the scenes. Also check the source code of the page embedding the component.

Troubleshooting

In app/views/layouts/application.html.erb, this tag:

<%= javascript_include_tag :defaults %>

currently conflicts with Netzke and should not be included.