- 浏览: 88544 次
- 性别:
- 来自: 北京
文章分类
最新评论
-
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 2912Release Date: Jul 6, 2009 Curr ... -
Ext中TreePanel控件和TabPanel控件搭配测试
2009-08-25 13:51 1563在实际的项目中,左边树形菜单,提供各种功能点击,右边一个面板, ... -
extJs 2.1学习笔记(Ext.Updater篇二)
2009-08-05 22:02 1545全 称:Ext.Updater 命名 ... -
extJs 2.1学习笔记(Ext.Updater篇一)
2009-08-05 22:00 1169上几篇中老老实实地把E ... -
extJs 2.1 学习笔记(Ext.data.HttpProxy篇)
2009-08-05 21:59 2418关于Ext.data中各个类的 ... -
extJs 2.1学习笔记(Ext.data.JsonReader篇一)
2009-08-05 21:58 2078有个事要说一下:DataProxy的子类呢,都有一个load来 ... -
extJs 2.1学习笔记(Ext.data.JsonReader篇二)
2009-08-05 21:57 1243有了上一篇中所讲内容,一般情况下就可以应付了,不过,Jso ... -
extJs 2.1学习笔记(Ext.TabPanel篇)
2009-08-05 21:56 1395Ext.TabPanel这个东西是最常用的组件之一,它继承 ... -
extJs 2.1学习笔记(Function扩展篇)
2009-08-05 21:55 928ExtJs对JavaScript的内建对象进行了扩展,对什么O ... -
extJs 2.1学习笔记(Ext.data.Store篇)
2009-08-05 21:54 1479Ext.data.Store,这个东西是JavaScript ... -
extJs 2.1学习笔记(Ext.data.Connection篇二)
2009-08-05 21:54 1695上一篇主要是扎扎实实地翻译了一下Ext.data.Connec ... -
extJs 2.1学习笔记(Ext.data.Connection篇一)
2009-08-05 21:52 1349ExtJs之所以能异步请求数据,全依赖于Ext.data. ... -
extJs 2.0学习笔记(Ext.Panel终结篇)
2009-08-05 21:49 1113怪不得我对Ext.Panel穷追猛打,前面已经写过四篇针对它的 ... -
extJs 2.0学习笔记(事件注册总结篇)
2009-08-05 21:48 1117本来,我也没把这档子 ... -
extJs 2.0学习笔记(Ext.Panel篇四)
2009-08-05 21:46 1668我刚才禁不住诱惑去看 ... -
extJs 2.0学习笔记(Ext.Panel篇三)
2009-08-05 21:45 1885上一篇中把panel的config部分的文档翻译了一下,事实 ... -
extJs 2.0学习笔记(Ext.Panel篇二)
2009-08-05 21:44 1353activeItem : String/Number 用 ... -
extJs 2.0学习笔记(Ext.Panel篇一)
2009-08-05 21:42 1196原文链接: http://hi.baidu ... -
EXT 中 类的继承
2009-07-31 09:36 977深入剖析ExtJS 2.2实现及 ... -
Ext架构分析:render方法
2009-07-16 08:51 5049Ext架构分析(3)--Widget之 ...
相关推荐
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. ...
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 ...
Android MultiStacks 入门 相依性 build.gradle添加到root build.gradle allprojects { repositories { ..... } ... 并线到build.gradle水平build.gradle ... Builder (supportFragmentManager, R .id.containerLayout)
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漂亮动画。 可用的...
header, containerLayout) .minHeightHeader( 250 ) .build(); 就是这样,伙计们!标题动画师使用StikkyHeader,您可以轻松地创建一些漂亮的动画来扩展HeaderStikkyAnimator并使用实用程序AnimatorBuilder 。 可用...