ExtJs学习笔记(14)_Column布局

Column布局有点象传统html中的table的td,但是也有不同的地方:

先看下代码

<script type="text/javascript">
     Ext.onReady(function() {
 var win = new Ext.Window({
             title: "Column Layout",
             height: 300,
             width: 400,
             plain: true,
             layout: 'column',
             items: [{
                 title:"width=50%",
                 columnWidth:0.5,
                 html:"width=(容器宽度-容器内其它组件固定宽度)*50%",
                 height:200
             },
             {
                 title:"width=250px",
                 width: 200,
                 height:100,
                 html:"固定宽度为250px"
             }            
             ]
         });
         win.show();
     });
 </script>

效果图:

对于一下:

<tr>
     <td width="50%"></td>
     <td width="30px"><td>
     <td></td>
</tr>

在table中,这里第一列会占到整个行的50%的宽度,而在ExtJs的column布局中,百分比是指(容器宽度-有固定width值组件的宽度)后,再乘相应百分比得到的宽度

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Micro_awake web

JavaScript OOP(一)之构造函数与new命令

 面向对象编程:Object Oriented Programming,简称OOP。 典型的oop语言,如hava、c++,存在着类的概念,类就是对象的模板 (...

21370
来自专栏Micro_awake web

JavaScript OOP(二):this关键字以及call、apply、bind

JavaScript的this关键字非常灵活! this 返回的总是对象;即返回属性或方法“当前”所在的对象 1 var o1={ 2 name:'...

20150
来自专栏Micro_awake web

javascript(三):对象

 对象(object)是javascript中很重要的数据类型。对象是“键值对”的集合,同时也是无序的。(注意:对象结尾处有分号) 1 var ob1={ ...

216100
来自专栏Micro_awake web

javascript(二):数据类型&数值

第一部分:数据类型 javascript数据类型通常来说是6种(ES6新增第七种Symbol类型) number:数值 string:字符串 boolean:布...

21550
来自专栏Micro_awake web

javascript(一):javascript基本介绍及基本语法

什么是javascript? javascript是一种直译型脚本语言,是一种动态类型、弱类型、基于原型的语言。(所谓“脚本语言”:指的是它不具有开发操作系统的...

22080
来自专栏Micro_awake web

JavaScript正则表达式(Regular Expression):RegExp对象

第一部分:新建正则表达式 JavaScript中正则表达式是参照Perl 5(一门历史很悠久的语言,现在tiobe编程语言排行依然在10名左右)建立的。 新建正...

22450
来自专栏Micro_awake web

JavaScript(四):运算符&数据类型转换

+:算符的加法;连接字符串 加法会将其它类型的值,自动转为字符串,然后再进行连接运算! 1 var a=1+2; 2 console.log('first:...

20960
来自专栏积累沉淀

Java设计模式(十九)----备忘录模式

备忘录模式 一、 概念 二、 结构 三、 分类 1.”白箱”备忘录模式的实现 2.“黑箱”备忘录模式的实现 3.“多重”检查点 4....

20790
来自专栏Micro_awake web

JavaScript(五):函数(闭包,eval)

1.函数的申明:三种方法: function命令 函数表达式:变量赋值 Function构造函数 1 //method 1: function命令 2 fu...

274100
来自专栏Micro_awake web

JavaScript(六):错误处理机制

1.Error()构造函数 javascript解析或执行语句时,一旦发生错误,js引擎会将其抛出! JavaScript原生提供了Error()构造函数,所有...

20780

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励