ExtJs2.0学习系列(3)--区域布局之column布局

最新推荐文章于 2021-07-01 02:58:41 发布

xuxubaby

最新推荐文章于 2021-07-01 02:58:41 发布

阅读量834

点赞数

CC 4.0 BY-SA版权

分类专栏： ext 文章标签： extjs stylesheet function xhtml html layout

本文链接：https://blog.youkuaiyun.com/y_h_t/article/details/4933185

ext 专栏收录该内容

14 篇文章

订阅专栏

Column列布局由Ext.layout.ColumnLayout类定义，名称为column。列布局把整个容器组件看成一列，然后往里面放入子元素的时候，可以通过在子元素中指定使用columnWidth或width来指定子元素所占的列宽度。columnWidth表示使用百分比的形式指定列宽度，而width则是使用绝对象素的方式指定列宽度，在实际应用中可以混合使用两种方式。

代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>ExtJs2.0学习系列(2)--区域布局之column布局 </title>
<link type="text/css" href="Ext/resources/css/ext-all.css" rel="stylesheet" />
<script type="text/javascript" src="Ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="Ext/ext-all.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
     var panel=new Ext.Panel({
    title:"test",
    x:100,
    y:100,
    renderTo:"pnl",
    floating:true,
    frame:false,
    width:400,
    height:300,
    draggable:{
        insertProxy:false,
     onDrag:function(e){
        var ele=this.proxy.getEl();
     this.x=ele.getLeft(true);
     this.y=ele.getTop(true);
     var sd=this.panel.getEl().shadow;
     if(sd)
     {
       sd.realign(this.x,this.y,ele.getWidth(),ele.getHeight());
     }
     },
     endDrag:function(e){
       this.panel.setPosition(this.x,this.y);
     }
    },
    layout:"column",
    items:[{
       columnWidth:.5,
    height:100,
    html:"fadfasd",
    frame:false,
    collapsible:true,
    title:"panel1"

    },{
       columnWidth:.5,
    title:"panel2"
    }]
});
});
</script>
</head>

下图为该示例实现的效果：