Experimenting with Netzke/ ExtJS

Gemfile

@@ -2,6 +2,10 @@ source 'https://rubygems.org'
 
 gem 'rails', '3.2.1'
 
+gem 'netzke-core', '~>0.8.0'
+gem 'netzke-basepack', '~>0.8.0'
+
+
 gem 'sqlite3', '~> 1.3.5'
 gem 'devise', '~> 2.0.4'
 gem 'haml-rails', '~> 0.3.4'

app/components/app_tab_panel.rb

@@ -0,0 +1,13 @@
+class AppTabPanel < Netzke::Basepack::TabPanel
+ component :bikes
+ component :brands_and_models_border
+ component :users_and_profiles_border
+
+  def configure(c)
+    c.active_tab = 0
+    c.prevent_header = true
+    c.items = [ :bikes, :brands_and_models_border, :users_and_profiles_border]
+    super
+  end
+end
+

app/components/app_view.rb

@@ -0,0 +1,14 @@
+class AppView < Netzke::Basepack::Viewport
+  js_configure do |c|
+    c.layout = :fit
+  end
+
+  def configure(c)
+    super
+    c.items = [
+      {netzke_component: :app_tab_panel, region: :center}
+    ]
+  end
+
+  component :app_tab_panel
+end

app/components/bike_brands.rb

@@ -0,0 +1,26 @@
+class BikeBrands < Netzke::Basepack::Grid
+  def configure(c)
+    super
+    c.model = "BikeBrand"
+
+    
+=begin
+    c.columns = [
+      :done,
+      :name,
+      {name: :notes, flex: 1},
+      :priority,
+      {name: :due, header: "Due on"}
+    ]
+=end
+    #c.enable_context_menu = false
+    #c.context_menu = false
+    #c.enable_edit_in_form = false
+    #c.scope = {done: [nil, false]}
+  end
+
+  #override with nil to remove actions
+  def default_bbar
+    [ :apply, :add_in_form, :search ]
+  end
+end

app/components/bike_models.rb

@@ -0,0 +1,23 @@
+class BikeModels < Netzke::Basepack::Grid
+  def configure(c)
+    super
+
+    c.model = "BikeModel"
+    c.data_store = {auto_load: false}
+    c.scope = lambda { |rel| puts session.inspect; rel.where(:bike_brand_id => session[:selected_bike_brand_id]);}
+    #c.strong_default_attrs = lambda { |rel| puts rel.inspect;}
+    
+    c.columns = [
+      :model
+    ]
+    #c.enable_context_menu = false
+    #c.context_menu = false
+    #c.enable_edit_in_form = false
+    #c.scope = {done: [nil, false]}
+  end
+
+  #override with nil to remove actions
+  def default_bbar
+    [ :apply, :add_in_form, :search ]
+  end
+end

app/components/bikes.rb

@@ -0,0 +1,59 @@
+class Bikes < Netzke::Basepack::Grid
+  def configure(c)
+    super
+    c.model = "Bike"
+
+    c.columns = [
+      :serial_number,
+      { :name => :bike_brand__brand },
+      { :name => :bike_model__model,
+        :scope => lambda { |rel|
+                    if session[:selected_bike_brand_id]
+                      rel.where(:bike_brand_id => session[:selected_bike_brand_id])
+                    else
+                      rel.all
+                    end
+                  }
+      },
+      :color,
+      { :name => :bike_style__style },
+      :seat_tube_height,
+      :top_tube_length,
+      :wheel_size,
+      :value,
+      { :name => :bike_condition__condition},
+      { :name => :bike_status__status}
+    ]
+  end
+
+  #override with nil to remove actions
+  def default_bbar
+    [ :apply, :add_in_form ]
+  end
+
+  js_configure do |c|
+    c.init_component = <<-JS
+          function(){
+            // calling superclass's initComponent
+            this.callParent();
+
+            // setting the 'rowclick' event
+            var view = this.getView();
+            view.on('itemclick', function(view, record){
+            console.log(view);
+            console.log(record);
+              // The beauty of using Ext.Direct: calling 3 endpoints in a row, which results in a single call to the server!
+              this.selectBikeBrand({bike_brand_id: record.get('bike_brand__brand')});
+            }, this);
+          }
+        JS
+  end
+
+  endpoint :select_bike_brand do |params, this|
+    # store selected boss id in the session for this component's instance
+    session[:selected_bike_brand_id] = params[:bike_brand_id]
+    puts "BikeID-----------------------------"
+    #puts params[:bike_brand_id]
+    puts session.inspect
+  end
+end

app/components/brands_and_models.rb

@@ -0,0 +1,24 @@
+class Bikes < Netzke::Basepack::Grid
+  def configure(c)
+    super
+    c.model = "Bike"
+=begin
+    c.columns = [
+      :done,
+      :name,
+      {name: :notes, flex: 1},
+      :priority,
+      {name: :due, header: "Due on"}
+    ]
+=end
+    #c.enable_context_menu = false
+    #c.context_menu = false
+    #c.enable_edit_in_form = false
+    #c.scope = {done: [nil, false]}
+  end
+
+  #override with nil to remove actions
+  def default_bbar
+    [ :apply, :add_in_form ]
+  end
+end

app/components/brands_and_models_border.rb

@@ -0,0 +1,57 @@
+class BrandsAndModelsBorder < Netzke::Base
+  # Remember regions collapse state and size
+  include Netzke::Basepack::ItemPersistence
+  component :bike_brands
+  component :bike_models
+  def configure(c)
+    super
+    c.title = "Brands/Models"
+    c.items = [
+#      { netzke_component: :bike_brands, region: :center, split: true }
+     { netzke_component: :bike_brands, region: :center, split: true },
+     { netzke_component: :bike_models, region: :east, width: 500, 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('bike_brands').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.selectBikeBrand({bike_brand_id: record.get('id')});
+          this.getComponent('bike_models').getStore().load();
+        }, this);
+      }
+    JS
+  end
+
+  endpoint :select_bike_brand do |params, this|
+    # store selected boss id in the session for this component's instance
+    session[:selected_bike_brand_id] = params[:bike_brand_id]
+    puts "BikeBrandID-----------------------------"
+    #puts params[:bike_brand_id]
+    puts session.inspect
+
+=begin
+    brand = BikeBrand.find_by_id(params[:bike_brand_id])
+    bike_models_grid = component_instance(:bike_models)
+    bike_models_data = bike_models_grid.get_data
+
+    {
+      :bike_models=> {:load_store_data => bike_models_data, :set_title => "Models for #{brand.brand}"},
+    }
+=end 
+  end
+
+
+  
+end

app/components/user_profiles.rb

@@ -0,0 +1,22 @@
+class UserProfiles < Netzke::Basepack::Grid
+  def configure(c)
+    super
+    c.model = "UserProfile"
+    c.data_store = {auto_load: false}
+    c.scope = lambda { |rel| puts session.inspect; rel.where(:user_id => session[:selected_user_id]);}
+    c.columns = [
+      { :name => :bike__serial_number},
+      :addrStreet1,
+      :addrStreet2,
+      :addrCity,
+      :addrState,
+      :addrZip,
+      :phone
+    ]
+  end
+
+  #override with nil to remove actions
+  def default_bbar
+    [ :apply, :add_in_form ]
+  end
+end

app/components/users.rb

@@ -0,0 +1,18 @@
+class Users < Netzke::Basepack::Grid
+  def configure(c)
+    super
+    c.model = "User"
+
+    c.columns = [
+      :first_name,
+      :last_name,
+      :nickname,
+      :email
+    ]
+  end
+
+  #override with nil to remove actions
+  def default_bbar
+    [ :apply, :add_in_form ]
+  end
+end

app/components/users_and_profiles_border.rb

@@ -0,0 +1,44 @@
+class UsersAndProfilesBorder < Netzke::Base
+  # Remember regions collapse state and size
+  include Netzke::Basepack::ItemPersistence
+  component :users
+  component :user_profiles
+  def configure(c)
+    super
+    c.title = "Users/Profiles"
+    c.items = [
+     { netzke_component: :users, region: :center, split: true },
+     { netzke_component: :user_profiles, region: :south, height: 300, 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('users').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.selectUser({user_id: record.get('id')});
+          this.getComponent('user_profiles').getStore().load();
+        }, this);
+      }
+    JS
+  end
+
+  endpoint :select_user do |params, this|
+    # store selected boss id in the session for this component's instance
+    session[:selected_user_id] = params[:user_id]
+    puts "UserID-----------------------------"
+    #puts params[:bike_brand_id]
+    puts session.inspect
+  end
+  
+end

app/controllers/site_controller.rb

@@ -1,9 +1,12 @@
 class SiteController < ApplicationController
 
   def index
+  render :inline => "<%= netzke :app_view, :layout => true%>", :layout => "application"
+=begin
     respond_to do |format|
       format.html
     end
+=end
   end
 
 end

app/models/user.rb

@@ -9,6 +9,8 @@ class User < ActiveRecord::Base
   attr_accessible :email, :password, :password_confirmation, :remember_me,
     :first_name, :last_name, :nickname
 
+  has_many :user_profiles
+
   validates :first_name, :presence => true
   validates :last_name, :presence => true
 

app/models/user_profile.rb

@@ -0,0 +1,20 @@
+class UserProfile < ActiveRecord::Base
+  # Setup accessible (or protected) attributes for your model
+  attr_accessible :bike_id, :addrStreet1, :addrStreet2, :addrCity,
+    :addrState, :addrZip, :phone
+  
+  belongs_to :user
+  belongs_to :bike
+
+  validates :addrStreet1, :presence => true
+  validates :addrCity, :presence => true
+  validates :addrState, :presence => true
+  validates :addrZip, :presence => true
+  validates :phone, :presence => true
+
+  self.per_page = 15
+
+  def to_s
+    [addrStreet1, addrStreet2, addrCity, addrState, addrZip, phone].join(" - ")
+  end
+end

app/views/layouts/application.html.haml

@@ -1,51 +0,0 @@
-!!! 5
-%html{:lang => "en"}
-  %head
-    %meta{:charset => "utf-8"}/
-    %title= content_for?(:title) ? yield(:title) : "Mash"
-    = csrf_meta_tags
-    /[if lt IE 9]
-      = javascript_include_tag "http://html5shim.googlecode.com/svn/trunk/html5.js"
-    :css
-      body {
-        padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */
-      }
-    = stylesheet_link_tag "application", :media => "all"
-
-  %body
-    .navbar.navbar-fixed-top
-      .navbar-inner
-        .container
-          = link_to 'Velocipede', root_path, :class => 'brand'
-          .container.nav-collapse
-            %ul.nav
-              %li= link_to "Home", root_path
-              %li= link_to "Bikes", bikes_path
-              %li= link_to "Users", users_path
-            %ul.nav.pull-right
-              - if user_signed_in?
-                %li#logged_in_as
-                  = link_to "Hello #{current_user.first_name} #{current_user.last_name}", edit_user_registration_path
-                %li#logout
-                  = link_to 'Logout', destroy_user_session_path, :method => :delete
-              - else
-                %li#login
-                  = link_to 'Login', new_user_session_path
-                %li#register
-                  = link_to 'Register', new_user_registration_path
-
-    .container
-
-      .content
-        - if flash[:notice]
-          %p{:class => 'notice'}= flash[:notice]
-        - if flash[:alert]
-          %p{:class => 'alert'}= flash[:alert]
-        .row
-          .span13
-            = yield
-
-      %footer
-        %p © Rails App Template 2012
-
-    = javascript_include_tag "application"

config/routes.rb

@@ -1,6 +1,8 @@
 Velocipede::Application.routes.draw do
 
   devise_for :users
+  netzke
+=begin
   resources :users
   # The priority is based upon order of creation:
   # first created -> highest priority.
@@ -36,5 +38,6 @@ Velocipede::Application.routes.draw do
 
   #match ':loggable_type/:loggable_id/logs' => 'acts_as_loggable/logs#index', :as => 'loggable_logs'
 
+=end
   root :to => 'site#index'
 end

db/seeds.rb

@@ -22,6 +22,7 @@ if Rails.env.development?
 
   #create default dev user
   FactoryGirl.create(:user) if User.all.empty?
+  FactoryGirl.create(:user_profile) if UserProfile.all.empty?
 
   #create fake bikes
   if Bike.all.empty?

spec/factories/user_profiles.rb

@@ -0,0 +1,12 @@
+FactoryGirl.define do
+  factory :user_profile do
+    user_id 1
+    bike_id 1
+    addrStreet1 "Charles Street"
+    addrStreet2 "Apt #42"
+    addrCity "Baltimore"
+    addrState "MD"
+    addrZip "21231"
+    phone "(410)8675309"
+  end
+end