关于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基础的动画教程,直观易懂
Jan 10 Javascript
JS高级调试技巧:捕获和分析 JavaScript Error详解
Mar 16 Javascript
jQuery实现鼠标经过图片变亮其他变暗效果
May 08 Javascript
Webpack 实现 Node.js 代码热替换
Oct 22 Javascript
Treegrid的动态加载实例代码
Apr 29 Javascript
AngularJS bootstrap启动详解及实例代码
Sep 14 Javascript
实现隔行换色效果的两种方式【实用】
Nov 27 Javascript
angularjs指令之绑定策略(@、=、&)
Apr 13 Javascript
微信小程序实现添加手机联系人功能示例
Nov 30 Javascript
vue-router 源码实现前端路由的两种方式
Jul 02 Javascript
express如何解决ajax跨域访问session失效问题详解
Jun 20 Javascript
如何利用node转发请求详解
Sep 17 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
PHP针对常规模板引擎中与CSS/JSON冲突的解决方法
2014/08/19 PHP
JavaScript 函数replace深入了解
2013/03/14 Javascript
jQuery提交多个表单的小例子
2013/06/30 Javascript
解析js原生方法创建表格效率测试
2013/07/08 Javascript
原生javascript实现DIV拖拽并计算重复面积
2015/01/02 Javascript
javascript Array 数组常用方法
2015/04/05 Javascript
angular ngClick阻止冒泡使用默认行为的方法
2016/11/03 Javascript
jQuery得到多个值只能用取Class ,不能用取ID的方法
2016/12/04 Javascript
Node.js查找当前目录下文件夹实例代码
2017/03/07 Javascript
CheckBox多选取值及判断CheckBox选中是否为空的实例
2017/10/31 Javascript
TypeScript基础入门教程之三重斜线指令详解
2018/10/22 Javascript
electron + vue项目实现打印小票功能及实现代码
2018/11/25 Javascript
vue-router命名视图的使用讲解
2019/01/19 Javascript
[58:12]Ti4第二日主赛事败者组 LGD vs iG 3
2014/07/21 DOTA
Python判断某个用户对某个文件的权限
2016/10/13 Python
对numpy数据写入文件的方法讲解
2018/07/09 Python
Python函数any()和all()的用法及区别介绍
2018/09/14 Python
pyqt 实现在Widgets中显示图片和文字的方法
2019/06/13 Python
Python使用docx模块实现刷题功能代码
2020/02/13 Python
Python unittest 自动识别并执行测试用例方式
2020/03/09 Python
从零开始的TensorFlow+VScode开发环境搭建的步骤(图文)
2020/08/31 Python
Python 数据分析之逐块读取文本的实现
2020/12/14 Python
H5 canvas中width、height和style的宽高区别详解
2018/11/02 HTML / CSS
详解canvas在圆弧周围绘制文本的两种写法
2018/05/22 HTML / CSS
美国唇部护理专家:Sara Happ
2019/06/19 全球购物
夏威夷咖啡公司:Hawaii Coffee Company
2019/09/19 全球购物
传统软件工程与面向对象的软件工程有什么区别
2012/05/31 面试题
小学德育工作经验交流材料
2014/05/22 职场文书
2014年重阳节老干部座谈会上的讲话稿
2014/09/25 职场文书
2014年计划生育工作总结
2014/11/14 职场文书
2014年林业工作总结
2014/12/05 职场文书
小英雄雨来观后感
2015/06/09 职场文书
《哪吒之魔童降世》观后感:世上哪有随随便便的成功
2019/11/08 职场文书
HTML5来实现本地文件读取和写入的实现方法
2021/05/25 HTML / CSS
Java使用httpRequest+Jsoup爬取红蓝球号码
2021/07/02 Java/Android
Java实现给Word文件添加文字水印
2022/02/15 Java/Android