关于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 相关文章推荐
javascript GUID生成器实现代码
Oct 31 Javascript
基于jQuery的JavaScript模版引擎JsRender使用指南
Dec 29 Javascript
JQuery实现动态添加删除评论的方法
May 18 Javascript
详解JavaScript逻辑And运算符
Dec 04 Javascript
jQuery插件编写步骤详解
Jun 03 Javascript
js数组操作方法总结(必看篇)
Nov 22 Javascript
jquery.cookie.js的介绍与使用方法
Feb 09 Javascript
Node.js使用orm2进行update操作时关联字段无法修改的解决方法
Jun 13 Javascript
Webpack path与publicPath的区别详解
May 03 Javascript
JS温故而知新之变量提升和时间死区
Jan 27 Javascript
vue实现下载文件流完整前后端代码
Nov 17 Vue.js
vue中如何添加百度统计代码
Dec 19 Vue.js
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
PHP经典的给图片加水印程序
2006/12/06 PHP
PHP循环语句笔记(foreach,list)
2011/11/29 PHP
PHP迭代器的内部执行过程详解
2013/11/12 PHP
用PHP生成excel文件到指定目录
2015/06/22 PHP
php显示页码分页类的封装
2017/06/08 PHP
Laravel基础-关于引入公共文件的两种方式
2019/10/18 PHP
jquery last-child 列表最后一项的样式
2010/01/22 Javascript
JavaScript 内置对象属性及方法集合
2010/07/04 Javascript
JavaScript的各种常见函数定义方法
2014/09/16 Javascript
jQuery插件slick实现响应式移动端幻灯片图片切换特效
2015/04/12 Javascript
javascript冒泡排序小结
2016/04/10 Javascript
jQuery如何防止Ajax重复提交
2016/10/14 Javascript
js实现选项卡内容切换以及折叠和展开效果【推荐】
2017/01/08 Javascript
html5 canvas 详细使用教程
2017/01/20 Javascript
Angular2入门教程之模块和组件详解
2017/05/28 Javascript
React Native之ListView实现九宫格效果的示例
2017/08/02 Javascript
Vue-router 类似Vuex实现组件化开发的示例
2017/09/15 Javascript
Vue中Quill富文本编辑器的使用教程
2018/09/21 Javascript
JavaScript实现的联动菜单特效示例
2019/07/08 Javascript
对Layer UI 模块化的用法详解
2019/09/26 Javascript
Vue项目配置跨域访问和代理proxy设置方式
2020/09/08 Javascript
Python 正则表达式操作指南
2009/05/04 Python
简单介绍Python下自己编写web框架的一些要点
2015/04/29 Python
python3 图片referer防盗链的实现方法
2018/03/12 Python
Python使用Pickle模块进行数据保存和读取的讲解
2019/04/09 Python
Win10里python3创建虚拟环境的步骤
2020/01/31 Python
Python中and和or如何使用
2020/05/28 Python
详解python tcp编程
2020/08/24 Python
Python3利用scapy局域网实现自动多线程arp扫描功能
2021/01/21 Python
英国最大的海报商店:GB Posters
2018/03/20 全球购物
大学生简历自我评价2015
2015/03/03 职场文书
就业证明函
2015/06/17 职场文书
2019年最新七夕唯美祝福语(60条)
2019/07/22 职场文书
门面租赁合同范文
2019/08/06 职场文书
Vue3.0写自定义指令的简单步骤记录
2021/06/27 Vue.js
MySQL GTID复制的具体使用
2022/05/20 MySQL