netzke-core 0.5.5 → 0.6.0

data/javascripts/core.js

@@ -1,34 +1,43 @@
 /*
 This file gets loaded along with the rest of Ext library at the initial load
+At this time the following constants have been set by Rails:
+
+  Netzke.RelativeUrlRoot - set to ActionController::Base.config.relative_url_root
+  Netzke.RelativeExtUrl - URL to ext files
 */
 
+// Initial stuff
+Ext.BLANK_IMAGE_URL = Netzke.RelativeExtUrl + "/resources/images/default/s.gif";
+Ext.ns('Ext.netzke'); // namespace for extensions that depend on Ext
+
+Netzke.deprecationWarning = function(msg){
+  if (typeof console == 'undefined') {
+    // no console defined
+  } else {
+    console.info("Netzke: " + msg);
+  }
+};
+
 // Check Ext JS version
 (function(){
-  var requiredExtVersion = "3.2.1";
+  var requiredExtVersion = "3.3.0";
   var currentExtVersion = Ext.version;
   if (requiredExtVersion !== currentExtVersion) {
-    alert("Netzke needs Ext " + requiredExtVersion + ". You have " + currentExtVersion + ".");
+    Netzke.deprecationWarning("Netzke needs Ext " + requiredExtVersion + ". You have " + currentExtVersion + ".");
   }
 })();
 
-// Initial stuff
-Ext.BLANK_IMAGE_URL = "/extjs/resources/images/default/s.gif";
-Ext.ns('Ext.netzke'); // namespace for extensions that depend on Ext
-Ext.ns('Netzke'); // Netzke namespace
-Ext.ns('Netzke.page'); // namespace for all widget instantces on the page
-Ext.ns('Netzke.pre'); // namespace for pre-built, static JS classes
-Ext.ns('Netzke.classes'); // namespace for finished netzke widgets
+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(){};
 
-// Type detection functions
-Netzke.isObject = function(o) {
-  return (o != null && typeof o == "object" && o.constructor.toString() == Object.toString());
-}
-
 // Some Ruby-ish String extensions
 // from http://code.google.com/p/inflection-js/
 String.prototype.camelize=function(lowFirstLetter)
@@ -63,548 +72,582 @@ String.prototype.humanize=function(lowFirstLetter)
   return str;
 };
 
-// Implementation of totalProperty, successProperty and root configuration options for ArrayReader
-Ext.data.ArrayReader = Ext.extend(Ext.data.JsonReader, {
-  readRecords : function(o){
-    var sid = this.meta ? this.meta.id : null;
-    var recordType = this.recordType, fields = recordType.prototype.fields;
-    var records = [];
-    var root = o[this.meta.root] || o, totalRecords = o[this.meta.totalProperty], success = o[this.meta.successProperty];
-    for(var i = 0; i < root.length; i++){
-      var n = root[i];
-      var values = {};
-      var id = ((sid || sid === 0) && n[sid] !== undefined && n[sid] !== "" ? n[sid] : null);
-      for(var j = 0, jlen = fields.length; j < jlen; j++){
-        var f = fields.items[j];
-        var k = f.mapping !== undefined && f.mapping !== null ? f.mapping : j;
-        var v = n[k] !== undefined ? n[k] : f.defaultValue;
-        v = f.convert(v, n);
-        values[f.name] = v;
-      }
-      var record = new recordType(values, id);
-      record.json = n;
-      records[records.length] = record;
-    }
-    return {
-      records : records,
-      totalRecords : totalRecords,
-      success : success
-    };
-  }
-});
+// This one is borrowed from prototype.js
+String.prototype.underscore = function() {
+  return this.replace(/::/g, '/')
+             .replace(/([A-Z]+)([A-Z][a-z])/g, '$1_$2')
+             .replace(/([a-z\d])([A-Z])/g, '$1_$2')
+             .replace(/-/g, '_')
+             .toLowerCase();
+}
 
-// Properties/methods common to all widget classes
-Ext.widgetMixIn = {
-  height: 400,
-  // width: 800,
-  border: false,
-  isNetzke: true, // to distinguish Netzke components from regular Ext components
-  latestResult: {}, // latest result returned from the server via an API call
-  
-  /*
-  Loads aggregatee into a container.
-  */
-  loadAggregatee: function(params){
-    // params that will be provided for the server API call (load_aggregatee_with_cache); all what's passed in params.params is merged in. This way we exclude from sending along such things as :scope, :callback, etc.
-    var apiParams = Ext.apply({id: params.id, container: params.container}, params.params); 
-    
-    // build the cached widgets list to send it to the server
-    var cachedWidgetNames = "";
-
-    // recursive function that checks the properties of the caller ("this") and returns the list of those that look like constructor, i.e. have an "xtype" property themselves
-    var classesList = function(pref){
-      var res = [];
-      for (name in this) {
-        if (this[name].xtype) {
-          res.push(pref + name);
-          this[name].classesList = classesList; // define the same function on each property on the fly
-          res = res.concat(this[name].classesList(pref + name + ".")); // ... and call it, providing our name along with the scope
-        }
-      }
-      return res;
-    };
-    
-    // assign this function to Netzke.classes and call it
-    Netzke.classes.classesList = classesList;
-    var cl = Netzke.classes.classesList("");
+// Usefull when using mixins
+Netzke.aliasMethodChain = function(klass, method, feature) {
+  klass[method + "Without" + feature.capitalize()] = klass[method];
+  klass[method] = klass[method + "With" + feature.capitalize()];
+}
 
-    // join the classes into a coma-separated list
-    var cache = "";
-    Ext.each(cl, function(c){cache += c + ",";});
-    
-    // for (name in Netzke.classes) {
-    //   cachedWidgetNames += name + ",";
-    // }
-    // apiParams.cache = cachedWidgetNames;
-    apiParams.cache = cache;
+// 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
     
-    // remember the passed callback for the future
-    if (params.callback) {
-      this.callbackHash[params.id] = params.callback; // per loaded widget, as there may be simultaneous calls
-    }
+    /*
+    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);
+    },
     
-    // visually disable the container while the widget is being loaded
-    // Ext.getCmp(params.container).disable();
+    /* initComponent common for all Netzke components */
+    initComponentWithNetzke : function(){
+      this.normalizeActions();
+      
+      this.detectActions(this);
+      
+      this.detectComponents(this.items);
+      
+      this.normalizeTools();
+      
+      this.processEndpoints();
+      
+      // This is where the references to different callback functions will be stored
+      this.callbackHash = {};
+      
+      // This is where we store the information about components that are currently being loaded with this.loadComponent()
+      this.componentsBeingLoaded = {};
 
-    if (params.container) Ext.getCmp(params.container).removeChild(); // remove the old widget if the container is specified
-    
-    // do the remote API call
-    this.loadAggregateeWithCache(apiParams);
-  },
-  
-  /*
-  Called by the server as callback about loaded widget
-  */
-  widgetLoaded : function(params){
-    if (this.fireEvent('widgetload')) {
-      // Enable the container after the widget is succesfully loaded
-      // this.getChildWidget(params.id).ownerCt.enable();
+      // 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();
+        }
+      }
+
+      // 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); }
+      }, 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');
       
-      // provide the callback to that widget that was loading the child, passing the child itself
-      var callbackFn = this.callbackHash[params.id.camelize(true)];
-      if (callbackFn) {
-        callbackFn.call(params.scope || this, this.getChildWidget(params.id));
-        delete this.callbackHash[params.id.camelize(true)];
+          var handler = this.toolActionHandler.createDelegate(this, [tool]);
+          normTools.push({id : tool, handler : handler, scope : this});
+        }, this);
+        this.tools = normTools;
       }
-    }
-  },
-  
-  /*
-  Returns the parent widget
-  */
-  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 widget (calls the parent to reload it as its aggregatee)
-  */
-  reload : function(){
-    var parent = this.getParent();
-    if (parent) {
-      parent.loadAggregatee({id:this.localId(parent), container:this.ownerCt.id});
-    } else {
-      window.location.reload();
-    }
-  },
-  
-  /*
-  Gets id in the context of provided parent. 
-  For example, the widgets "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 + "__", "");
-  },
-  
-  /*
-  Instantiates and inserts a widget into a container with layout 'fit'.
-  Arg: an JS object with the following keys:
-    - id: id of the receiving container
-    - config: configuration of the widget to be instantiated and inserted into the container
-  */
-  renderWidgetInContainer : function(params){
-    var cont = Ext.getCmp(params.container);
-    if (cont) {
-      cont.instantiateChild(params.config);
-    } else {
-      this.instantiateChild(params.config);
-    }
-  },
-  
-  /*
-  Reconfigures the widget
-  */
-  reconfigure: function(config){
-    this.ownerCt.instantiateChild(config)
-  },
-  
-  /*
-  Evaluates CSS
-  */
-  css : function(code){
-    var linkTag = document.createElement('style');
-    linkTag.type = 'text/css';
-    linkTag.innerHTML = code;
-    document.body.appendChild(linkTag);
-  },
-  
-  /*
-  Evaluates JS
-  */
-  js : 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 widget 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 widget; these methods are called in no particular order
-        2) {widget:widget_id, methods:arrayOfMethods}, used for recursive call to bulkExecute on some child widget
-
-  Example: 
-    - [
-        // the same as this.feedback("Your order is accepted")
-        {feedback: "You order is accepted"}, 
-
-        // the same as this.getChildWidget('users').bulkExecute([{setTitle:'Suprise!'}, {setDisabled:true}])
-        {widget:'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 (this[instr]) {
-          this[instr].apply(this, [instructions[instr]]);
-        } else {
-          var childWidget = this.getChildWidget(instr);
-          if (childWidget) {
-            childWidget.bulkExecute(instructions[instr]);
-          } else {
-            throw "Netzke: Unknown method or child widget '" + instr +"' in widget '" + this.id + "'"
-          }
+    },
+
+    /* 
+    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.");
       }
-    }
-  },
-  
-  // Get the child widget
-  getChildWidget : function(id){
-    if (id === "") {return this};
-    
-    var split = id.split("__");
-    if (split[0] === 'parent') {
-      split.shift();
-      var childInParentScope = split.join("__");
-      return this.getParent().getChildWidget(childInParentScope);
-    } else {
-      return Ext.getCmp(this.id+"__"+id);
-    }
-  },
-  
-  // Common handler for all widget'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);
-    }
-  },
+      params.name = params.name.underscore();
 
-  // 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]();
-    }
-  },
+      // 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();
 
-  // Returns API url based on provided API point
-  buildApiUrl: function(apip){
-    return "/netzke/" + this.id + "__" + apip;
-  },
+      var storedConfig = this.componentsBeingLoaded[params.name] = {};
 
-  // Does the call to the server and processes the response
-  callServer : function(intp, params, callback, scope){
-    if (!params) params = {};
-      Ext.Ajax.request({
-      params: params,
-      url: this.buildApiUrl(intp),
-      callback: function(options, success, response){
-        if (success) {
-          // 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
-    });
-  },
+      // Remember where the loaded component should be inserted into
+      if (params.container) {
+        storedConfig.container = params.container;
+      }
 
-  setResult: function(result) {
-    this.latestResult = result;
-  },
+      // 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;
+      }
 
-  /* Normalize an array of abstracted button configs into an array of Ext button configs according to the following rules:
-    - if the element is a string and <tt>scope</tt> has an action with this name, replace this element with that action; if <tt>scope</tt> has no corresponding action, don't do anything (Ext will take care of it - display as text, or a separator, etc)
-    - if the element is an object, then:
-    -- if this object has a <tt>menu</tt> property - it's a nested menu; the value is expected to be an array of abstracted button configs, so, proceed recursively.
-    -- if this object has a <tt>handler</tt> property and the value correspond to a function in <tt>scope</tt> - replace this value with the reference to that function
-  */
-  normalizeMenuItems: function(arry, scope){
-    var res = []; // new array
-    Ext.each(arry, function(o){
-      if (typeof o === "string") {
-        var camelized = o.camelize(true);
-        if (scope.actions[camelized]){
-          res.push(scope.actions[camelized]);
+      // 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);
+    },
+
+    /*
+    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];
+      
+        var componentInstance;
+      
+        if (storedConfig.container) {
+          var container = Ext.getCmp(storedConfig.container);
+          componentInstance = container.instantiateChild(config);
         } else {
-          // if there's no action with this name, maybe it's a separator or text or whatever
-          res.push(o);
+          componentInstance = this.instantiateChild(config);
         }
-      } else if (Netzke.isObject(o)) {
-        // look inside the objects...
-        if (o.menu) {
-          // ... and recursively process nested menus
-          o.menu = this.normalizeMenuItems(o.menu, scope);
-        } else if (o.handler && Ext.isFunction(scope[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 = scope[o.handler.camelize(true)];
+
+        if (storedConfig.callback) {
+          storedConfig.callback.call(storedConfig.scope || this, componentInstance);
         }
-        res.push(o);
       }
-    }, this);
-    
-    delete arry;
-    
-    return res;
-  },
-  
-  locateMenus : function(o) {
-    var keyWords = ["bbar", "tbar", "fbar"];
-    if (Ext.isObject(o)) {
-      Ext.each(keyWords, function(key){
-        if (o[key]) { 
-          o[key] = this.normalizeMenuItems(o[key], this); 
-        };
-      }, this);
-      
-      for (var key in o) {
-        if (keyWords.indexOf(key) == -1) {
-          this.locateMenus(o[key]);
+    },
+
+    /*
+    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
+          } 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 + "'"
+            }
+          }
         }
       }
-    } else if (Ext.isArray(o)) {
-      Ext.each(o, function(el){
-        this.locateMenus(el);
-      }, this);
-    }
+    },
+
+    // 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){
+      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
+      });
+    },
 
-  // Code run before calling Ext's constructor - normalizing config to provide Netzke additional functionality
-  commonBeforeConstructor : function(config){
-    // Dynamically create methods for api points, so that we could later call them like: this.myApiMethod()
-    var apiPoints = config.netzkeApi || [];
-    apiPoints.push('load_aggregatee_with_cache'); // all netzke widgets get this API point
-    Ext.each(apiPoints, function(intp){
-      this[intp.camelize(true)] = function(args, callback, scope){ this.callServer(intp, args, callback, scope); }
-    }, this);
-
-    // This will contain Ext.Action instances
-    this.actions = {};
-
-    // Create Ext.Action instances based on config.actions
-    if (config.actions) {
-      for (var name in config.actions) {
-        // Create an event for each action (so that higher-level widgets could interfere)
-        this.addEvents(name+'click');
+    setResult: function(result) {
+      this.latestResult = result;
+    },
 
-        // Configure the action
-        var actionConfig = config.actions[name];
-        actionConfig.customHandler = actionConfig.handler || actionConfig.fn; //DEPRECATED: .fn is kept for backward compatibility, preferred way is to specify handler
-        actionConfig.handler = this.actionHandler.createDelegate(this); // ! this is the "wrapper-handler", which is common for all actions!
-        actionConfig.name = name;
-        this.actions[name] = new Ext.Action(actionConfig);
-      }
-      
-      // TODO: need to rethink this action related stuff
-      config.actions = this.actions;
-    }
-    
-    this.locateMenus(config);
-    
-    // config.bbar = config.bbar && this.normalizeMenuItems(config.bbar, this);
-    // config.tbar = config.tbar && this.normalizeMenuItems(config.tbar, this);
-    // config.fbar = config.fbar && this.normalizeMenuItems(config.fbar, this);
-    config.contextMenu = config.contextMenu && this.normalizeMenuItems(config.contextMenu, this);
-
-    config.menu = config.menu && this.normalizeMenuItems(config.menu, this);
-
-    // Normalize tools
-    if (config.tools) {
-      var normTools = [];
-      Ext.each(config.tools, function(tool){
-        // Create an event for each action (so that higher-level widgets could interfere)
-        this.addEvents(tool.id+'click');
-
-        var handler = this.toolActionHandler.createDelegate(this, [tool]);
-        normTools.push({id : tool, handler : handler, scope : this});
-      }, this);
-      config.tools = normTools;
-    }
-    
-    // Set title
-    if (config.mode === "config"){
-      if (!config.title) {
-        config.title = '[' + config.id + ']';
-      } else {
-        config.title = config.title + ' [' + config.id + ']';
-      }
-    } else {
-      if (!config.title) {
-        config.title = config.id.humanize();
-      }
-    }
-  },
+    // At this moment component is fully initializied
+    commonAfterConstructor : function(config){
 
-  // At this moment component is fully initializied
-  commonAfterConstructor : function(config){
-    // From everywhere accessible FeedbackGhost
-    this.feedbackGhost = new Netzke.FeedbackGhost();
+      // Add the menus
+      if (this.initialConfig.menu) {this.addMenu(this.initialConfig.menu, this);}
 
-    // 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
+      );
 
-    // generic events
-    this.addEvents(
-      'widgetload' // fired when a child is dynamically loaded
-    );
+      // Cleaning up on destroy
+      this.on('beforedestroy', function(){
+        this.cleanUpMenu();
+      }, this);
 
-    // Cleaning up on destroy
-    this.on('beforedestroy', function(){
-      this.cleanUpMenu();
-    }, this);
-    
-    this.callbackHash = {};
+      this.callbackHash = {};
 
-    if (this.afterConstructor) this.afterConstructor(config);
-  },
+      if (this.afterConstructor) this.afterConstructor(config);
+    },
 
-  feedback:function(msg){
-    if (this.initialConfig && this.initialConfig.quiet) {
-      return false;
-    }
-    
-    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);
+    feedback:function(msg){
+      if (this.initialConfig && this.initialConfig.quiet) {
+        return false;
+      }
+
+      if (this.feedbackGhost) {
+        this.feedbackGhost.showFeedback(msg);
       } else {
-        var compoundResponse = "";
-        Ext.each(msg, function(m){
-          compoundResponse += m.msg + "\n"
-        });
-        if (compoundResponse != "") {
-          alert(compoundResponse);
+        // 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);
+          }
         }
       }
-    }
-  },
-
-  addMenu : function(menu, owner){
-    if (!owner) {
-      owner = this;
-    }
-    
-    if (!!this.hostMenu) { 
-      this.hostMenu(menu, owner); 
-    } else {
-      if (this.ownerWidget) {
-        this.ownerWidget.addMenu(menu, owner);
+    },
+
+    // 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);
       }
-    }
-  },
-  
-  cleanUpMenu : function(owner){
-    if (!owner) {
-      owner = this;
-    }
+    },
+
+    // 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]();
+      }
+    },
     
-    if (!!this.unhostMenu) { 
-      this.unhostMenu(owner); 
+    onComponentLoad:Ext.emptyFn // gets overridden
+  }
+}
+
+
+// Netzke extensions for Ext.Container
+Ext.override(Ext.Container, {
+  // Instantiates an component by its config. If it appears to be a window, shows it instead of adding as item.
+  // TODO: there must be a method to just instantiate a component, but not to add/show it instantly.
+  instantiateChild : function(config){
+    var instance = Ext.create(config);
+    if (instance.isXType("window")) {
+      instance.show();
     } else {
-      if (this.ownerWidget) {
-        this.ownerWidget.cleanUpMenu(owner);
-      }
+      this.remove(this.getNetzkeComponent()); // first delete previous component 
+      this.add(instance);
+      this.doLayout();
     }
+    return instance;
   },
-  
-  onWidgetLoad:Ext.emptyFn // gets overridden
-};
 
-// Netzke extensions for Ext.Container
-Ext.override(Ext.Container, {
   /** 
-    Get Netzke widget that this Ext.Container is part of (*not* the parent widget, for which call getParent)
+    Get Netzke component that this Ext.Container is part of (*not* the parent component, for which call getParent)
     It searches up the Ext.Container hierarchy until it finds a Container that has isNetzke property set to true
     (or until it reaches the top).
   */
-  getOwnerWidget : function(){
+  getOwnerComponent : function(){
     if (this.initialConfig.isNetzke) {
       return this;
     } else {
       if (this.ownerCt){
-        return this.ownerCt.getOwnerWidget()
+        return this.ownerCt.getOwnerComponent()
       } else {
         return null
       }
     }
   },
   
-  // Get the widget that we are hosting
-  getWidget: function(){
-    return this.items ? this.items.get(0) : null; // need this check in case when the container is not yet rendered, like an inactive tab in the TabPanel
+  // Get the component that we are hosting
+  getNetzkeComponent: function(){
+    return this.items ? this.items.first() : null; // need this check in case when the container is not yet rendered, like an inactive tab in the TabPanel
   },
   
   // Remove the child
   removeChild : function(){
-    this.remove(this.getWidget());
-  },
-
-  // Given a scoped class name, returns the actual class, e.g.: "Netzke.GridPanel" => Netzke.classes.Netzke.GridPanel
-  classifyScopedName : function(n){
-    var klass = Netzke.classes;
-    Ext.each(n.split("."), function(s){
-      klass = klass[s];
-    });
-    return klass;
-  },
-
-  // Instantiates an aggregatee by its config. If it appears to be a window, shows it instead of adding as item.
-  instantiateChild : function(config){
-    var klass = this.classifyScopedName(config.scopedClassName);
-    var instance = new klass(config);
-    if (instance.isXType("netzkewindow")) {
-      instance.show();
-    } else {
-      this.remove(this.getWidget()); // first delete previous widget 
-      this.add(instance);
-      this.doLayout();
-    }
+    this.remove(this.getNetzkeComponent());
   }
+
 });
 
 
@@ -636,5 +679,5 @@ Ext.apply(Netzke.FeedbackGhost.prototype, {
     } else {
       showBox(msg);
     }
-	}
+  }
 });