netzke-core 0.6.4 → 0.6.5

data/CHANGELOG.rdoc

@@ -1,3 +1,22 @@
+= v0.6.5 - 2011-01-14
+* enhancements
+  * Various fixes for IE
+  * Support for Sencha Touch
+  * An endpoint can now "call" JavaScript functions that accept multiple parameters, by specifying an array, e.g.:
+      {:some_js_function => [arg1, arg2]}
+  * New API: +js_mixin+ method to "mixin" JavaScript objects from external files (see RDocs).
+  * New JS class +componentLoadMask+ property to configure a mask when a component gets dynamically loaded with +loadComponent+. Accepts the same configuration as Ext.LoadMask.
+  * +js_include+ and +css_include+ accept both symbols and strings, where strings would contain full paths to the included file, whereas symbols get expanded to full paths following simple conventions (see RDocs for details).
+  * Make some of +Netzke::Core+ setup happen earlier in the loading process, so that we can safely use it while defining components.
+  * Performance improvements by memoizing +Base.constantize_class_name+.
+  * I18n for actions, see +Netzke::Actions+.
+
+* bug fix
+  * The "componentload" event now gets fired after a component is dynamically loaded. The handler receives the instance of the loaded component.
+  * Feedback does not insert a new div every time being called
+  * JS class caching was broken for name-scoped classes
+  * When a component was dynamically loaded into a hidden container, it wasn't shown when the container got shown next time
+
 = v0.6.4 - 2010-11-05
 * enhancements
   * Implemented Netzke.isLoading(), useful for testing

data/README.markdown

@@ -0,0 +1,43 @@
+## Netzke Core
+
+Netzke Core is the bare bones of the [Netzke framework](https://github.com/skozlov/netzke). For pre-built full-featured components (like grids, forms, tab/accordion panels, applications, etc), see [netzke-basepack](http://github.com/skozlov/netzke-basepack) (Ext JS).
+
+Netzke Core takes the burden of implementing the following key aspects of the framework:
+
+* JavaScript class generation
+* Client-server communication
+* Extendibility of components (with OOP, in both Ruby and JavaScript)
+* Unlimited nesting (composition)
+* Dynamic component loading
+* JavaScript class caching
+* Inclusion of “external” JavaScript CSS files
+* ... and more
+
+All this provides for fast, low-traffic, robust, highly maintainable applications.
+
+### Getting started
+
+* Follow the simple [installation](https://github.com/skozlov/netzke-core/wiki/Installation) steps.
+* Learn how to build the [Hello World!](https://github.com/skozlov/netzke-core/wiki/Hello-world-extjs) component.
+* Dive into the [documentation](https://github.com/skozlov/netzke/wiki).
+* Get help on the [Google Groups](http://groups.google.com/group/netzke).
+
+### Sencha Touch support
+
+Netzke Core has support for Sencha Touch, so you can create components for mobile web apps as easily.
+
+* Learn how to build the [Hello World!](https://github.com/skozlov/netzke-core/wiki/Hello-world-touch) Sencha Touch component.
+
+### Testing and playing with Netzke Core
+
+Netzke Core is bundled with Cucumber and RSpec tests. If you would like to contribute to the project, you may want to learn how to [run the tests](https://github.com/skozlov/netzke-core/wiki/Automated-testing).
+
+Besides, the bundled test application is a convenient [playground](https://github.com/skozlov/netzke-core/wiki/Playground) for those who search to experiment with the framework.
+
+### Useful links
+* [Project website](http://netzke.org).
+* [Documentation](https://github.com/skozlov/netzke/wiki).
+* [Live-demo](http://demo.netzke.org) (with sample code).
+* [Twitter](http://twitter.com/skozlov).
+
+*Copyright (c) 2008-2010 Sergei Kozlov, released under the MIT license*

data/TODO

@@ -1,11 +1,7 @@
-Make plugin-wide javascripts and stylesheets load automatically.
+Caching for netzke_controller-provided JS and CSS.
 Caching - investigate reusing (fragment?) caching of Rails.
 Use Ext.Direct in the Netzke controller.
 Let specify per API point if it will use a GET or a POST request.
-Re-work generators
-
-Some day
-* make gzipping generated JS code possible
 
 
 = Ideas that didn't work out

data/app/controllers/netzke_controller.rb

@@ -3,41 +3,73 @@ class NetzkeController < ApplicationController
   # Collect javascripts and stylesheets from all plugins that registered it in Netzke::Core.javascripts
   # TODO: caching
   # caches_action :netzke
-  def netzke
+  def ext
     respond_to do |format|
       format.js {
         res = initial_dynamic_javascript << "\n"
-        Netzke::Core.javascripts.each do |path|
+
+        # Core JavaScript
+        res << File.new(File.expand_path("../../../javascripts/core.js", __FILE__)).read
+        # Ext-specific JavaScript
+        res << File.new(File.expand_path("../../../javascripts/ext.js", __FILE__)).read
+
+        # Pluggable JavaScript (used by other Netzke-powered gems like netzke-basepack)
+        Netzke::Core.ext_javascripts.each do |path|
           f = File.new(path)
           res << f.read
         end
 
-        # If JS classes are not inserted into the main page, we need to render all the classes needed to load the page that includes us
-        # (i.e. netzke/netzke.js) here
-        if !Netzke::Core.javascript_on_main_page
-          rendered_classes = []
-          Netzke::Core.session[:netzke_components].each_pair do |k,v|
-            component = Netzke::Base.instance_by_config(v)
-            res << component.js_missing_code(rendered_classes.map(&:name))
-            rendered_classes += component.dependency_classes
-            rendered_classes.uniq!
-          end
+        render :text => defined?(::Rails) && ::Rails.env.production? ? res.strip_js_comments : res
+      }
+
+      format.css {
+        res = File.new(File.expand_path("../../../stylesheets/core.css", __FILE__)).read
+
+        # Pluggable stylesheets (may be used by other Netzke-powered gems like netzke-basepack)
+        Netzke::Core.ext_stylesheets.each do |path|
+          f = File.new(path)
+          res << f.read
+        end
+
+        render :text => res
+      }
+    end
+  end
+
+  def touch
+    respond_to do |format|
+      format.js {
+        res = initial_dynamic_javascript << "\n"
+
+        # Core JavaScript
+        res << File.new(File.expand_path("../../../javascripts/core.js", __FILE__)).read
+        # Touch-specific JavaScript
+        res << File.new(File.expand_path("../../../javascripts/touch.js", __FILE__)).read
+
+        # Pluggable JavaScript (may be used by other Netzke-powered gems like netzke-basepack)
+        Netzke::Core.touch_javascripts.each do |path|
+          f = File.new(path)
+          res << f.read
         end
 
         render :text => defined?(::Rails) && ::Rails.env.production? ? res.strip_js_comments : res
       }
 
       format.css {
-        res = ""
-        Netzke::Core.stylesheets.each do |path|
+        res = File.new(File.expand_path("../../../stylesheets/core.css", __FILE__)).read
+
+        # Pluggable stylesheets (may be used by other Netzke-powered gems like netzke-basepack)
+        Netzke::Core.touch_stylesheets.each do |path|
           f = File.new(path)
           res << f.read
         end
+
         render :text => res
       }
     end
   end
 
+
   # Main dispatcher of the HTTP requests. The URL contains the name of the component,
   # as well as the method of this component to be called, according to the double underscore notation.
   # E.g.: some_grid__post_grid_data.
@@ -67,4 +99,4 @@ class NetzkeController < ApplicationController
       res.join("\n")
     end
 
-end
+end

data/config/database.yml

@@ -0,0 +1,2 @@
+# This dummy file is only here to please cucumber environment
+test:

data/features/component_loader.feature

@@ -19,7 +19,6 @@ Feature: Component loader
     When I press "Load with feedback"
     Then I should see "Callback invoked!"
 
-
   @selenium
   Scenario: Component loader should load a window component with another component in it
     Given I am on the ComponentLoader test page
@@ -27,4 +26,10 @@ Feature: Component loader
     Then I should see "Simple Component Inside Window"
     And I should see "Inner text"
 
+  @selenium
+  Scenario: Component loader should load a component with params properly
+    Given I am on the ComponentLoader test page
+    When I press "Load with params"
+    Then I should see "Simple Component with changed HTML"
+
 

data/features/composition.feature

@@ -23,9 +23,11 @@ Feature: Composition
   Scenario: Server should be able to address (deeply) nested components
     Given I am on the SomeComposite test page
     When I press "Update west from server"
+    And I sleep 1 second
     Then I should see "Here's an update for west panel"
 
     When I press "Update east south from server"
+    And I sleep 1 second
     Then I should see "Here's an update for south panel in east panel"
 
 

data/features/js_include.feature

@@ -0,0 +1,18 @@
+Feature: JsMixins
+  In order to value
+  As a role
+  I want feature
+
+  @javascript
+  Scenario: ComponentWithJsMixin should behave
+    Given I am on the ComponentWithJsMixin test page
+    When I press "Action one"
+    Then I should see "Action One triggered!"
+    When I press "Action two"
+    Then I should see "Action Two triggered!"
+
+  @javascript
+  Scenario: ExtendedComponentWithJsMixin should behave, too
+    Given I am on the ExtendedComponentWithJsMixin test page
+    When I press "Action three"
+    Then I should see "Action Three triggered!"

data/features/nested_views.feature

@@ -0,0 +1,9 @@
+Feature: Nested views
+  In order to value
+  As a role
+  I want feature
+
+  @javascript
+  Scenario: A component with auto loaded content should render properly
+    When I go to the "panel with autoload" view
+    Then I should see "Autoloaded Panel"

data/features/persistence.feature

@@ -6,11 +6,13 @@ Feature: Persistence
   @javascript
   Scenario: The component with persistence should be able to store and retrieve a persistence setting
     When I go to the ComponentWithSessionPersistence test page
-    Then I should see "No Title (yet!)"
+    Then I should see "Default Title"
+    And I should see "Default HTML"
+    But I should not see "Title From Session"
+    And I should not see "HTML from session"
 
     When I press "Tell server to store new title"
     And I go to the ComponentWithSessionPersistence test page
-    Then I should see "New Title!"
-
-
+    Then I should see "Title From Session"
+    And I should see "HTML from session"
 

data/features/support/paths.rb

@@ -26,6 +26,9 @@ module NavigationHelpers
     when /the component loader page/
       '/panel/component_loader'
 
+    when /the "(.*)" view/
+      embedded_components_path(:action => $1.gsub(" ", "_"))
+
     when /the (.*) test page/
       components_path(:component => $1)
 

data/javascripts/core.js

@@ -11,7 +11,7 @@ Ext.BLANK_IMAGE_URL = Netzke.RelativeExtUrl + "/resources/images/default/s.gif";
 Ext.ns('Ext.netzke'); // namespace for extensions that depend on Ext
 
 Netzke.isLoading=function () {
-	return Netzke.runningRequests!=0;				
+  return Netzke.runningRequests!=0;
 }
 Netzke.runningRequests=0
 
@@ -23,25 +23,17 @@ Netzke.deprecationWarning = function(msg){
   }
 };
 
-// Check Ext JS version
-(function(){
-  var requiredExtVersion = "3.3.0";
-  var currentExtVersion = Ext.version;
-  if (requiredExtVersion !== currentExtVersion) {
-    Netzke.deprecationWarning("Netzke needs Ext " + requiredExtVersion + ". You have " + currentExtVersion + ".");
-  }
-})();
-
 Ext.ns('Netzke.page'); // namespace for all component instantces on the page
 Ext.ns('Netzke.classes'); // namespace for all component classes
-
-// Because of Netzke's double-underscore notation, Ext.TabPanel should have a different id-delimiter (yes, this should be in netzke-core)
-Ext.TabPanel.prototype.idDelimiter = "___";
-
-Ext.QuickTips.init();
-
-// We don't want no state managment by default, thank you!
-Ext.state.Provider.prototype.set = function(){};
+Ext.ns('Netzke.classes.Core'); // namespace for all component classes
+
+Netzke.chainApply = function(){
+  var res = {};
+  Ext.each(arguments, function(o){
+    Ext.apply(res, o);
+  });
+  return res;
+};
 
 // Some Ruby-ish String extensions
 // from http://code.google.com/p/inflection-js/
@@ -84,532 +76,179 @@ String.prototype.underscore = function() {
              .replace(/([a-z\d])([A-Z])/g, '$1_$2')
              .replace(/-/g, '_')
              .toLowerCase();
-}
+};
 
 // Usefull when using mixins
 Netzke.aliasMethodChain = function(klass, method, feature) {
   klass[method + "Without" + feature.capitalize()] = klass[method];
   klass[method] = klass[method + "With" + feature.capitalize()];
-}
-
-// Properties/methods common to all component classes
-Netzke.componentMixin = function(receiver){
-  return {
-    height: 400,
-    border: false,
-    isNetzke: true, // to distinguish Netzke components from regular Ext components
-    latestResult: {}, // latest result returned from the server via an API call
-
-    /*
-    Overriding the constructor to only apply an "alias method chain" to initComponent
-    */
-    constructor : function(config){
-      Netzke.aliasMethodChain(this, "initComponent", "netzke");
-      receiver.superclass.constructor.call(this, config);
-    },
-
-    /* initComponent common for all Netzke components */
-    initComponentWithNetzke : function(){
-      this.normalizeActions();
-
-      this.detectActions(this);
-
-      this.detectComponents(this.items);
+};
 
-      this.normalizeTools();
+Netzke.cache = [];
 
-      this.processEndpoints();
+// Registering a Netzke component
+Netzke.reg = function(xtype, klass) {
+  if (!Ext.ComponentMgr.types[xtype]) {
+    Ext.reg(xtype, klass);
+    Netzke.cache.push(xtype);
+  }
+};
 
-      // This is where the references to different callback functions will be stored
-      this.callbackHash = {};
+Netzke.classes.Core.Mixin = {};
 
-      // This is where we store the information about components that are currently being loaded with this.loadComponent()
-      this.componentsBeingLoaded = {};
+// Properties/methods common to all Netzke component classes
+Netzke.componentMixin = Ext.applyIf(Netzke.classes.Core.Mixin, {
+  isNetzke: true, // to distinguish Netzke components from regular Ext components
+  latestResult: {}, // latest result returned from the server via an API call
+  /*
+  Overriding the constructor to only apply an "alias method chain" to initComponent
+  */
+  // constructor: function(config){
+    // Netzke.aliasMethodChain(this, "initComponent", "netzke");
+    // receiver.superclass.constructor.call(this, config);
+  // },
 
-      // Set title
-      if (this.mode === "config"){
-        if (!this.title) {
-          this.title = '[' + this.id + ']';
-        } else {
-          this.title = this.title + ' [' + this.id + ']';
-        }
-      } else {
-        if (!this.title) {
-          this.title = this.id.humanize();
-        }
-      }
+  /*
+  Dynamically creates methods for api points, so that we could later call them like: this.myEndpointMethod()
+  */
+  processEndpoints: function(){
+    var endpoints = this.endpoints || [];
+    endpoints.push('deliver_component'); // all Netzke components get this endpoint
+    Ext.each(endpoints, function(intp){
+      this[intp.camelize(true)] = function(args, callback, scope){ this.callServer(intp, args, callback, scope); }
+    }, this);
+  },
 
-      // From everywhere accessible FeedbackGhost
-      this.feedbackGhost = new Netzke.FeedbackGhost();
-
-      // Call the original initComponent
-      this.initComponentWithoutNetzke();
-    },
-
-    /*
-    Dynamically creates methods for api points, so that we could later call them like: this.myEndpointMethod()
-    */
-    processEndpoints : function(){
-      var endpoints = this.endpoints || [];
-      endpoints.push('deliver_component'); // all Netzke components get this endpoint
-      Ext.each(endpoints, function(intp){
-        this[intp.camelize(true)] = function(args, callback, scope){ this.callServer(intp, args, callback, scope); }
+  /*
+  Detects component placeholders in the passed object (typically, "items"),
+  and merges them with the corresponding config from this.components.
+  This way it becomes ready to be instantiated properly by Ext.
+  */
+  detectComponents: function(o){
+    if (Ext.isObject(o)) {
+      if (o.items) this.detectComponents(o.items);
+    } else if (Ext.isArray(o)) {
+      var a = o;
+      Ext.each(a, function(el, i){
+        if (el.component) {
+          a[i] = Ext.apply(this.components[el.component.camelize(true)], el);
+          delete a[i].component;
+        } else if (el.items) this.detectComponents(el.items);
       }, this);
-    },
-
-    normalizeTools: function() {
-      if (this.tools) {
-        var normTools = [];
-        Ext.each(this.tools, function(tool){
-          // Create an event for each action (so that higher-level components could interfere)
-          this.addEvents(tool.id+'click');
-
-          var handler = this.toolActionHandler.createDelegate(this, [tool]);
-          normTools.push({id : tool, handler : handler, scope : this});
-        }, this);
-        this.tools = normTools;
-      }
-    },
-
-    /*
-    Replaces actions configs with Ext.Action instances, assigning default handler to them
-    */
-    normalizeActions : function(){
-      var normActions = {};
-      for (var name in this.actions) {
-        // Create an event for each action (so that higher-level components could interfere)
-        this.addEvents(name+'click');
-
-        // Configure the action
-        var actionConfig = this.actions[name];
-        actionConfig.customHandler = actionConfig.handler;
-        actionConfig.handler = this.actionHandler.createDelegate(this); // handler common for all actions
-        actionConfig.name = name;
-        normActions[name] = new Ext.Action(actionConfig);
-      }
-      delete(this.actions);
-      this.actions = normActions;
-    },
-
-    /*
-    Detects action configs in the passed object, and replaces them with instances of Ext.Action created by normalizeActions().
-    This detects action in arbitrary level of nesting, which means you can put any other components in your toolbar, and inside of them specify menus/items or even toolbars.
-    */
-    detectActions: function(o){
-      if (Ext.isObject(o)) {
-        if ((typeof o.handler === 'string') && Ext.isFunction(this[o.handler.camelize(true)])) {
-           // This button config has a handler specified as string - replace it with reference to a real function if it exists
-          o.handler = this[o.handler.camelize(true)].createDelegate(this);
-        }
-        // TODO: this should be configurable!
-        Ext.each(["bbar", "tbar", "fbar", "menu", "items", "contextMenu", "buttons"], function(key){
-          if (o[key]) {
-            var items = [].concat(o[key]); // we need to do it in order to esure that this instance has a separate bbar/tbar/etc, NOT shared via class' prototype
-            delete(o[key]);
-            o[key] = items;
-            this.detectActions(o[key]);
-          }
-        }, this);
-      } else if (Ext.isArray(o)) {
-        var a = o;
-        Ext.each(a, function(el, i){
-          if (Ext.isObject(el)) {
-            if (el.action) {
-              if (!this.actions[el.action.camelize(true)]) throw "Netzke: action '"+el.action+"' not defined";
-              a[i] = this.actions[el.action.camelize(true)];
-              delete(el);
-            } else {
-              this.detectActions(el);
-            }
-          }
-        }, this);
-      }
-    },
-
-    /*
-    Detects component placeholders in the passed object (typically, "items"),
-    and merges them with the corresponding config from this.components.
-    This way it becomes ready to be instantiated properly by Ext.
-    */
-    detectComponents: function(o){
-      if (Ext.isObject(o)) {
-        if (o.items) this.detectComponents(o.items);
-      } else if (Ext.isArray(o)) {
-        var a = o;
-        Ext.each(a, function(el, i){
-          if (el.component) {
-            a[i] = Ext.apply(this.components[el.component.camelize(true)], el);
-            delete a[i].component;
-          } else if (el.items) this.detectComponents(el.items);
-        }, this);
-      }
-    },
-
-    /*
-    Loads a component. Config options:
-    'name' (required) - the name of the child component to load
-    'container' - the id of a panel with the 'fit' layout where the loaded component will be instantiated
-    'callback' - function that gets called after the component is loaded. It receives the component's instance as parameter.
-    'scope' - scope for the callback.
-    */
-    loadComponent: function(params){
-      if (params.id) {
-        params.name = params.id;
-        Netzke.deprecationWarning("Using 'id' in loadComponent is deprecated. Use 'name' instead.");
-      }
-
-      params.name = params.name.underscore();
-
-      // params that will be provided for the server API call (deliver_component); all what's passed in params.params is merged in. This way we exclude from sending along such things as :scope, :callback, etc.
-      var serverParams = params.params || {};
-      serverParams.name = params.name;
-
-      // Build the list of already loaded ("cached") classes
-      serverParams.cache = [];
-
-      for (var klass in Netzke.classes) {
-        serverParams.cache.push(klass);
-      }
-
-      serverParams.cache = serverParams.cache.join();
-
-      var storedConfig = this.componentsBeingLoaded[params.name] = {};
-
-      // Remember where the loaded component should be inserted into
-      if (params.container) {
-        storedConfig.container = params.container;
-      }
-
-      // remember the passed callback for the future (per loaded component, as there may be simultaneous ongoing calls)
-      if (params.callback) {
-        storedConfig.callback = params.callback;
-        storedConfig.scope = params.scope;
-        // this.callbackHash[params.name.underscore()] = params.callback;
-      }
-
-      // remove the old component if the container is specified
-      if (params.container) Ext.getCmp(params.container).removeChild();
+    }
+  },
 
-      // do the remote API call
-      this.deliverComponent(serverParams);
-    },
+  /*
+  Evaluates CSS
+  */
+  evalCss : function(code){
+    var head = Ext.fly(document.getElementsByTagName('head')[0]);
+    Ext.DomHelper.append(head, {
+      tag: 'style',
+      type: 'text/css',
+      html: code
+    });
+  },
 
-    /*
-    Called by the server after we ask him to load a component
-    */
-    componentDelivered : function(config){
-      if (this.fireEvent('componentload'), config) {
-        var storedConfig = this.componentsBeingLoaded[config.name] || {};
-        delete this.componentsBeingLoaded[config.name];
+  /*
+  Evaluates JS
+  */
+  evalJs : function(code){
+    eval(code);
+  },
 
-        var componentInstance;
+  /*
+  Gets id in the context of provided parent.
+  For example, the components "properties", being a child of "books" has global id "books__properties",
+  which *is* its widegt's real id. This methods, with the instance of "books" passed as parameter,
+  returns "properties".
+  */
+  localId : function(parent){
+    return this.id.replace(parent.id + "__", "");
+  },
 
-        if (storedConfig.container) {
-          var container = Ext.getCmp(storedConfig.container);
-          componentInstance = container.instantiateChild(config);
+  /*
+  Executes a bunch of methods. This method is called almost every time a communication to the server takes place.
+  Thus the server side of a component can provide any set of commands to its client side.
+  Args:
+    - instructions: array of methods, in the order of execution.
+      Each item is an object in one of the following 2 formats:
+        1) {method1:args1, method2:args2}, where methodN is a name of a public method of this component; these methods are called in no particular order
+        2) {component:component_id, methods:arrayOfMethods}, used for recursive call to bulkExecute on some child component
+
+  Example:
+    - [
+        // the same as this.feedback("Your order is accepted")
+        {feedback: "You order is accepted"},
+
+        // the same as this.getChildComponent('users').bulkExecute([{setTitle:'Suprise!'}, {setDisabled:true}])
+        {component:'users', methods:[{setTitle:'Suprise!'}, {setDisabled:true}] },
+
+        // ... etc:
+        {updateStore:{records:[[1, 'Name1'],[2, 'Name2']], total:10}},
+        {setColums:[{},{}]},
+        {setMenus:[{},{}]},
+        ...
+      ]
+  */
+  bulkExecute : function(instructions){
+    if (Ext.isArray(instructions)) {
+      Ext.each(instructions, function(instruction){ this.bulkExecute(instruction)}, this);
+    } else {
+      for (var instr in instructions) {
+        if (Ext.isFunction(this[instr])) {
+          // Executing the method. If arguments are an array, expand that into arguments.
+          this[instr].apply(this, Ext.isArray(instructions[instr]) ? instructions[instr] : [instructions[instr]]);
         } else {
-          componentInstance = this.instantiateChild(config);
-        }
-
-        if (storedConfig.callback) {
-          storedConfig.callback.call(storedConfig.scope || this, componentInstance);
-        }
-      }
-    },
-
-    /*
-    Instantiates and inserts a component into a container with layout 'fit'.
-    Arg: an JS object with the following keys:
-      - id: id of the receiving container
-      - config: configuration of the component to be instantiated and inserted into the container
-    */
-    // renderComponentInContainer : function(params){
-    //   var cont = Ext.getCmp(params.container);
-    //   if (cont) {
-    //     cont.instantiateChild(params.config);
-    //   } else {
-    //     this.instantiateChild(params.config);
-    //   }
-    // },
-
-    /*
-    Returns the parent component
-    */
-    getParent: function(){
-      // simply cutting the last part of the id: some_parent__a_kid__a_great_kid => some_parent__a_kid
-      var idSplit = this.id.split("__");
-      idSplit.pop();
-      var parentId = idSplit.join("__");
-
-      return parentId === "" ? null : Ext.getCmp(parentId);
-    },
-
-    /*
-    Reloads current component (calls the parent to reload it as its component)
-    */
-    reload : function(){
-      var parent = this.getParent();
-      if (parent) {
-        parent.loadComponent({id:this.localId(parent), container:this.ownerCt.id});
-      } else {
-        window.location.reload();
-      }
-    },
-
-    /*
-    Gets id in the context of provided parent.
-    For example, the components "properties", being a child of "books" has global id "books__properties",
-    which *is* its widegt's real id. This methods, with the instance of "books" passed as parameter,
-    returns "properties".
-    */
-    localId : function(parent){
-      return this.id.replace(parent.id + "__", "");
-    },
-
-    /*
-    Reconfigures the component
-    */
-    reconfigure: function(config){
-      this.ownerCt.instantiateChild(config)
-    },
-
-    /*
-    Evaluates CSS
-    */
-    evalCss : function(code){
-      var linkTag = document.createElement('style');
-      linkTag.type = 'text/css';
-      linkTag.innerHTML = code;
-      document.body.appendChild(linkTag);
-    },
-
-    /*
-    Evaluates JS
-    */
-    evalJs : function(code){
-      eval(code);
-    },
-
-    /*
-    Executes a bunch of methods. This method is called almost every time a communication to the server takes place.
-    Thus the server side of a component can provide any set of commands to its client side.
-    Args:
-      - instructions: array of methods, in the order of execution.
-        Each item is an object in one of the following 2 formats:
-          1) {method1:args1, method2:args2}, where methodN is a name of a public method of this component; these methods are called in no particular order
-          2) {component:component_id, methods:arrayOfMethods}, used for recursive call to bulkExecute on some child component
-
-    Example:
-      - [
-          // the same as this.feedback("Your order is accepted")
-          {feedback: "You order is accepted"},
-
-          // the same as this.getChildComponent('users').bulkExecute([{setTitle:'Suprise!'}, {setDisabled:true}])
-          {component:'users', methods:[{setTitle:'Suprise!'}, {setDisabled:true}] },
-
-          // ... etc:
-          {updateStore:{records:[[1, 'Name1'],[2, 'Name2']], total:10}},
-          {setColums:[{},{}]},
-          {setMenus:[{},{}]},
-          ...
-        ]
-    */
-    bulkExecute : function(instructions){
-      if (Ext.isArray(instructions)) {
-        Ext.each(instructions, function(instruction){ this.bulkExecute(instruction)}, this);
-      } else {
-        for (var instr in instructions) {
-          if (Ext.isFunction(this[instr])) {
-            this[instr].apply(this, [instructions[instr]]); // execute the method
+          var childComponent = this.getChildComponent(instr);
+          if (childComponent) {
+            childComponent.bulkExecute(instructions[instr]);
           } else {
-            var childComponent = this.getChildComponent(instr);
-            if (childComponent) {
-              childComponent.bulkExecute(instructions[instr]);
-            } else {
-              throw "Netzke: Unknown method or child component '" + instr +"' in component '" + this.id + "'"
-            }
+            throw "Netzke: Unknown method or child component '" + instr +"' in component '" + this.id + "'"
           }
         }
       }
-    },
-
-    // Get the child component
-    getChildComponent : function(id){
-      if (id === "") {return this};
-      id = id.underscore();
-      var split = id.split("__");
-      if (split[0] === 'parent') {
-        split.shift();
-        var childInParentScope = split.join("__");
-        return this.getParent().getChildComponent(childInParentScope);
-      } else {
-        return Ext.getCmp(this.id+"__"+id);
-      }
-    },
-
-    // Common handler for all component's actions. <tt>comp</tt> is the Component that triggered the action (e.g. button or menu item)
-    // actionHandler : function(comp){
-    //   var actionName = comp.name;
-    //   // If firing corresponding event doesn't return false, call the handler
-    //   if (this.fireEvent(actionName+'click', comp)) {
-    //     var action = this.actions[actionName];
-    //     var customHandler = action.initialConfig.customHandler;
-    //     var methodName = (customHandler && customHandler.camelize(true)) || "on" + actionName.camelize();
-    //     if (!this[methodName]) {throw "Netzke: action handler '" + methodName + "' is undefined"}
-    //
-    //     // call the handler passing it the triggering component
-    //     this[methodName](comp);
-    //   }
-    // },
-    //
-    // // Common handler for tools
-    // toolActionHandler : function(tool){
-    //   // If firing corresponding event doesn't return false, call the handler
-    //   if (this.fireEvent(tool.id+'click')) {
-    //     var methodName = "on"+tool.camelize();
-    //     if (!this[methodName]) {throw "Netzke: handler for tool '"+tool+"' is undefined"}
-    //     this[methodName]();
-    //   }
-    // },
-
-    // Returns API url based on provided API point
-    buildApiUrl: function(endpoint){
-      Netzke.deprecationWarning("buildApiUrl() is deprecated. Use endpointUrl() first");
-      return this.endpointUrl(endpoint);
-    },
-
-    endpointUrl: function(endpoint){
-      return Netzke.RelativeUrlRoot + "/netzke/" + this.id + "__" + endpoint;
-    },
-
-    // Does the call to the server and processes the response
-    callServer : function(intp, params, callback, scope){
-      Netzke.runningRequests++;
-      if (!params) params = {};
-        Ext.Ajax.request({
-        params: params,
-        url: this.endpointUrl(intp),
-        callback: function(options, success, response){
-          if (success && response.responseText) {
-            // execute commands from server
-            this.bulkExecute(Ext.decode(response.responseText));
-
-            // provide callback if needed
-            if (typeof callback == 'function') {
-              if (!scope) scope = this;
-              callback.apply(scope, [this.latestResult]);
-            }
-          }
-        },
-        scope : this
-      });
-      Netzke.runningRequests--;
-    },
-
-    setResult: function(result) {
-      this.latestResult = result;
-    },
-
-    // At this moment component is fully initializied
-    commonAfterConstructor : function(config){
-
-      // Add the menus
-      if (this.initialConfig.menu) {this.addMenu(this.initialConfig.menu, this);}
-
-      // generic events
-      this.addEvents(
-        'componentload' // fired when a child is dynamically loaded
-      );
-
-      // Cleaning up on destroy
-      this.on('beforedestroy', function(){
-        this.cleanUpMenu();
-      }, this);
-
-      this.callbackHash = {};
+    }
+  },
 
-      if (this.afterConstructor) this.afterConstructor(config);
-    },
+  // Returns API url based on provided API point
+  buildApiUrl: function(endpoint){
+    Netzke.deprecationWarning("buildApiUrl() is deprecated. Use endpointUrl() instead.");
+    return this.endpointUrl(endpoint);
+  },
 
-    feedback:function(msg){
-      if (this.initialConfig && this.initialConfig.quiet) {
-        return false;
-      }
+  endpointUrl: function(endpoint){
+    return Netzke.RelativeUrlRoot + "/netzke/" + this.id + "__" + endpoint;
+  },
 
-      if (this.feedbackGhost) {
-        this.feedbackGhost.showFeedback(msg);
-      } else {
-        // there's no application to show the feedback - so, we do it ourselves
-        if (typeof msg == 'string'){
-          alert(msg);
-        } else {
-          var compoundResponse = "";
-          Ext.each(msg, function(m){
-            compoundResponse += m.msg + "\n"
-          });
-          if (compoundResponse != "") {
-            alert(compoundResponse);
+  // Does the call to the server and processes the response
+  callServer : function(intp, params, callback, scope){
+    Netzke.runningRequests++;
+    if (!params) params = {};
+      Ext.Ajax.request({
+      params: params,
+      url: this.endpointUrl(intp),
+      callback: function(options, success, response){
+        if (success && response.responseText) {
+          // execute commands from server
+          this.bulkExecute(Ext.decode(response.responseText));
+
+          // provide callback if needed
+          if (typeof callback == 'function') {
+            if (!scope) scope = this;
+            callback.apply(scope, [this.latestResult]);
           }
         }
-      }
-    },
-
-    // addMenu : function(menu, owner){
-    //   if (!owner) {
-    //     owner = this;
-    //   }
-    //
-    //   if (!!this.hostMenu) {
-    //     this.hostMenu(menu, owner);
-    //   } else {
-    //     if (this.ownerComponent) {
-    //       this.ownerComponent.addMenu(menu, owner);
-    //     }
-    //   }
-    // },
-    //
-    // cleanUpMenu : function(owner){
-    //   if (!owner) {
-    //     owner = this;
-    //   }
-    //
-    //   if (!!this.unhostMenu) {
-    //     this.unhostMenu(owner);
-    //   } else {
-    //     if (this.ownerComponent) {
-    //       this.ownerComponent.cleanUpMenu(owner);
-    //     }
-    //   }
-    // },
-
-    // Common handler for all component's actions. <tt>comp</tt> is the Component that triggered the action (e.g. button or menu item)
-    actionHandler : function(comp){
-      var actionName = comp.name;
-      // If firing corresponding event doesn't return false, call the handler
-      if (this.fireEvent(actionName+'click', comp)) {
-        var action = this.actions[actionName];
-        var customHandler = action.initialConfig.customHandler;
-        var methodName = (customHandler && customHandler.camelize(true)) || "on" + actionName.camelize();
-        if (!this[methodName]) {throw "Netzke: action handler '" + methodName + "' is undefined"}
-
-        // call the handler passing it the triggering component
-        this[methodName](comp);
-      }
-    },
-
-    // Common handler for tools
-    toolActionHandler : function(tool){
-      // If firing corresponding event doesn't return false, call the handler
-      if (this.fireEvent(tool.id+'click')) {
-        var methodName = "on"+tool.camelize();
-        if (!this[methodName]) {throw "Netzke: handler for tool '"+tool+"' is undefined"}
-        this[methodName]();
-      }
-    },
+      },
+      scope : this
+    });
+    Netzke.runningRequests--;
+  },
 
-    onComponentLoad:Ext.emptyFn // gets overridden
+  setResult: function(result) {
+    this.latestResult = result;
   }
-}
+});
 
 
 // Netzke extensions for Ext.Container
@@ -623,7 +262,14 @@ Ext.override(Ext.Container, {
     } else {
       this.remove(this.getNetzkeComponent()); // first delete previous component
       this.add(instance);
-      this.doLayout();
+
+      // Sometimes a child is getting loaded into a hidden container...
+      if (this.isVisible()) {
+        this.doLayout();
+      } else {
+        this.on('show', function(cmp){cmp.doLayout();}, {single: true});
+      }
+
     }
     return instance;
   },
@@ -654,7 +300,6 @@ Ext.override(Ext.Container, {
   removeChild : function(){
     this.remove(this.getNetzkeComponent());
   }
-
 });
 
 
@@ -672,7 +317,9 @@ Ext.apply(Netzke.FeedbackGhost.prototype, {
 
     var showBox = function(msg, lvl){
       if (!lvl) {lvl = 'notice'};
-      var msgCt = Ext.DomHelper.insertFirst(document.body, {'class':'netzke-feedback'}, true);
+
+      var msgCt = Ext.get('netzke-feedback') || Ext.DomHelper.insertFirst(document.body, {id: 'netzke-feedback', 'class':'netzke-feedback'}, true);
+
       var m = Ext.DomHelper.append(msgCt, {html:createBox(msg,lvl)}, true);
       m.slideIn('t').pause(2).ghost("b", {remove:true});
     }