学习ExtJS Column布局


Posted in Javascript onOctober 08, 2009

一、属性(构造参数)
baseCls:"x-plain" Panel背景色颜色。
layout:"column" Panel进行列布局。
在子元素中指定使用columnWidth或width来指定子元素所占的列宽度。
columnWidth表示使用百分比的形式指定列宽度。
width则是使用绝对象素的方式指定列宽度,在实际应用中可以混合使用两种方式。
二、应用举例

Ext.onReady(function(){ 
new Ext.Window({ 
title:"新增", 
width:500, 
height:400, 
plain:true, 
layout:"form", 
labelWidth:55, 
items:[{ 
layout:"column", 
baseCls:"x-plain", 
style:"padding:5px", 
items:[{ 
columnWidth:.5, 
layout:"form", 
labelWidth:50, 
baseCls:"x-plain", 
items:[{ 
xtype:"textfield", 
fieldLabel:"姓名" 
},{ 
xtype:"textfield", 
fieldLabel:"姓名" 
},{ 
xtype:"textfield", 
fieldLabel:"姓名" 
},{ 
xtype:"textfield", 
fieldLabel:"姓名" 
}] 
},{ 
columnWidth:.5, 
layout:"form", 
items:[{ 
id:"name", 
xtype:"textfield", 
fieldLabel:"照片", 
inputType:"image", 
width:250, 
height:50 
}] 
}] 
},{ 
xtype:"textfield", 
fieldLabel:" 证号" 
}], 
showlock:false, 
listeners:{ 
"show":function(_window){ 
if f(!_window["showLock"]){ 
Ext.getCmp("name").getEl().dom.src = "default_pic.gif" ; 
_window.findByType("textfield")[4].getEl().dom.src = "default_pic.gif" ; 
// alert(_window.findByType("textfield")[4].fieldLabel); 
_window["showLock"]=true; 
} 
} 
}, 
buttons:[{text:"确定"},{text:"取消"}] 
}).show() ; 
}) ;

Ext.onReady(function(){ 
var _panel = new Ext.Panel({ 
title:"人员信息", 
renderTo:Ext.getBody(), 
frame:true, 
width:500, 
height:300, 
layout:"column", 
items:[{title:"列1",width:200}, 
{title:"列2",columnWidth:.3}, 
{title:"列3",columnWidth:.3}, 
{title:"列4",columnWidth:.4} 
] 
}) 
}) ;
Javascript 相关文章推荐
原生Js实现按的数据源均分时间点幻灯片效果(已封装)
Dec 28 Javascript
30个最佳jQuery Lightbox效果插件分享
Apr 11 Javascript
同一页面多个商品倒计时JS 基于面向对象的javascript
Feb 16 Javascript
js中自定义方法实现停留几秒sleep
Jul 11 Javascript
JavaScript控制图片加载完成后调用回调函数的方法
Mar 20 Javascript
jquery制作多功能轮播图插件
Apr 02 Javascript
JavaScript检测鼠标移动方向的方法
May 22 Javascript
详解JavaScript函数
Dec 01 Javascript
Javascript中Date类型和Math类型详解
Feb 27 Javascript
jquery实现焦点轮播效果
Feb 23 Javascript
vue中实现在外部调用methods的方法(推荐)
Feb 08 Javascript
vue项目中全局引入1个.scss文件的问题解决
Aug 01 Javascript
学习ExtJS 访问容器对象
Oct 07 #Javascript
学习ExtJS Window常用方法
Oct 07 #Javascript
学习ExtJS Panel常用方法
Oct 07 #Javascript
学习ExtJS TextField常用方法
Oct 07 #Javascript
学习ExtJS(二) Button常用方法
Oct 07 #Javascript
学习ExtJS(一) 之基础前提
Oct 07 #Javascript
JavaScript 浮点数运算 精度问题
Oct 06 #Javascript
You might like
全国FM电台频率大全 - 7 吉林省
2020/03/11 无线电
php 读取shell管道传输过来的内容
2010/03/01 PHP
php常用字符串String函数实例总结【转换,替换,计算,截取,加密】
2016/12/07 PHP
javascript 自动转到命名锚记
2009/01/10 Javascript
判断目标是否是window,document,和拥有tagName的Element的代码
2010/05/31 Javascript
onsubmit阻止form表单提交与onclick的相关操作
2010/09/03 Javascript
JavaScript框架是什么?怎样才能叫做框架?
2015/07/01 Javascript
Javascript实现图片加载从模糊到清晰显示的方法
2016/06/21 Javascript
AngularJS辅助库browserTrigger用法示例
2016/11/03 Javascript
原生JS轮播图插件
2017/02/09 Javascript
jQuery实现的背景颜色渐变动画效果示例
2017/03/24 jQuery
JS返回顶部实例代码
2020/08/09 Javascript
elementUI select组件默认选中效果实现的方法
2019/03/25 Javascript
vue以组件或者插件的形式实现throttle或者debounce
2019/05/22 Javascript
JavaScript实现英语单词题库
2019/12/24 Javascript
node.js中process进程的概念和child_process子进程模块的使用方法示例
2020/02/11 Javascript
[01:03:31]DOTA2上海特级锦标赛B组资格赛#1 Alliance VS Fnatic第二局
2016/02/26 DOTA
对pycharm代码整体左移和右移缩进快捷键的介绍
2018/07/16 Python
查看python安装路径及pip安装的包列表及路径
2019/04/03 Python
Python数学形态学实例分析
2019/09/06 Python
Numpy与Pytorch 矩阵操作方式
2019/12/27 Python
django 解决model中类写不到数据库中,数据库无此字段的问题
2020/05/20 Python
解决keras backend 越跑越慢问题
2020/06/18 Python
css3新单位vw、vh的使用教程
2018/03/23 HTML / CSS
健身场所或家用健身设备:Life Fitness
2017/11/01 全球购物
Fox Racing英国官网:越野摩托车和山地自行车服装
2020/02/26 全球购物
英国马莎百货印度官网:Marks & Spencer印度
2020/10/08 全球购物
杭州龙健科技笔试题.net部分笔试题
2016/01/24 面试题
4s店总经理岗位职责
2013/12/31 职场文书
幼儿园大班评语大全
2014/04/17 职场文书
《海伦?凯勒》教学反思
2014/04/17 职场文书
护理学院专科毕业生求职信
2014/06/28 职场文书
团代会开幕词
2015/01/28 职场文书
研究生导师推荐信
2015/03/25 职场文书
Nginx禁止ip访问或非法域名访问
2022/04/07 Servers
Android使用EventBus发送消息,Fragment中接收消息的方法会执行多次
2022/04/24 Java/Android