roojs-ui.js
[roojs1] / Roo / ContentPanel.js
index 1448bde..eacc140 100644 (file)
  * @class Roo.ContentPanel
  * @extends Roo.util.Observable
  * A basic ContentPanel element.
- * @cfg {Boolean} fitToFrame True for this panel to adjust its size to fit when the region resizes  (defaults to false)
- * @cfg {Boolean} fitContainer When using {@link #fitToFrame} and {@link #resizeEl}, you can also fit the parent container  (defaults to false)
+ * @cfg {Boolean}   fitToFrame    True for this panel to adjust its size to fit when the region resizes  (defaults to false)
+ * @cfg {Boolean}   fitContainer   When using {@link #fitToFrame} and {@link #resizeEl}, you can also fit the parent container  (defaults to false)
  * @cfg {Boolean/Object} autoCreate True to auto generate the DOM element for this panel, or a {@link Roo.DomHelper} config of the element to create
- * @cfg {Boolean} closable True if the panel can be closed/removed
- * @cfg {Boolean} background True if the panel should not be activated when it is added (defaults to false)
+ * @cfg {Boolean}   closable      True if the panel can be closed/removed
+ * @cfg {Boolean}   background    True if the panel should not be activated when it is added (defaults to false)
  * @cfg {String/HTMLElement/Element} resizeEl An element to resize if {@link #fitToFrame} is true (instead of this panel's element)
- * @cfg {Toolbar} toolbar A toolbar for this panel
- * @cfg {Boolean} autoScroll True to scroll overflow in this panel (use with {@link #fitToFrame})
- * @cfg {String} title The title for this panel
- * @cfg {Array} adjustments Values to <b>add</b> to the width/height when doing a {@link #fitToFrame} (default is [0, 0])
- * @cfg {String} url Calls {@link #setUrl} with this value
- * @cfg {String} region (center|north|south|east|west) which region to put this panel on (when used with xtype constructors)
- * @cfg {String/Object} params When used with {@link #url}, calls {@link #setUrl} with this value
- * @cfg {Boolean} loadOnce When used with {@link #url}, calls {@link #setUrl} with this value
+ * @cfg {Toolbar}   toolbar       A toolbar for this panel
+ * @cfg {Boolean} autoScroll    True to scroll overflow in this panel (use with {@link #fitToFrame})
+ * @cfg {String} title          The title for this panel
+ * @cfg {Array} adjustments     Values to <b>add</b> to the width/height when doing a {@link #fitToFrame} (default is [0, 0])
+ * @cfg {String} url            Calls {@link #setUrl} with this value
+ * @cfg {String} region         (center|north|south|east|west) which region to put this panel on (when used with xtype constructors)
+ * @cfg {String/Object} params  When used with {@link #url}, calls {@link #setUrl} with this value
+ * @cfg {Boolean} loadOnce      When used with {@link #url}, calls {@link #setUrl} with this value
+ * @cfg {String}    content        Raw content to fill content panel with (uses setContent on construction.)
+
  * @constructor
  * Create a new ContentPanel.
  * @param {String/HTMLElement/Roo.Element} el The container element for this panel
@@ -72,9 +74,9 @@ Roo.ContentPanel = function(el, config, content){
     }
     
     if (this.toolbar && !this.toolbar.el && this.toolbar.xtype) {
-        this.wrapEl = this.el.wrap();    
-        this.toolbar = new Roo.Toolbar(this.el.insertSibling(false, 'before'), [] , this.toolbar);
-        
+        this.wrapEl = this.el.wrap();
+        this.toolbar.container = this.el.insertSibling(false, 'before');
+        this.toolbar = new Roo.Toolbar(this.toolbar);
     }
     
     
@@ -105,10 +107,26 @@ Roo.ContentPanel = function(el, config, content){
          * @param {Number} width The width after any component adjustments
          * @param {Number} height The height after any component adjustments
          */
-        "resize" : true
+        "resize" : true,
+        
+         /**
+         * @event render
+         * Fires when this tab is created
+         * @param {Roo.ContentPanel} this
+         */
+        "render" : true
+        
+        
+        
     });
     if(this.autoScroll){
         this.resizeEl.setStyle("overflow", "auto");
+    } else {
+        // fix randome scrolling
+        this.el.on('scroll', function() {
+            Roo.log('fix random scolling');
+            this.scrollTo('top',0); 
+        });
     }
     content = content || this.content;
     if(content){
@@ -121,6 +139,8 @@ Roo.ContentPanel = function(el, config, content){
     
     
     Roo.ContentPanel.superclass.constructor.call(this);
+    
+    this.fireEvent('render', this);
 };
 
 Roo.extend(Roo.ContentPanel, Roo.util.Observable, {
@@ -336,6 +356,18 @@ panel.load({
         this.el = null;
     },
     
+    /**
+     * form - if the content panel contains a form - this is a reference to it.
+     * @type {Roo.form.Form}
+     */
+    form : false,
+    /**
+     * view - if the content panel contains a view (Roo.DatePicker / Roo.View / Roo.JsonView)
+     *    This contains a reference to it.
+     * @type {Roo.View}
+     */
+    view : false,
+    
       /**
      * Adds a xtype elements to the panel - currently only supports Forms, View, JsonView.
      * <pre><code>
@@ -361,17 +393,18 @@ layout.addxtype({
             if ( this.form.allItems.length) this.form.render(el.dom);
             return this.form;
         }
-        if (['View', 'JsonView'].indexOf(cfg.xtype) > -1) {
+        // should only have one of theses..
+        if (['View', 'JsonView', 'DatePicker'].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;
             
+            var ret = new Roo.factory(cfg);
+            ret.render && ret.render(false, ''); // render blank..
+            this.view = ret;
+            return ret;
         }
         return false;
-        
     }
 });
 
@@ -475,6 +508,7 @@ Roo.NestedLayoutPanel = function(layout, config)
     }
     */
     
+    
     Roo.NestedLayoutPanel.superclass.constructor.call(this, layout.getEl(), config);
     
     layout.monitorWindowResize = false; // turn off autosizing
@@ -483,6 +517,7 @@ Roo.NestedLayoutPanel = function(layout, config)
     
     
     
+    
 };
 
 Roo.extend(Roo.NestedLayoutPanel, Roo.ContentPanel, {
@@ -646,7 +681,7 @@ Roo.extend(Roo.ScrollPanel, Roo.ContentPanel, {
  * @class Roo.TreePanel
  * @extends Roo.ContentPanel
  * @constructor
- * Create a new TreePanel.
+ * Create a new TreePanel. - defaults to fit/scoll contents.
  * @param {String/Object} config A string to set only the panel's title, or a config object
  * @cfg {Roo.tree.TreePanel} tree The tree TreePanel, with config etc.
  */
@@ -658,12 +693,11 @@ Roo.TreePanel = function(config){
     
     // wrapper for IE7 strict & safari scroll issue
     
-    console.log('tp el');
-    console.log(config);
-    
     var treeEl = el.createChild();
     config.resizeEl = treeEl;
     
+    
+    
     Roo.TreePanel.superclass.constructor.call(this, el, config);
  
  
@@ -688,7 +722,10 @@ Roo.TreePanel = function(config){
     
 };
 
-Roo.extend(Roo.TreePanel, Roo.ContentPanel);
+Roo.extend(Roo.TreePanel, Roo.ContentPanel, {   
+    fitToFrame : true,
+    autoScroll : true
+});