Roo/Template.js
[roojs1] / roojs-debug.js
index c538abb..bd74343 100644 (file)
@@ -85,6 +85,12 @@ Roo.apply = function(o, c, defaults){
          * @type Boolean
          */
         isReady : false,
+        /**
+         * Turn on debugging output (currently only the factory uses this)
+         * @type Boolean
+         */
+        
+        debug: false,
 
         /**
          * True to automatically uncache orphaned Roo.Elements periodically (defaults to true)
@@ -297,7 +303,7 @@ Roo.factory(conf, Roo.data);
                 return c;
             }
             if (ns[c.xtype]) {
-                if (Roo.debug) console.log("Roo.Factory(" + c.xtype + ")");
+                if (Roo.debug) Roo.log("Roo.Factory(" + c.xtype + ")");
                 var ret = new ns[c.xtype](c);
                 ret.xns = false;
                 return ret;
@@ -305,7 +311,20 @@ Roo.factory(conf, Roo.data);
             c.xns = false; // prevent recursion..
             return c;
         },
-         
+         /**
+         * Logs to console if it can.
+         *
+         * @param {String|Object} string
+         * @method log
+         */
+        log : function(s)
+        {
+            if ((typeof(console) == 'undefined') || (typeof(console.log) == 'undefined')) {
+                return; // alerT?
+            }
+            console.log(s);
+            
+        },
         /**
          * Takes an object and converts it to an encoded URL. e.g. Roo.urlEncode({foo: 1, bar: 2}); would return "foo=1&bar=2".  Optionally, property values can be arrays, instead of keys and the resulting string that's returned will contain a name/value pair for each array value.
          * @param {Object} o
@@ -4409,36 +4428,43 @@ Roo.Template.prototype = {
      * @return {String} The HTML fragment
      */
     applyTemplate : function(values){
-        if(this.compiled){
-            return this.compiled(values);
-        }
-        var useF = this.disableFormats !== true;
-        var fm = Roo.util.Format, tpl = this;
-        var fn = function(m, name, format, args){
-            if(format && useF){
-                if(format.substr(0, 5) == "this."){
-                    return tpl.call(format.substr(5), values[name], values);
-                }else{
-                    if(args){
-                        // quoted values are required for strings in compiled templates, 
-                        // but for non compiled we need to strip them
-                        // quoted reversed for jsmin
-                        var re = /^\s*['"](.*)["']\s*$/;
-                        args = args.split(',');
-                        for(var i = 0, len = args.length; i < len; i++){
-                            args[i] = args[i].replace(re, "$1");
-                        }
-                        args = [values[name]].concat(args);
+        try {
+            
+            if(this.compiled){
+                return this.compiled(values);
+            }
+            var useF = this.disableFormats !== true;
+            var fm = Roo.util.Format, tpl = this;
+            var fn = function(m, name, format, args){
+                if(format && useF){
+                    if(format.substr(0, 5) == "this."){
+                        return tpl.call(format.substr(5), values[name], values);
                     }else{
-                        args = [values[name]];
+                        if(args){
+                            // quoted values are required for strings in compiled templates, 
+                            // but for non compiled we need to strip them
+                            // quoted reversed for jsmin
+                            var re = /^\s*['"](.*)["']\s*$/;
+                            args = args.split(',');
+                            for(var i = 0, len = args.length; i < len; i++){
+                                args[i] = args[i].replace(re, "$1");
+                            }
+                            args = [values[name]].concat(args);
+                        }else{
+                            args = [values[name]];
+                        }
+                        return fm[format].apply(fm, args);
                     }
-                    return fm[format].apply(fm, args);
+                }else{
+                    return values[name] !== undefined ? values[name] : "";
                 }
-            }else{
-                return values[name] !== undefined ? values[name] : "";
-            }
-        };
-        return this.html.replace(this.re, fn);
+            };
+            return this.html.replace(this.re, fn);
+        } catch (e) {
+            Roo.log(e);
+            throw e;
+        }
+         
     },
     
     /**
@@ -7373,10 +7399,17 @@ if(opt.anim.isAnimated()){
          */
         setStyle : function(prop, value){
             if(typeof prop == "string"){
+                
+                if (prop == 'float') {
+                    this.setStyle(Roo.isIE ? 'styleFloat'  : 'cssFloat', value);
+                    return this;
+                }
+                
                 var camel;
                 if(!(camel = propCache[prop])){
                     camel = propCache[prop] = prop.replace(camelRe, camelFn);
                 }
+                
                 if(camel == 'opacity') {
                     this.setOpacity(value);
                 }else{
@@ -23239,12 +23272,13 @@ Roo.SplitBar.BOTTOM = 4;
  <pre><code>
  var store = new Roo.data.Store(...);
 
- var view = new Roo.View("my-element",
- '&lt;div id="{0}"&gt;{2} - {1}&lt;/div&gt;', // auto create template
- {
- singleSelect: true,
- selectedClass: "ydataview-selected",
- store: store
+ var view = new Roo.View({
+    el : "my-element",
+    template : '&lt;div id="{0}"&gt;{2} - {1}&lt;/div&gt;', // auto create template
+    singleSelect: true,
+    selectedClass: "ydataview-selected",
+    store: store
  });
 
  // listen for node click?
@@ -23259,26 +23293,37 @@ Roo.SplitBar.BOTTOM = 4;
  * <br><br>
  * <b>Note: The root of your template must be a single node. Table/row implementations may work but are not supported due to
  * IE"s limited insertion support with tables and Opera"s faulty event bubbling.</b>
+ * 
+ * Note: old style constructor is still suported (container, template, config)
+ * 
  * @constructor
  * Create a new View
- * @param {String/HTMLElement/Element} container The container element where the view is to be rendered.
- * @param {String/DomHelper.Template} tpl The rendering template or a string to create a template with
  * @param {Object} config The config object
+ * 
  */
-Roo.View = function(container, tpl, config){
-    this.el = Roo.get(container);
-    if(typeof tpl == "string"){
-        tpl = new Roo.Template(tpl);
+Roo.View = function(config, depreciated_tpl, depreciated_config){
+    
+    if (typeof(depreciated_tpl) == 'undefined') {
+        // new way.. - universal constructor.
+        Roo.apply(this, config);
+        this.el  = Roo.get(this.el);
+    } else {
+        // old format..
+        this.el  = Roo.get(config);
+        this.tpl = depreciated_tpl;
+        Roo.apply(this, depreciated_config);
     }
-    tpl.compile();
-    /**
-     * The template used by this View
-     * @type {Roo.DomHelper.Template}
-     */
-    this.tpl = tpl;
-
-    Roo.apply(this, config);
+     
+    
+    if(typeof(this.tpl) == "string"){
+        this.tpl = new Roo.Template(this.tpl);
+    } 
+    
+    
+    this.tpl.compile();
+   
 
+     
     /** @private */
     this.addEvents({
     /**
@@ -23353,12 +23398,29 @@ Roo.View = function(container, tpl, config){
 };
 
 Roo.extend(Roo.View, Roo.util.Observable, {
+    
+     /**
+     * @cfg {Roo.data.Store} store Data store to load data from.
+     */
+    store : false,
+    
     /**
-     * The css class to add to selected nodes
-     * @type {Roo.DomHelper.Template}
+     * @cfg {String|Roo.Element} el The container element.
      */
-    selectedClass : "x-view-selected",
+    el : '',
     
+    /**
+     * @cfg {String|Roo.Template} tpl The template used by this View 
+     */
+    tpl : false,
+    
+    /**
+     * @cfg {String} selectedClass The css class to add to selected nodes
+     */
+    selectedClass : "x-view-selected",
+     /**
+     * @cfg {String} emptyText The empty text to show when nothing is loaded.
+     */
     emptyText : "",
     /**
      * Returns the element this view is bound to.
@@ -23701,10 +23763,12 @@ Roo.extend(Roo.View, Roo.util.Observable, {
  * @extends Roo.View
  * Shortcut class to create a JSON + {@link Roo.UpdateManager} template view. Usage:
 <pre><code>
-var view = new Roo.JsonView("my-element",
-    '&lt;div id="{id}"&gt;{foo} - {bar}&lt;/div&gt;', // auto create template
-    { multiSelect: true, jsonRoot: "data" }
-);
+var view = new Roo.JsonView({
+    container: "my-element",
+    template: '&lt;div id="{id}"&gt;{foo} - {bar}&lt;/div&gt;', // auto create template
+    multiSelect: true, 
+    jsonRoot: "data" 
+});
 
 // listen for node click?
 view.on("click", function(vw, index, node, e){
@@ -23722,7 +23786,9 @@ var tpl = new Roo.Template(
     "&lt;/div&gt;&lt;hr /&gt;"
 );
 
-var moreView = new Roo.JsonView("entry-list", tpl, {
+var moreView = new Roo.JsonView({
+    container :  "entry-list", 
+    template : tpl,
     jsonRoot: "posts"
 });
 moreView.on("beforerender", this.sortEntries, this);
@@ -23732,14 +23798,20 @@ moreView.load({
     text: "Loading Blog Entries..."
 });
 </code></pre>
+* 
+* Note: old code is supported with arguments : (container, template, config)
+* 
+* 
  * @constructor
  * Create a new JsonView
- * @param {String/HTMLElement/Element} container The container element where the view is to be rendered.
- * @param {Template} tpl The rendering template
+ * 
  * @param {Object} config The config object
+ * 
  */
-Roo.JsonView = function(container, tpl, config){
-    Roo.JsonView.superclass.constructor.call(this, container, tpl, config);
+Roo.JsonView = function(config, depreciated_tpl, depreciated_config){
+    
+    
+    Roo.JsonView.superclass.constructor.call(this, config, depreciated_tpl, depreciated_config);
 
     var um = this.el.getUpdateManager();
     um.setRenderer(this);
@@ -23773,8 +23845,7 @@ Roo.JsonView = function(container, tpl, config){
 };
 Roo.extend(Roo.JsonView, Roo.View, {
     /**
-     * The root property in the loaded JSON object that contains the data
-     * @type {String}
+     * @type {String} The root property in the loaded JSON object that contains the data
      */
     jsonRoot : "",
 
@@ -39596,11 +39667,15 @@ Roo.apply(Roo.form.HtmlEditor.ToolbarContext.prototype,  {
  * @param {Object} config Configuration options
  */
 Roo.form.BasicForm = function(el, config){
+    this.allItems = [];
+    this.childForms = [];
     Roo.apply(this, config);
     /*
      * The Roo.form.Field items in this form.
      * @type MixedCollection
      */
+     
+     
     this.items = new Roo.util.MixedCollection(false, function(o){
         return o.id || (o.id = Roo.id());
     });
@@ -39673,7 +39748,20 @@ Roo.extend(Roo.form.BasicForm, Roo.util.Observable, {
      * or setValues() data instead of when the form was first created.
      */
     trackResetOnLoad : false,
-
+    
+    
+    /**
+     * childForms - used for multi-tab forms
+     * @type {Array}
+     */
+    childForms : false,
+    
+    /**
+     * allItems - full list of fields.
+     * @type {Array}
+     */
+    allItems : false,
+    
     /**
      * By default wait messages are displayed with Roo.MessageBox.wait. You can target a specific
      * element by passing it or its id or mask the form itself by passing in true.
@@ -39858,7 +39946,28 @@ clientValidation  Boolean          Applies to submit only.  Pass true to call fo
         return field || null;
     },
 
-
+    /**
+     * Add a secondary form to this one, 
+     * Used to provide tabbed forms. One form is primary, with hidden values 
+     * which mirror the elements from the other forms.
+     * 
+     * @param {Roo.form.Form} form to add.
+     * 
+     */
+    addForm : function(form){
+       
+        this.childForms.push(form);
+        Roo.each(form.allItems, function (fe) {
+            
+            if (this.findField(fe.name)) { // already added..
+                return;
+            }
+            this.add( new Roo.form.Hidden({
+                name : fe.name
+            }));
+        }, this);
+        
+    },
     /**
      * Mark fields in this form invalid in bulk.
      * @param {Array/Object} errors Either an array in the form [{id:'fieldId', msg:'The message'},...] or an object hash of {id: msg, id2: msg2}
@@ -39881,6 +39990,10 @@ clientValidation  Boolean          Applies to submit only.  Pass true to call fo
                 }
             }
         }
+        Roo.each(this.childForms || [], function (f) {
+            f.markInvalid(errors);
+        });
+        
         return this;
     },
 
@@ -39931,6 +40044,11 @@ clientValidation  Boolean          Applies to submit only.  Pass true to call fo
                 }
             }
         }
+         
+        Roo.each(this.childForms || [], function (f) {
+            f.setValues(values);
+        });
+                
         return this;
     },
 
@@ -39941,6 +40059,21 @@ clientValidation  Boolean          Applies to submit only.  Pass true to call fo
      * @return {Object}
      */
     getValues : function(asString){
+        if (this.childForms) {
+            // copy values from the child forms
+            Roo.each(this.childForms, function (f) {
+                if (f.allFields) {
+                    Roo.each(f.allFields, function (e) {
+                        if (e.name && e.getValue && this.findField(e.name)) {
+                            this.findField(e.name).setValue(e.getValue());
+                        }
+                    });
+                }
+            }, this);
+        }
+        
+        
+        
         var fs = Roo.lib.Ajax.serializeForm(this.el.dom);
         if(asString === true){
             return fs;
@@ -39956,6 +40089,12 @@ clientValidation  Boolean          Applies to submit only.  Pass true to call fo
         this.items.each(function(f){
            f.clearInvalid();
         });
+        
+        Roo.each(this.childForms || [], function (f) {
+            f.clearInvalid();
+        });
+        
+        
         return this;
     },
 
@@ -39967,6 +40106,12 @@ clientValidation  Boolean          Applies to submit only.  Pass true to call fo
         this.items.each(function(f){
             f.reset();
         });
+        
+        Roo.each(this.childForms || [], function (f) {
+            f.reset();
+        });
+       
+        
         return this;
     },
 
@@ -40057,7 +40202,7 @@ Roo.form.Form = function(config){
         xitems = config.items;
         delete config.items;
     }
-    
+   
     
     Roo.form.Form.superclass.constructor.call(this, null, config);
     this.url = this.url || this.action;
@@ -40130,6 +40275,7 @@ Roo.extend(Roo.form.Form, Roo.form.BasicForm, {
      */
     monitorPoll : 200,
 
+  
     /**
      * Opens a new {@link Roo.form.Column} container in the layout stack. If fields are passed after the config, the
      * fields are added and the column is closed. If no fields are passed the column remains open
@@ -40239,6 +40385,11 @@ Roo.extend(Roo.form.Form, Roo.form.BasicForm, {
         }
         return this;
     },
+    
+
+    
+    
+    
      /**
      * Find any element that has been added to a form, using it's ID or name
      * This can include framesets, columns etc. along with regular fields..
@@ -44559,7 +44710,7 @@ panel.load({
     },
     
       /**
-     * Adds a xtype elements to the panel - currently only supports Forms.
+     * Adds a xtype elements to the panel - currently only supports Forms, View, JsonView.
      * <pre><code>
 
 layout.addxtype({
@@ -44574,16 +44725,25 @@ layout.addxtype({
     
     addxtype : function(cfg) {
         // add form..
-        if (!cfg.xtype.match(/^Form$/)) {
-            return false;
-        }
-        var el = this.el.createChild();
+        if (cfg.xtype.match(/^Form$/)) {
+            var el = this.el.createChild();
 
-        this.form = new  Roo.form.Form(cfg);
-        
-        
-        if ( this.form.allItems.length) this.form.render(el.dom);
-        return this.form;
+            this.form = new  Roo.form.Form(cfg);
+            
+            
+            if ( this.form.allItems.length) this.form.render(el.dom);
+            return this.form;
+        }
+        if (['View', 'JsonView'].indexOf(cfg.xtype) > -1) {
+            // views..
+            cfg.el = this.el.appendChild(document.createElement("div"));
+            // factory?
+            var ret = new Roo[cfg.xtype](cfg);
+            ret.render(false, ''); // render blank..
+            return ret;
+            
+        }
+        return false;
         
     }
 });