X-Git-Url: http://git.roojs.org/?p=roojs1;a=blobdiff_plain;f=Roo%2FContentPanel.js;h=29f2a68cebd74bc7752fcd495cc91a819e25bb9d;hp=ac75ab36d95c2dde8422b11a3b14e14ec2cdebb5;hb=0b69a11b1055a6d3a3fd0719bdd58b5a235de0e4;hpb=e493ea7649ffa74c7400279af9476b1a2af817d6
diff --git a/Roo/ContentPanel.js b/Roo/ContentPanel.js
index ac75ab36d9..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({
@@ -352,23 +421,36 @@ layout.addxtype({
addxtype : function(cfg) {
// add form..
if (cfg.xtype.match(/^Form$/)) {
- var el = this.el.createChild();
+
+ 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);
+ 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;
+ // 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?
- return new Roo[cfg.xtype](cfg);
+ var ret = new Roo.factory(cfg);
+
+ ret.render && ret.render(false, ''); // render blank..
+ this.view = ret;
+ return ret;
}
-
-
+ return false;
}
});
@@ -472,6 +554,7 @@ Roo.NestedLayoutPanel = function(layout, config)
}
*/
+
Roo.NestedLayoutPanel.superclass.constructor.call(this, layout.getEl(), config);
layout.monitorWindowResize = false; // turn off autosizing
@@ -480,6 +563,7 @@ Roo.NestedLayoutPanel = function(layout, config)
+
};
Roo.extend(Roo.NestedLayoutPanel, Roo.ContentPanel, {
@@ -643,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.
*/
@@ -652,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()
@@ -664,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
+});