- 浏览: 91024 次
- 性别:
- 来自: 北京
文章分类
最新评论
-
hzxlb910:
背景看的头晕
extJs 2.1学习笔记(Ext.data.JsonReader篇一) -
whyang:
先鄙视一下这个论坛,要做测试才能回复。
我是想问下楼主,
第 ...
Struts2的异常处理机制:
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();
}
}
}
如果学习了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();
}
}
}
发表评论
-
Extjs3.0的变动记录(转载)
2009-09-24 11:23 2968Release Date: Jul 6, 2009 Curr ... -
Ext中TreePanel控件和TabPanel控件搭配测试
2009-08-25 13:51 1619在实际的项目中,左边树形菜单,提供各种功能点击,右边一个面板, ... -
extJs 2.1学习笔记(Ext.Updater篇二)
2009-08-05 22:02 1598全 称:Ext.Updater 命名 ... -
extJs 2.1学习笔记(Ext.Updater篇一)
2009-08-05 22:00 1235上几篇中老老实实地把E ... -
extJs 2.1 学习笔记(Ext.data.HttpProxy篇)
2009-08-05 21:59 2483关于Ext.data中各个类的 ... -
extJs 2.1学习笔记(Ext.data.JsonReader篇一)
2009-08-05 21:58 2124有个事要说一下:DataProxy的子类呢,都有一个load来 ... -
extJs 2.1学习笔记(Ext.data.JsonReader篇二)
2009-08-05 21:57 1298有了上一篇中所讲内容,一般情况下就可以应付了,不过,Jso ... -
extJs 2.1学习笔记(Ext.TabPanel篇)
2009-08-05 21:56 1439Ext.TabPanel这个东西是最常用的组件之一,它继承 ... -
extJs 2.1学习笔记(Function扩展篇)
2009-08-05 21:55 974ExtJs对JavaScript的内建对象进行了扩展,对什么O ... -
extJs 2.1学习笔记(Ext.data.Store篇)
2009-08-05 21:54 1541Ext.data.Store,这个东西是JavaScript ... -
extJs 2.1学习笔记(Ext.data.Connection篇二)
2009-08-05 21:54 1722上一篇主要是扎扎实实地翻译了一下Ext.data.Connec ... -
extJs 2.1学习笔记(Ext.data.Connection篇一)
2009-08-05 21:52 1391ExtJs之所以能异步请求数据,全依赖于Ext.data. ... -
extJs 2.0学习笔记(Ext.Panel终结篇)
2009-08-05 21:49 1164怪不得我对Ext.Panel穷追猛打,前面已经写过四篇针对它的 ... -
extJs 2.0学习笔记(事件注册总结篇)
2009-08-05 21:48 1159本来,我也没把这档子 ... -
extJs 2.0学习笔记(Ext.Panel篇四)
2009-08-05 21:46 1720我刚才禁不住诱惑去看 ... -
extJs 2.0学习笔记(Ext.Panel篇三)
2009-08-05 21:45 1923上一篇中把panel的config部分的文档翻译了一下,事实 ... -
extJs 2.0学习笔记(Ext.Panel篇二)
2009-08-05 21:44 1393activeItem : String/Number 用 ... -
extJs 2.0学习笔记(Ext.Panel篇一)
2009-08-05 21:42 1228原文链接: http://hi.baidu ... -
EXT 中 类的继承
2009-07-31 09:36 1012深入剖析ExtJS 2.2实现及 ... -
Ext架构分析:render方法
2009-07-16 08:51 5087Ext架构分析(3)--Widget之 ...
相关推荐
Ext JS 提供了一个布局基类 `Ext.layout.ContainerLayout`,其他所有布局类型均继承自这个基类。容器组件包括一个 `layout` 及 `layoutConfig` 配置属性,用于指定容器使用的布局类型及其详细配置信息。如果未明确...
- **定义**:`Ext.layout.ContainerLayout` 是 ExtJS 的基础布局类,其他所有布局都基于此基类进行扩展。 - **作用**:当没有为容器指定任何布局时,默认采用 `ContainerLayout`。该布局简单地将所有子元素按顺序...
- 布局的基类是`Ext.layout.ContainerLayout`,它提供了所有布局的基础功能,但本身并不具有可视化外观,主要作为其他布局类的基类。 2. **布局分类** - **折叠布局(AnchorLayout)**:通过`layout: "anchor"`...
5. Ext.layout.ContainerLayout:容器布局,定义了不同类型的布局策略,如Fit、Border、Table等。 三、常见界面代码示例 文档中可能包含了以下示例: 1. 基本的表格创建:展示如何定义列模型、数据源,以及添加分页...
- **`ContainerLayout`**: 介绍了一种通用的布局管理器。 - **`AnchorLayout`**: 介绍了一种基于锚点的布局策略。 - **`BorderLayout`**: 介绍了一种基于边框的布局策略。 - **`TableLayout`**: 介绍了一种表格布局...
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. ...
title: 'Ext.layout.FitLayout 布局示例', frame: true, height: 150, width: 250, applyTo: 'panel', defaults: { bodyStyle: 'background-color:#FFFFFF' }, items: [ { title: '嵌套面板一', html: '...
11.1.1 折叠布局——AccordionLayout 11.1.2 边框布局——BorderLayout 11.1.3 卡片式布局——CardLayout 11.1.4 列布局——ColoumnLayout 11.1.5 锚点布局——AnchorLayout 11.1.6 自适应布局——FitLayout ...
例子:Ext.panel.Panel ========================================== Panel是一个容器,具有特定的功能和结构组件,使它使能够完美地为面向应用的用户界面创建部件。 Panel继承自Ext.container.Container,可以设置...
ExtJS的布局基类为Ext.layout.ContainerLayout,其它布局都是继承该类。ExtJS的容器组件包含一个layout及...看代码: 代码如下:Ext.onReady(function(){ new Ext.Panel({ renderTo:”hello”, width:400, heig
11.1.1 折叠布局——AccordionLayout 11.1.2 边框布局——BorderLayout 11.1.3 卡片式布局——CardLayout 11.1.4 列布局——ColoumnLayout 11.1.5 锚点布局——AnchorLayout 11.1.6 自适应布局——FitLayout ...
LinearLayout layout = findViewById(R.id.containerLayout); layout.addView(submitBtn); ``` ### 5. 蚂蚁金服金融云团队相关 提到蚂蚁金服(AntFin)的金融云团队,可以推测这个项目可能涉及到金融领域的Android...
Android MultiStacks 入门 相依性 build.gradle添加到root build.gradle allprojects { repositories { ..... } ... 并线到build.gradle水平build.gradle ... Builder (supportFragmentManager, R .id.containerLayout)
例如,代码中的`class="left-containerlayout-container"`应理解为`class="left-container layout-container"`,分隔开两个类名。在实际编码时,需确保HTML和CSS代码的准确无误,避免引入不必要的错误。 通过上述...
containerLayout = new LinearLayout(getContext()); containerLayout.setBackgroundColor(Color.WHITE); LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams( LinearLayout....
.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 ...
header, containerLayout) .minHeightHeaderPixel( 250 ) .build(); 就是这样,伙计们!标题动画师使用 StikkyHeader,您可以轻松创建一些扩展HeaderStikkyAnimator并使用实用程序AnimatorBuilder漂亮动画。 可用的...
header, containerLayout) .minHeightHeader( 250 ) .build(); 就是这样,伙计们! 标题动画师 使用 StikkyHeader,您可以轻松创建一些扩展HeaderStikkyAnimator并使用实用程序AnimatorBuilder漂亮动画。 可用的...