`
gkuiyj
  • 浏览: 90861 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

Ext架构分析(5)--Layout初识:ContainerLayout

阅读更多
Ext架构分析(5)--Layout初识:ContainerLayout
    如果学习了Container,你回发现,在Ext2.0中,Container和Layout的关系是密不可分的。任何Container都需要在render方法中使用layout对象进行布局。
  让我们先看一下所有layout的父类:ContainerLayout。
  实际上,对容器及其item的渲染都是在layout对象的layout方法中实现的。而layout方法是在resize事件中触发的,基于性能的考虑,可以通过配置bufferResize属性实现延迟layout:
  onResize: function(){
    if(this.container.collapsed){
        return;
    }
    var b = this.container.bufferResize;
    if(b){
        if(!this.resizeTask){
          this.resizeTask = new Ext.util.DelayedTask(this.layout, this);
          this.resizeBuffer = typeof b == 'number' ? b : 100;
        }
        this.resizeTask.delay(this.resizeBuffer);
    }else{
        this.layout();
    }
  }

  lyout方法会遍历所有的Container子元素并对其进行render:
  renderItem : function(c, position, target){
    if(c && !c.rendered){
        c.render(target, position);
        if(this.extraCls){
        var t = c.getPositionEl ? c.getPositionEl() : c;
        t.addClass(this.extraCls);
        }
        if (this.renderHidden && c != this.activeItem) {
          c.hide();
        }
    }else if(c && !this.isValidParent(c, target)){
        if(this.extraCls){
          c.addClass(this.extraCls);
        }
        if(typeof position == 'number'){
          position = target.dom.childNodes[position];
        }
        target.dom.insertBefore(c.getEl().dom, position || null);
        if (this.renderHidden && c != this.activeItem) {
          c.hide();
        }
    }
  }


分享到:
评论

相关推荐

    EXT 布局 Layout 资料

    Ext JS 提供了一个布局基类 `Ext.layout.ContainerLayout`,其他所有布局类型均继承自这个基类。容器组件包括一个 `layout` 及 `layoutConfig` 配置属性,用于指定容器使用的布局类型及其详细配置信息。如果未明确...

    Ext10种布局

    - **定义**:`Ext.layout.ContainerLayout` 是 ExtJS 的基础布局类,其他所有布局都基于此基类进行扩展。 - **作用**:当没有为容器指定任何布局时,默认采用 `ContainerLayout`。该布局简单地将所有子元素按顺序...

    ExtJS之布局详解

    - 布局的基类是`Ext.layout.ContainerLayout`,它提供了所有布局的基础功能,但本身并不具有可视化外观,主要作为其他布局类的基类。 2. **布局分类** - **折叠布局(AnchorLayout)**:通过`layout: "anchor"`...

    Ext中文帮助文档(Ext常见界面源码,及类库方法详解)

    5. Ext.layout.ContainerLayout:容器布局,定义了不同类型的布局策略,如Fit、Border、Table等。 三、常见界面代码示例 文档中可能包含了以下示例: 1. 基本的表格创建:展示如何定义列模型、数据源,以及添加分页...

    基于extjs的.NET3.5控件Coolite 1.0.0.34580(Preview预览版)

    5. Renamed Coolite.Utilities project to Ext.Net.Utilities 6. Renamed Coolite.Sandbox project to Ext.Net.Sandbox 7. Renamed Coolite.Toolkit.sln Visual Studio Solution file to Ext.Net.sln. 8. ...

    extjs_页面布局.doc

    title: 'Ext.layout.FitLayout 布局示例', frame: true, height: 150, width: 250, applyTo: 'panel', defaults: { bodyStyle: 'background-color:#FFFFFF' }, items: [ { title: '嵌套面板一', html: '...

    精通JS脚本之ExtJS框架.part1.rar

    11.1.1 折叠布局——AccordionLayout 11.1.2 边框布局——BorderLayout 11.1.3 卡片式布局——CardLayout 11.1.4 列布局——ColoumnLayout 11.1.5 锚点布局——AnchorLayout 11.1.6 自适应布局——FitLayout ...

    Ext4.1.0 API 中文版

    例子:Ext.panel.Panel ========================================== Panel是一个容器,具有特定的功能和结构组件,使它使能够完美地为面向应用的用户界面创建部件。 Panel继承自Ext.container.Container,可以设置...

    ExtJS 2.0 实用简明教程之布局概述

    ExtJS的布局基类为Ext.layout.ContainerLayout,其它布局都是继承该类。ExtJS的容器组件包含一个layout及...看代码: 代码如下:Ext.onReady(function(){ new Ext.Panel({ renderTo:”hello”, width:400, heig

    精通JS脚本之ExtJS框架.part2.rar

    11.1.1 折叠布局——AccordionLayout 11.1.2 边框布局——BorderLayout 11.1.3 卡片式布局——CardLayout 11.1.4 列布局——ColoumnLayout 11.1.5 锚点布局——AnchorLayout 11.1.6 自适应布局——FitLayout ...

    Android代码-SubmitButton

    LinearLayout layout = findViewById(R.id.containerLayout); layout.addView(submitBtn); ``` ### 5. 蚂蚁金服金融云团队相关 提到蚂蚁金服(AntFin)的金融云团队,可以推测这个项目可能涉及到金融领域的Android...

    Android-MultiStacks:适用于Android的简单多堆栈仿真

    Android MultiStacks 入门 相依性 build.gradle添加到root build.gradle allprojects { repositories { ..... } ... 并线到build.gradle水平build.gradle ... Builder (supportFragmentManager, R .id.containerLayout)

    jquery制作居中遮罩层效果分享

    例如,代码中的`class="left-containerlayout-container"`应理解为`class="left-container layout-container"`,分隔开两个类名。在实际编码时,需确保HTML和CSS代码的准确无误,避免引入不必要的错误。 通过上述...

    瀑布流demo

    containerLayout = new LinearLayout(getContext()); containerLayout.setBackgroundColor(Color.WHITE); LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams( LinearLayout....

    Android代码-自定义动画和表头的ListView

    .setHeader(R.id.header, containerLayout) .minHeightHeader(250) .build(); that's all, folks! Header Animator Using the StikkyHeader you can create easly some nice animations extending the ...

    StikkyHead:粘头

    header, containerLayout) .minHeightHeaderPixel( 250 ) .build(); 就是这样,伙计们!标题动画师使用 StikkyHeader,您可以轻松创建一些扩展HeaderStikkyAnimator并使用实用程序AnimatorBuilder漂亮动画。 可用的...

    StikkyHeader:支持2.3一下设备使用的StikkyHeader。支持设置动画开始的偏移

    header, containerLayout) .minHeightHeader( 250 ) .build(); 就是这样,伙计们! 标题动画师 使用 StikkyHeader,您可以轻松创建一些扩展HeaderStikkyAnimator并使用实用程序AnimatorBuilder漂亮动画。 可用的...

Global site tag (gtag.js) - Google Analytics