X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/ee06f37b0f6f6d94cd05a6ffae556660f7c4a2bc..c930e9176a5a85509c5b0230e2bff5c22a591432:/src/widgets/layout/ContainerLayout.js diff --git a/src/widgets/layout/ContainerLayout.js b/src/widgets/layout/ContainerLayout.js new file mode 100644 index 00000000..500613db --- /dev/null +++ b/src/widgets/layout/ContainerLayout.js @@ -0,0 +1,215 @@ +/*! + * Ext JS Library 3.0.0 + * Copyright(c) 2006-2009 Ext JS, LLC + * licensing@extjs.com + * http://www.extjs.com/license + */ +/** + * @class Ext.layout.ContainerLayout + *
The ContainerLayout class is the default layout manager delegated by {@link Ext.Container} to + * render any child Components when no {@link Ext.Container#layout layout} is configured into + * a {@link Ext.Container Container}. ContainerLayout provides the basic foundation for all other layout + * classes in Ext. It simply renders all child Components into the Container, performing no sizing or + * positioning services. To utilize a layout that provides sizing and positioning of child Components, + * specify an appropriate {@link Ext.Container#layout layout}.
+ *This class is intended to be extended or created via the {@link Ext.Container#layout layout} + * configuration property. See {@link Ext.Container#layout} for additional details.
+ */ +Ext.layout.ContainerLayout = function(config){ + Ext.apply(this, config); +}; + +Ext.layout.ContainerLayout.prototype = { + /** + * @cfg {String} extraCls + *An optional extra CSS class that will be added to the container. This can be useful for adding + * customized styles to the container or any of its children using standard CSS rules. See + * {@link Ext.Component}.{@link Ext.Component#ctCls ctCls} also.
+ *Note: extraCls defaults to '' except for the following classes + * which assign a value by default: + *
+ * extraCls: 'x-column custom-class'
+ *
+ *
+ */
+ /**
+ * @cfg {Boolean} renderHidden
+ * True to hide each contained item on render (defaults to false).
+ */
+
+ /**
+ * A reference to the {@link Ext.Component} that is active. For example,
+ * if(myPanel.layout.activeItem.id == 'item-1') { ... }
+ *
+ * activeItem only applies to layout styles that can display items one at a time
+ * (like {@link Ext.layout.AccordionLayout}, {@link Ext.layout.CardLayout}
+ * and {@link Ext.layout.FitLayout}). Read-only. Related to {@link Ext.Container#activeItem}.
+ * @type {Ext.Component}
+ * @property activeItem
+ */
+
+ // private
+ monitorResize:false,
+ // private
+ activeItem : null,
+
+ // private
+ layout : function(){
+ var target = this.container.getLayoutTarget();
+ this.onLayout(this.container, target);
+ this.container.fireEvent('afterlayout', this.container, this);
+ },
+
+ // private
+ onLayout : function(ct, target){
+ this.renderAll(ct, target);
+ },
+
+ // private
+ isValidParent : function(c, target){
+ return target && c.getDomPositionEl().dom.parentNode == (target.dom || target);
+ },
+
+ // private
+ renderAll : function(ct, target){
+ var items = ct.items.items;
+ for(var i = 0, len = items.length; i < len; i++) {
+ var c = items[i];
+ if(c && (!c.rendered || !this.isValidParent(c, target))){
+ this.renderItem(c, i, target);
+ }
+ }
+ },
+
+ // private
+ renderItem : function(c, position, target){
+ if(c && !c.rendered){
+ c.render(target, position);
+ this.configureItem(c, position);
+ }else if(c && !this.isValidParent(c, target)){
+ if(typeof position == 'number'){
+ position = target.dom.childNodes[position];
+ }
+ target.dom.insertBefore(c.getDomPositionEl().dom, position || null);
+ c.container = target;
+ this.configureItem(c, position);
+ }
+ },
+
+ // private
+ configureItem: function(c, position){
+ if(this.extraCls){
+ var t = c.getPositionEl ? c.getPositionEl() : c;
+ t.addClass(this.extraCls);
+ }
+ if (this.renderHidden && c != this.activeItem) {
+ c.hide();
+ }
+ if(c.doLayout){
+ c.doLayout(false, this.forceLayout);
+ }
+ },
+
+ // private
+ onResize: function(){
+ if(this.container.collapsed){
+ return;
+ }
+ var b = this.container.bufferResize;
+ if(b){
+ if(!this.resizeTask){
+ this.resizeTask = new Ext.util.DelayedTask(this.runLayout, this);
+ this.resizeBuffer = typeof b == 'number' ? b : 100;
+ }
+ this.resizeTask.delay(this.resizeBuffer);
+ }else{
+ this.runLayout();
+ }
+ },
+
+ // private
+ runLayout: function(){
+ this.layout();
+ this.container.onLayout();
+ },
+
+ // private
+ setContainer : function(ct){
+ if(this.monitorResize && ct != this.container){
+ if(this.container){
+ this.container.un('resize', this.onResize, this);
+ this.container.un('bodyresize', this.onResize, this);
+ }
+ if(ct){
+ ct.on({
+ scope: this,
+ resize: this.onResize,
+ bodyresize: this.onResize
+ });
+ }
+ }
+ this.container = ct;
+ },
+
+ // private
+ parseMargins : function(v){
+ if(typeof v == 'number'){
+ v = v.toString();
+ }
+ var ms = v.split(' ');
+ var len = ms.length;
+ if(len == 1){
+ ms[1] = ms[0];
+ ms[2] = ms[0];
+ ms[3] = ms[0];
+ }
+ if(len == 2){
+ ms[2] = ms[0];
+ ms[3] = ms[1];
+ }
+ if(len == 3){
+ ms[3] = ms[1];
+ }
+ return {
+ top:parseInt(ms[0], 10) || 0,
+ right:parseInt(ms[1], 10) || 0,
+ bottom:parseInt(ms[2], 10) || 0,
+ left:parseInt(ms[3], 10) || 0
+ };
+ },
+
+ /**
+ * The {@link Template Ext.Template} used by Field rendering layout classes (such as
+ * {@link Ext.layout.FormLayout}) to create the DOM structure of a fully wrapped,
+ * labeled and styled form Field. A default Template is supplied, but this may be
+ * overriden to create custom field structures. The template processes values returned from
+ * {@link Ext.layout.FormLayout#getTemplateArgs}.
+ * @property fieldTpl
+ * @type Ext.Template
+ */
+ fieldTpl: (function() {
+ var t = new Ext.Template(
+ '