学习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文件中调用js的实现方法小结
Oct 23 Javascript
jQuery插件实现控制网页元素动态居中显示
Mar 24 Javascript
jQuery制作效果超棒的手风琴折叠菜单
Apr 03 Javascript
通过实例理解javascript中没有函数重载的概念
Jun 03 Javascript
js实现仿微博滚动显示信息的效果
Dec 21 Javascript
jQuery ajax全局函数处理session过期后的ajax跳转问题
Jun 03 Javascript
JavaScript蒙板(model)功能的简单实现代码
Aug 04 Javascript
JQuery遍历元素的后代和同胞实现方法
Sep 18 Javascript
jQuery 控制文本框自动缩小字体填充
Jun 16 jQuery
JS函数内部属性之arguments和this实例解析
Oct 07 Javascript
微信小程序与公众号卡券/会员打通的问题
Jul 25 Javascript
js+canvas实现转盘效果(两个版本)
Sep 13 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
B2K与车机的中波PK
2021/03/02 无线电
PHP 获取客户端真实IP地址多种方法小结
2010/05/15 PHP
php设置页面超时时间解决方法
2015/09/22 PHP
给WordPress的编辑后台添加提示框的代码实例分享
2015/12/25 PHP
网页的分页下标生成代码(PHP后端方法)
2016/02/03 PHP
CSS3画一个阴阳八卦图
2021/03/09 HTML / CSS
不同浏览器对回车提交表单的处理办法
2010/02/13 Javascript
基于jQuery的模仿新浪微博时间的组件
2011/10/04 Javascript
javascript实现动态加载CSS
2015/01/26 Javascript
微信小程序 action-sheet底部菜单详解
2016/10/27 Javascript
微信小程序 Template详解及简单实例
2017/01/05 Javascript
js 博客内容进度插件详解
2017/02/19 Javascript
在Debian(Raspberry Pi)树莓派上安装NodeJS的教程详解
2017/09/19 NodeJs
JS实现的JSON序列化操作简单示例
2018/07/02 Javascript
手把手教你用Node.js爬虫爬取网站数据的方法
2018/07/05 Javascript
angularjs http与后台交互的实现示例
2018/12/21 Javascript
JS实现返回上一页并刷新页面的方法分析
2019/07/16 Javascript
小程序点餐界面添加购物车左右摆动动画
2020/09/23 Javascript
vue项目打包后请求地址错误/打包后跨域操作
2020/11/04 Javascript
python基础教程之字典操作详解
2014/03/25 Python
Python 一句话生成字母表的方法
2019/01/02 Python
python requests证书问题解决
2019/09/05 Python
pytorch 自定义参数不更新方式
2020/01/06 Python
Python实现加密接口测试方法步骤详解
2020/06/05 Python
Spring http服务远程调用实现过程解析
2020/06/11 Python
python推导式的使用方法实例
2021/02/28 Python
预备党员公开承诺书
2014/05/28 职场文书
广告学专业求职信
2014/06/19 职场文书
员工年终自我评价
2014/09/14 职场文书
学习保证书100字
2015/02/26 职场文书
导师工作推荐信
2015/03/27 职场文书
护士自荐信范文(2016推荐篇)
2016/01/28 职场文书
PHP 对接美团大众点评团购券(门票)的开发步骤
2021/04/03 PHP
使用Oracle命令进行数据库备份与还原
2021/12/06 Oracle
Redis sentinel哨兵集群的实现步骤
2022/07/15 Redis
JS前端监控采集用户行为的N种姿势
2022/07/23 Javascript