Add lower tabs pane instead of splitting

app/components/user_and_profiles_lower_tabs.rb

@@ -0,0 +1,13 @@
+class UserAndProfilesLowerTabs < Netzke::Basepack::TabPanel
+  component :user_profiles
+  component :user_logs
+  component :user_stats
+
+  def configure(c)
+    c.prevent_header = true
+    c.items = [ :user_logs,
+      { netzke_component: :user_profiles, title: "User Profiles" },
+      { netzke_component: :user_stats, title: "User Stats" }]
+    super
+  end
+end

app/components/user_stats.rb

@@ -40,7 +40,7 @@ class UserStats < Netzke::Base
 
 private
   def user
-    controller.current_user
+    User.find_by_id(session[:selected_user_id]) || controller.current_user
   end
 
 end

app/components/users_and_profiles_border.rb

@@ -2,16 +2,14 @@ class UsersAndProfilesBorder < Netzke::Base
   # Remember regions collapse state and size
   include Netzke::Basepack::ItemPersistence
   component :users
-  component :user_profiles
+  component :user_and_profiles_lower_tabs
-  component :user_logs
 
   def configure(c)
     super
     c.header = false
     c.items = [
      { netzke_component: :users, header: "Users", region: :center, width: 350, split: true },
-     { netzke_component: :user_profiles, region: :south, height: 150, split: true},
+     { netzke_component: :user_and_profiles_lower_tabs, region: :south, height: 300, split: true}
-     { netzke_component: :user_logs, region: :east, split: true}
     ]
   end
 

app/components/users_and_profiles_border/javascripts/init_component.js

@@ -2,30 +2,48 @@
   initComponent: function(){
     // calling superclass's initComponent
     this.callParent();
-    var stats = this.getComponent('user_stats');
+    var stats = this.queryById('user_stats');
     if (stats != undefined){
       stats.updateStats();
     }
+
     if( this.queryById('user_profiles')){
       this.queryById('user_profiles').disable();
     }
+
     if( this.queryById('user_logs')){
       this.queryById('user_logs').disable();
+      //update user stats
+      var store = this.queryById('user_logs').getStore()
+      store.on('load', function (store, records, operation, success){
+        if( this.queryById('user_stats') ){
+          this.queryById('user_stats').updateStats();
+        }
+      }, this);
+
+    }
+    if( this.queryById('user_stats') ){
+      this.queryById('user_stats').disable();
     }
+
     // 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();
 
       if( this.queryById('user_profiles')){
+        this.queryById('user_profiles').getStore().load();
         this.queryById('user_profiles').enable();
       }
       if( this.queryById('user_logs')){
+        this.queryById('user_logs').getStore().load();
         this.queryById('user_logs').enable();
       }
+      if( this.queryById('user_stats') ){
+        this.queryById('user_stats').updateStats();
+        this.queryById('user_stats').enable();
+      }
     }, this);
   }
 }