Breaking out javascript into js files instead of inline

app/components/app_tab_panel.rb

@@ -39,15 +39,8 @@ class AppTabPanel < Netzke::Basepack::TabPanel
   end
 
   js_configure do |c|
-    c.on_sign_out = <<-JS
+    #gets js from app_tab_panel/javascripts/sign_out.js
-      //this will give a 401 error, but made 401 exceptions forward to 'users/sign_in'
+    c.mixin :sign_out
-      function(){
-        Ext.Ajax.request({
-           url: '/users/sign_out',
-           method: 'DELETE'
-        });        
-      }
-    JS
   end
 
 end

app/components/app_tab_panel/javascripts/sign_out.js

@@ -0,0 +1,9 @@
+{
+  //this will give a 401 error, but made 401 exceptions forward to 'users/sign_in'
+  onSignOut: function(){
+    Ext.Ajax.request({
+       url: '/users/sign_out',
+       method: 'DELETE'
+    });
+  }
+}

app/components/bikes.rb

@@ -37,19 +37,7 @@ class Bikes < Netzke::Basepack::Grid
   end
 
   js_configure do |c|
-    c.init_component = <<-JS
+    c.mixin :init_component
-          function(){
-            // calling superclass's initComponent
-            this.callParent();
-
-            // setting the 'rowclick' event
-            var view = this.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('bike_brand__brand')});
-            }, this);
-          }
-        JS
   end
 
   endpoint :select_bike_brand do |params, this|

app/components/bikes/javascripts/init_component.js

@@ -0,0 +1,13 @@
+{
+  initComponent: function(){
+    // calling superclass's initComponent
+    this.callParent();
+
+    // setting the 'rowclick' event
+    var view = this.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('bike_brand__brand')});
+    }, this);
+  }
+}

app/components/bikes_border.rb

@@ -16,22 +16,7 @@ class BikesBorder < Netzke::Base
   js_configure do |c|
     c.layout = :border
     c.border = false
-
+    c.mixin :init_component
-    # Overriding initComponent
-    c.init_component = <<-JS
-      function(){
-        // calling superclass's initComponent
-        this.callParent();
-
-        // setting the 'rowclick' event
-        var view = this.getComponent('bikes').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.selectBike({bike_id: record.get('id')});
-          this.getComponent('bike_logs').getStore().load();
-        }, this);
-      }
-    JS
   end
 
   endpoint :select_bike do |params, this|

app/components/bikes_border/javascripts/init_component.js

@@ -0,0 +1,14 @@
+{
+  initComponent: function(){
+    // calling superclass's initComponent
+    this.callParent();
+
+    // setting the 'rowclick' event
+    var view = this.getComponent('bikes').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.selectBike({bike_id: record.get('id')});
+      this.getComponent('bike_logs').getStore().load();
+    }, this);
+  }
+}

app/components/brands_and_models_border.rb

@@ -16,22 +16,7 @@ class BrandsAndModelsBorder < Netzke::Base
   js_configure do |c|
     c.layout = :border
     c.border = false
-
+    c.mixin :init_component
-    # 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|

app/components/brands_and_models_border/javascripts/init_component.js

@@ -0,0 +1,14 @@
+{
+  initComponent: 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);
+  }
+}

app/components/user_profile_border.rb

@@ -18,21 +18,7 @@ class UserProfileBorder < Netzke::Base
   js_configure do |c|
     c.layout = :border
     c.border = false
-
+    c.mixin :init_component
-    # Overriding initComponent
-    c.init_component = <<-JS
-      function(){
-        // calling superclass's initComponent
-        this.callParent();
-        this.getComponent('user_stats').updateStats();
-
-        var store = this.getComponent('user_logs').getStore()
-        store.on('load', function (store, records, operation, success){
-            console.log("Bitches");
-            this.getComponent('user_stats').updateStats();
-          }, this);
-      }
-    JS
   end
 
 end

app/components/user_profile_border/javascripts/init_component.js

@@ -0,0 +1,13 @@
+{
+  initComponent: function(){
+    // calling superclass's initComponent
+    this.callParent();
+    this.getComponent('user_stats').updateStats();
+
+    var store = this.getComponent('user_logs').getStore()
+    store.on('load', function (store, records, operation, success){
+        console.log("Bitches");
+        this.getComponent('user_stats').updateStats();
+      }, this);
+  }
+}

app/components/user_stats.rb

@@ -15,15 +15,7 @@ class UserStats < Netzke::Base
   js_configure do |c|
     c.body_padding = 15
     c.title = "User Stats"
-    #c.html = body_content()
+    c.mixin :user_stats
-    c.update_stats = <<-JS
-      function(){
-        // Call endpoint
-        this.serverUpdate({}, function(){
-          //success callback
-        }, this);
-      }
-    JS
   end
 
   endpoint :server_update do |params, this|

app/components/user_stats/javascripts/user_stats.js

@@ -0,0 +1,8 @@
+{
+  updateStats: function(){
+    // Call endpoint
+    this.serverUpdate({}, function(){
+      //success callback
+    }, this);
+  }
+}

app/components/users_and_profiles_border.rb

@@ -18,27 +18,7 @@ class UsersAndProfilesBorder < Netzke::Base
   js_configure do |c|
     c.layout = :border
     c.border = false
-
+    c.mixin :init_component
-    # Overriding initComponent
-    c.init_component = <<-JS
-      function(){
-        // calling superclass's initComponent
-        this.callParent();
-        var stats = this.getComponent('user_stats');
-        if (stats != undefined){
-          stats.updateStats();
-        }
-
-        // 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.getComponent('user_logs').getStore().load();
-        }, this);
-      }
-    JS
   end
 
   endpoint :select_user do |params, this|

app/components/users_and_profiles_border/javascripts/init_component.js

@@ -0,0 +1,19 @@
+{
+  initComponent: function(){
+    // calling superclass's initComponent
+    this.callParent();
+    var stats = this.getComponent('user_stats');
+    if (stats != undefined){
+      stats.updateStats();
+    }
+
+    // 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.getComponent('user_logs').getStore().load();
+    }, this);
+  }
+}