X-Git-Url: http://git.roojs.org/?a=blobdiff_plain;f=Roo%2FContentPanel.js;h=29f2a68cebd74bc7752fcd495cc91a819e25bb9d;hb=61bc45258e16a779856dd2ad0862630b489e4583;hp=54b682d1a81cc7e73eb111549f99210895f17c7a;hpb=b1fe35b807e072b374794444dd598e4bbaff7f9a;p=roojs1 diff --git a/Roo/ContentPanel.js b/Roo/ContentPanel.js index 54b682d1a8..29f2a68ceb 100644 --- a/Roo/ContentPanel.js +++ b/Roo/ContentPanel.js @@ -12,19 +12,22 @@ * @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 add to the width/height when doing a {@link #fitToFrame} (default is [0, 0]) - * @cfg {String} url Calls {@link #setUrl} with this value - * @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 add 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 @@ -71,18 +74,33 @@ 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); } + // xtype created footer. - not sure if will work as we normally have to render first.. + if (this.footer && !this.footer.el && this.footer.xtype) { + if (!this.wrapEl) { + this.wrapEl = this.el.wrap(); + } + this.footer.container = this.wrapEl.createChild(); + + this.footer = Roo.factory(this.footer, Roo); + + } if(this.resizeEl){ this.resizeEl = Roo.get(this.resizeEl, true); }else{ this.resizeEl = this.el; } + // handle view.xtype + + + + this.addEvents({ /** * @event activate @@ -104,10 +122,29 @@ 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){ @@ -120,6 +157,15 @@ Roo.ContentPanel = function(el, config, content){ Roo.ContentPanel.superclass.constructor.call(this); + + if (this.view && typeof(this.view.xtype) != 'undefined') { + this.view.el = this.el.appendChild(document.createElement("div")); + this.view = Roo.factory(this.view); + this.view.render && this.view.render(false, ''); + } + + + this.fireEvent('render', this); }; Roo.extend(Roo.ContentPanel, Roo.util.Observable, { @@ -246,7 +292,9 @@ panel.load({ return this.wrapEl || this.el; }, - adjustForComponents : function(width, height){ + adjustForComponents : function(width, height) + { + //Roo.log('adjustForComponents '); if(this.resizeEl != this.el){ width -= this.el.getFrameWidth('lr'); height -= this.el.getFrameWidth('tb'); @@ -256,6 +304,15 @@ panel.load({ height -= te.getHeight(); te.setWidth(width); } + if(this.footer){ + var te = this.footer.getEl(); + //Roo.log("footer:" + te.getHeight()); + + height -= te.getHeight(); + te.setWidth(width); + } + + if(this.adjustments){ width += this.adjustments[0]; height += this.adjustments[1]; @@ -335,8 +392,20 @@ 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. + * Adds a xtype elements to the panel - currently only supports Forms, View, JsonView. *
layout.addxtype({
@@ -351,15 +420,37 @@ layout.addxtype({
addxtype : function(cfg) {
// add form..
- if (!cfg.xtype.match(/^Form$/)) {
- return false;
+ if (cfg.xtype.match(/^Form$/)) {
+
+ var el;
+ //if (this.footer) {
+ // el = this.footer.container.insertSibling(false, 'before');
+ //} else {
+ el = this.el.createChild();
+ //}
+
+ this.form = new Roo.form.Form(cfg);
+
+
+ if ( this.form.allItems.length) {
+ this.form.render(el.dom);
+ }
+ return this.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;
-
+ // should only have one of theses..
+ if ([ 'View', 'JsonView', 'DatePicker'].indexOf(cfg.xtype) > -1) {
+ // views.. should not be just added - used named prop 'view''
+
+ cfg.el = this.el.appendChild(document.createElement("div"));
+ // factory?
+
+ var ret = new Roo.factory(cfg);
+
+ ret.render && ret.render(false, ''); // render blank..
+ this.view = ret;
+ return ret;
+ }
+ return false;
}
});
@@ -373,10 +464,7 @@ layout.addxtype({
*/
Roo.GridPanel = function(grid, config){
- if (typeof(config) == 'undefined') { // xtype construction..
- config = grid;
- grid = config.grid;
- }
+
this.wrapper = Roo.DomHelper.append(document.body, // wrapper for IE7 strict & safari scroll issue
{tag: "div", cls: "x-layout-grid-wrapper x-layout-inactive-content"}, true);
@@ -466,6 +554,7 @@ Roo.NestedLayoutPanel = function(layout, config)
}
*/
+
Roo.NestedLayoutPanel.superclass.constructor.call(this, layout.getEl(), config);
layout.monitorWindowResize = false; // turn off autosizing
@@ -474,6 +563,7 @@ Roo.NestedLayoutPanel = function(layout, config)
+
};
Roo.extend(Roo.NestedLayoutPanel, Roo.ContentPanel, {
@@ -637,7 +727,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.
*/
@@ -646,8 +736,17 @@ Roo.TreePanel = function(config){
var tree = config.tree;
delete config.tree;
delete config.el; // hopefull!
- Roo.TreePanel.superclass.constructor.call(this, el, config);
+
+ // wrapper for IE7 strict & safari scroll issue
+
var treeEl = el.createChild();
+ config.resizeEl = treeEl;
+
+
+
+ Roo.TreePanel.superclass.constructor.call(this, el, config);
+
+
this.tree = new Roo.tree.TreePanel(treeEl , tree);
//console.log(tree);
this.on('activate', function()
@@ -658,18 +757,23 @@ Roo.TreePanel = function(config){
//console.log('render tree');
this.tree.render();
});
+ // this should not be needed.. - it's actually the 'el' that resizes?
+ // actuall it breaks the containerScroll - dragging nodes auto scroll at top
- this.on('resize', function (cp, w, h) {
- this.tree.innerCt.setWidth(w);
- this.tree.innerCt.setHeight(h);
- this.tree.innerCt.setStyle('overflow-y', 'auto');
- });
+ //this.on('resize', function (cp, w, h) {
+ // this.tree.innerCt.setWidth(w);
+ // this.tree.innerCt.setHeight(h);
+ // //this.tree.innerCt.setStyle('overflow-y', 'auto');
+ //});
};
-Roo.extend(Roo.TreePanel, Roo.ContentPanel);
+Roo.extend(Roo.TreePanel, Roo.ContentPanel, {
+ fitToFrame : true,
+ autoScroll : true
+});