关于viewport,Ext.panel和Ext.form.panel的关系


Posted in Javascript onMay 07, 2009

Ext.panel 可以存放很多元素,最常见的是Ext.form.formPanel对象,也可以用borderlayout布局
下面是我写的一个小例子,顶级容器不是viewport而是tabpanel

//一个普通的表单 
var frm = new Ext.form.FormPanel({ 
defaultType: 'textfield', 
labelAlign: 'right', 
title: 'form1-center', 
labelWidth: 50, 
frame: true, 
width: 120, 
height:200, 
region: 'center', 
closable: true, //这个属性就可以控制关闭该from 
items: [{ 
fieldLabel: '文本框' 
}], 
buttons: [{ 
text: '按钮' 
}] 
}); 
//同志们请注意,region表示以borderlayout布局,在center位置 
//下面我建立一个grid 
// grid start 
var cm = new Ext.grid.ColumnModel([ 
{ header: '编号', dataIndex: 'id' }, 
{ header: '名称', dataIndex: 'name' }, 
{ header: '描述', dataIndex: 'descn' } 
]); 
var data = [ 
['1', 'name1', 'descn1'], 
['2', 'name2', 'descn2'], 
['3', 'name3', 'descn3'], 
['4', 'name4', 'descn4'], 
['5', 'name5', 'descn5'] 
]; 
var ds = new Ext.data.Store({ 
proxy: new Ext.data.MemoryProxy(data), 
reader: new Ext.data.ArrayReader({}, [ 
{ name: 'id' }, 
{ name: 'name' }, 
{ name: 'descn' } 
]) 
}); 
ds.load(); 
var grid = new Ext.grid.GridPanel({ 
ds: ds, 
cm: cm, 
title: 'center-north', 
region: 'north', 
width:200, 
height:200 
}); 
// grid end 
//同志们请注意,region表示以borderlayout布局,在north位置 
//能包含其他panel的是Ext.panel 
var fullForm = new Ext.Panel({ 
title: '老子是很牛比的', 
closable:true, 
border: true, 
layout: 'border',//请注意他的布局方式 
items: [grid, frm] 
});
Javascript 相关文章推荐
jquery 问答知识整理
Feb 11 Javascript
JavaScript 数组运用实现代码
Apr 13 Javascript
Javascript 类型转换方法
Oct 24 Javascript
PHP 与 js的通信(via ajax,json)
Nov 16 Javascript
jQuery实现菜单感应鼠标滑动动画效果的方法
Feb 28 Javascript
JavaScript 闭包机制详解及实例代码
Oct 10 Javascript
ECMAScript6 新特性范例大全
Mar 24 Javascript
Vue2.0父子组件传递函数的教程详解
Oct 16 Javascript
Bootstrap-table使用footerFormatter做统计列功能
Sep 07 Javascript
jquery实现的放大镜效果示例
Feb 24 jQuery
通过实例解析JavaScript常用排序算法
Sep 02 Javascript
Python机器学习之决策树和随机森林
Jul 15 Javascript
jQuery 1.2.x 升? 1.3.x 注意事项
May 06 #Javascript
jQuery select的操作实现代码
May 06 #Javascript
jQuery textarea的长度进行验证
May 06 #Javascript
JS 动态加载脚本的4种方法
May 05 #Javascript
JavaScript 字符编码规则
May 04 #Javascript
ExtJS 2.2.1的grid控件在ie6中的显示问题
May 04 #Javascript
JavaScript 实现模态对话框 源代码大全
May 02 #Javascript
You might like
使用无限生命期Session的方法
2006/10/09 PHP
php实现两个数组相加的方法
2015/02/17 PHP
PHP中strcmp()和strcasecmp()函数字符串比较用法分析
2016/01/07 PHP
Composer设置忽略版本匹配的方法
2016/04/27 PHP
php使用curl并发减少后端访问时间的方法分析
2016/05/12 PHP
php基于PDO连接MSSQL示例DEMO
2016/07/13 PHP
PHP如何使用cURL实现Get和Post请求
2020/07/11 PHP
Extjs学习笔记之二 初识Extjs之Form
2010/01/07 Javascript
html5+javascript制作简易画板附图
2014/04/25 Javascript
纯js实现重发验证码按钮倒数功能
2015/04/21 Javascript
获取JavaScript异步函数的返回值
2016/12/21 Javascript
详解通过JSON数据使用VUE.JS
2017/05/26 Javascript
详解vue 配合vue-resource调用接口获取数据
2017/06/22 Javascript
详解Node.js读写中文内容文件操作
2018/10/10 Javascript
jQuery+Datatables实现表格批量删除功能【推荐】
2018/10/24 jQuery
[00:34]DOTA2上海特级锦标赛 VG战队宣传片
2016/03/04 DOTA
Python工程师面试题 与Python基础语法相关
2016/01/14 Python
Python如何抓取天猫商品详细信息及交易记录
2018/02/23 Python
python增加矩阵维度的实例讲解
2018/04/04 Python
Python双向循环链表实现方法分析
2018/07/30 Python
Python操作Mongodb数据库的方法小结
2019/09/10 Python
Python 炫技操作之合并字典的七种方法
2020/04/10 Python
python3 使用ssh隧道连接mysql的操作
2020/12/05 Python
荷兰网上鞋店:Ziengs.nl
2017/01/02 全球购物
新闻专业毕业生英文求职信
2014/03/19 职场文书
篝火晚会主持词
2014/03/25 职场文书
道德之星事迹材料
2014/05/03 职场文书
代办出身证明书
2014/10/21 职场文书
八一建军节主持词
2015/07/01 职场文书
2015年社区国庆节活动总结
2015/07/30 职场文书
社区服务活动感想
2015/08/11 职场文书
资深HR教你写好简历中的自我评价
2019/05/07 职场文书
Oracle 数据仓库ETL技术之多表插入语句的示例详解
2021/04/12 Oracle
MySQL的安装与配置详细教程
2021/06/26 MySQL
Python万能模板案例之matplotlib绘制甘特图
2022/04/13 Python
Oracle删除归档日志及添加定时任务
2022/06/28 Oracle