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=7de96e15e5a65e4147ffc259af577b5b5d8f3492;hpb=b0d24a82f35e9f26539f54d39cd3e6e5b9bd0d6f;p=roojs1 diff --git a/Roo/ContentPanel.js b/Roo/ContentPanel.js index 7de96e15e5..cc1b9d0ce5 100644 --- a/Roo/ContentPanel.js +++ b/Roo/ContentPanel.js @@ -11,22 +11,26 @@ /** * @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|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 {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) 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 {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. @@ -37,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; @@ -64,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; @@ -98,12 +103,7 @@ Roo.ContentPanel = function(el, config, content){ } // handle view.xtype - 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, ''); // render blank.. - } - + this.addEvents({ @@ -135,10 +135,13 @@ Roo.ContentPanel = function(el, config, content){ * @param {Roo.ContentPanel} this */ "render" : true - - + }); + + + + if(this.autoScroll){ this.resizeEl.setStyle("overflow", "auto"); } else { @@ -160,6 +163,13 @@ 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); }; @@ -301,7 +311,7 @@ panel.load({ } if(this.footer){ var te = this.footer.getEl(); - Roo.log("footer:" + te.getHeight()); + //Roo.log("footer:" + te.getHeight()); height -= te.getHeight(); te.setWidth(width); @@ -414,6 +424,14 @@ 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$/)) { @@ -427,17 +445,21 @@ layout.addxtype({ 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; } // should only have one of theses.. - if (['View', 'JsonView', 'DatePicker'].indexOf(cfg.xtype) > -1) { - // views.. + 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.. + + ret.render && ret.render(false, ''); // render blank.. this.view = ret; return ret; } @@ -445,327 +467,6 @@ layout.addxtype({ } }); -/** - * @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 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');
- //});
-
-
-
-};
-
-Roo.extend(Roo.TreePanel, Roo.ContentPanel, {
- fitToFrame : true,
- autoScroll : true
-});
-