Experimenting with Netzke/ ExtJS

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