X-Git-Url: http://git.roojs.org/?a=blobdiff_plain;f=Roo%2FContentPanel.js;h=cc1b9d0ce59895ec33cec33f57b968c16600608c;hb=refs%2Fheads%2Fwip_leon_T7094_logo_image_upload_in_boilerplate;hp=6db1a5222e4f8269bd6887670d184b310191595a;hpb=404729c7089427a0e70f43af91a3acceca5e8db4;p=roojs1 diff --git a/Roo/ContentPanel.js b/Roo/ContentPanel.js index 6db1a5222e..cc1b9d0ce5 100644 --- a/Roo/ContentPanel.js +++ b/Roo/ContentPanel.js @@ -11,21 +11,27 @@ /** * @class Roo.ContentPanel * @extends Roo.util.Observable + * @children Roo.form.Form Roo.JsonView Roo.View + * @parent Roo.BorderLayout Roo.LayoutDialog builder * 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/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 {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} 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 {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 {String|HTMLElement|Element} resizeEl An element to resize if {@link #fitToFrame} is true (instead of this panel's element) + * @cfg {Roo.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) [required] 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.) + * @cfg {String} style Extra style to add to the content panel + * @cfg {Roo.menu.Menu} menu popup menu + * @constructor * Create a new ContentPanel. * @param {String/HTMLElement/Roo.Element} el The container element for this panel @@ -35,7 +41,6 @@ */ Roo.ContentPanel = function(el, config, content){ - /* if(el.autoCreate || el.xtype){ // xtype is available if this is called from factory config = el; @@ -62,6 +67,8 @@ Roo.ContentPanel = function(el, config, content){ {tag: "div", cls: "x-layout-inactive-content", id: config.id||el}, true); } } + + this.closable = false; this.loaded = false; this.active = false; @@ -72,18 +79,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 @@ -105,14 +127,28 @@ 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() { - this.el.scrollTo('top',0); + Roo.log('fix random scolling'); + this.scrollTo('top',0); }); } content = content || this.content; @@ -126,6 +162,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, { @@ -252,7 +297,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'); @@ -262,6 +309,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]; @@ -341,6 +397,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. *
@@ -356,349 +424,49 @@ layout.addxtype({
*/
addxtype : function(cfg) {
+ if(cfg.xtype.match(/^UploadCropbox$/)) {
+
+ this.cropbox = new Roo.factory(cfg);
+
+ this.cropbox.render(this.el);
+
+ return this.cropbox;
+ }
// 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..
+ // 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[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;
-
- }
-});
-
-/**
- * @class Roo.GridPanel
- * @extends Roo.ContentPanel
- * @constructor
- * Create a new GridPanel.
- * @param {Roo.grid.Grid} grid The grid for this panel
- * @param {String/Object} config A string to set only the panel's title, or a config object
- */
-Roo.GridPanel = function(grid, config){
-
-
- 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);
-
- this.wrapper.dom.appendChild(grid.getGridEl().dom);
-
- Roo.GridPanel.superclass.constructor.call(this, this.wrapper, config);
-
- if(this.toolbar){
- this.toolbar.el.insertBefore(this.wrapper.dom.firstChild);
- }
- // xtype created footer. - not sure if will work as we normally have to render first..
- if (this.footer && !this.footer.el && this.footer.xtype) {
-
- this.footer.container = this.grid.getView().getFooterPanel(true);
- this.footer.dataSource = this.grid.dataSource;
- this.footer = Roo.factory(this.footer, Roo);
-
- }
-
- grid.monitorWindowResize = false; // turn off autosizing
- grid.autoHeight = false;
- grid.autoWidth = false;
- this.grid = grid;
- this.grid.getGridEl().replaceClass("x-layout-inactive-content", "x-layout-component-panel");
-};
-
-Roo.extend(Roo.GridPanel, Roo.ContentPanel, {
- getId : function(){
- return this.grid.id;
- },
-
- /**
- * Returns the grid for this panel
- * @return {Roo.grid.Grid}
- */
- getGrid : function(){
- return this.grid;
- },
-
- setSize : function(width, height){
- if(!this.ignoreResize(width, height)){
- var grid = this.grid;
- var size = this.adjustForComponents(width, height);
- grid.getGridEl().setSize(size.width, size.height);
- grid.autoSize();
- }
- },
-
- beforeSlide : function(){
- this.grid.getView().scroller.clip();
- },
-
- afterSlide : function(){
- this.grid.getView().scroller.unclip();
- },
-
- destroy : function(){
- this.grid.destroy();
- delete this.grid;
- Roo.GridPanel.superclass.destroy.call(this);
- }
-});
-
-
-/**
- * @class Roo.NestedLayoutPanel
- * @extends Roo.ContentPanel
- * @constructor
- * Create a new NestedLayoutPanel.
- *
- *
- * @param {Roo.BorderLayout} layout The layout for this panel
- * @param {String/Object} config A string to set only the title or a config object
- */
-Roo.NestedLayoutPanel = function(layout, config)
-{
- // construct with only one argument..
- /* FIXME - implement nicer consturctors
- if (layout.layout) {
- config = layout;
- layout = config.layout;
- delete config.layout;
- }
- if (layout.xtype && !layout.getEl) {
- // then layout needs constructing..
- layout = Roo.factory(layout, Roo);
- }
- */
-
-
- Roo.NestedLayoutPanel.superclass.constructor.call(this, layout.getEl(), config);
-
- layout.monitorWindowResize = false; // turn off autosizing
- this.layout = layout;
- this.layout.getEl().addClass("x-layout-nested-layout");
-
-
-
-
-};
-
-Roo.extend(Roo.NestedLayoutPanel, Roo.ContentPanel, {
-
- setSize : function(width, height){
- if(!this.ignoreResize(width, height)){
- var size = this.adjustForComponents(width, height);
- var el = this.layout.getEl();
- el.setSize(size.width, size.height);
- var touch = el.dom.offsetWidth;
- this.layout.layout();
- // ie requires a double layout on the first pass
- if(Roo.isIE && !this.initialized){
- this.initialized = true;
- this.layout.layout();
- }
- }
- },
-
- // activate all subpanels if not currently active..
-
- setActiveState : function(active){
- this.active = active;
- if(!active){
- this.fireEvent("deactivate", this);
- return;
- }
-
- this.fireEvent("activate", this);
- // not sure if this should happen before or after..
- if (!this.layout) {
- return; // should not happen..
- }
- var reg = false;
- for (var r in this.layout.regions) {
- reg = this.layout.getRegion(r);
- if (reg.getActivePanel()) {
- //reg.showPanel(reg.getActivePanel()); // force it to activate..
- reg.setActivePanel(reg.getActivePanel());
- continue;
- }
- if (!reg.panels.length) {
- continue;
- }
- reg.showPanel(reg.getPanel(0));
- }
-
-
-
-
- },
-
- /**
- * Returns the nested BorderLayout for this panel
- * @return {Roo.BorderLayout}
- */
- getLayout : function(){
- return this.layout;
- },
-
- /**
- * Adds a xtype elements to the layout of the nested panel
- *
-
-panel.addxtype({
- xtype : 'ContentPanel',
- region: 'west',
- items: [ .... ]
- }
-);
-
-panel.addxtype({
- xtype : 'NestedLayoutPanel',
- region: 'west',
- layout: {
- center: { },
- west: { }
- },
- items : [ ... list of content panels or nested layout panels.. ]
- }
-);
-
- * @param {Object} cfg Xtype definition of item to add.
- */
- addxtype : function(cfg) {
- return this.layout.addxtype(cfg);
-
}
});
-Roo.ScrollPanel = function(el, config, content){
- config = config || {};
- config.fitToFrame = true;
- Roo.ScrollPanel.superclass.constructor.call(this, el, config, content);
-
- this.el.dom.style.overflow = "hidden";
- var wrap = this.el.wrap({cls: "x-scroller x-layout-inactive-content"});
- this.el.removeClass("x-layout-inactive-content");
- this.el.on("mousewheel", this.onWheel, this);
-
- var up = wrap.createChild({cls: "x-scroller-up", html: " "}, this.el.dom);
- var down = wrap.createChild({cls: "x-scroller-down", html: " "});
- up.unselectable(); down.unselectable();
- up.on("click", this.scrollUp, this);
- down.on("click", this.scrollDown, this);
- up.addClassOnOver("x-scroller-btn-over");
- down.addClassOnOver("x-scroller-btn-over");
- up.addClassOnClick("x-scroller-btn-click");
- down.addClassOnClick("x-scroller-btn-click");
- this.adjustments = [0, -(up.getHeight() + down.getHeight())];
-
- this.resizeEl = this.el;
- this.el = wrap; this.up = up; this.down = down;
-};
-
-Roo.extend(Roo.ScrollPanel, Roo.ContentPanel, {
- increment : 100,
- wheelIncrement : 5,
- scrollUp : function(){
- this.resizeEl.scroll("up", this.increment, {callback: this.afterScroll, scope: this});
- },
-
- scrollDown : function(){
- this.resizeEl.scroll("down", this.increment, {callback: this.afterScroll, scope: this});
- },
-
- afterScroll : function(){
- var el = this.resizeEl;
- var t = el.dom.scrollTop, h = el.dom.scrollHeight, ch = el.dom.clientHeight;
- this.up[t == 0 ? "addClass" : "removeClass"]("x-scroller-btn-disabled");
- this.down[h - t <= ch ? "addClass" : "removeClass"]("x-scroller-btn-disabled");
- },
-
- setSize : function(){
- Roo.ScrollPanel.superclass.setSize.apply(this, arguments);
- this.afterScroll();
- },
-
- onWheel : function(e){
- var d = e.getWheelDelta();
- this.resizeEl.dom.scrollTop -= (d*this.wheelIncrement);
- this.afterScroll();
- e.stopEvent();
- },
-
- setContent : function(content, loadScripts){
- this.resizeEl.update(content, loadScripts);
- }
-
-});
-
-
-
-
-
-
-
-
-
-/**
- * @class Roo.TreePanel
- * @extends Roo.ContentPanel
- * @constructor
- * 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.
- */
-Roo.TreePanel = function(config){
- var el = config.el;
- var tree = config.tree;
- delete config.tree;
- delete config.el; // hopefull!
-
- // 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()
- {
- if (this.tree.rendered) {
- return;
- }
- //console.log('render tree');
- this.tree.render();
- });
-
- 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, {
- fitToFrame : true,
- autoScroll : true
-});
-