关于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 表单规则集合对象
Jul 21 Javascript
jquery提取元素里的纯文本不包含span等里的内容
Sep 30 Javascript
巧用replace将文字表情替换为图片
Apr 17 Javascript
javascript实现的元素拖动函数宿主为浏览器
Jul 21 Javascript
Jquery1.9.1源码分析系列(六)延时对象应用之jQuery.ready
Nov 24 Javascript
jQuery简单实现tab选项卡切换效果
Jun 20 Javascript
js模拟支付宝密码输入框
Apr 11 Javascript
使用vue-cli(vue脚手架)快速搭建项目的方法
May 21 Javascript
react脚手架如何配置less和ant按需加载的方法步骤
Nov 28 Javascript
BootStrap前端框架使用方法详解
Feb 26 Javascript
Openlayers学习之加载鹰眼控件
Sep 28 Javascript
vue2.0 watch里面的 deep和immediate用法说明
Oct 30 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
无线电的诞生过程
2021/03/01 无线电
php实现水仙花数的4个示例分享
2014/04/08 PHP
php中最简单的字符串匹配算法
2014/12/16 PHP
PHP开发中常用的十个代码样例
2016/02/02 PHP
php高性能日志系统 seaslog 的安装与使用方法分析
2020/02/29 PHP
prototype 的说明 js类
2006/09/07 Javascript
Asp.net下使用Jquery Ajax传送和接收DataTable的代码
2010/09/12 Javascript
JSON.stringify 语法实例讲解
2012/03/14 Javascript
用javascript模仿ie的自动完成类似自动完成功的表单
2012/12/12 Javascript
js 判断上传文件大小及格式代码
2013/11/13 Javascript
Jquery给当前页或者跳转后页面的导航栏添加选中后样式的实例
2016/12/08 Javascript
js判断iframe中元素是否存在的实现代码
2016/12/24 Javascript
解决微信内置浏览器返回上一页强制刷新问题方法
2017/02/05 Javascript
angularjs实现首页轮播图效果
2017/04/14 Javascript
详解ECMAScript6入门--Class对象
2017/04/27 Javascript
ES6正则表达式的一些新功能总结
2017/05/09 Javascript
VUE实现可随意拖动的弹窗组件
2018/09/25 Javascript
Python实现给文件添加内容及得到文件信息的方法
2015/05/28 Python
Python+django实现简单的文件上传
2016/08/17 Python
pandas基于时间序列的固定时间间隔求均值的方法
2019/07/04 Python
python中加背景音乐如何操作
2020/07/19 Python
基于python实现操作git过程代码解析
2020/07/27 Python
使用CSS3来制作消息提醒框
2015/07/12 HTML / CSS
html5音频_动力节点Java学院整理
2018/08/22 HTML / CSS
Html5 FileReader实现即时上传图片功能实例代码
2014/09/01 HTML / CSS
贝嫂喜欢的婴儿品牌,个性化的婴儿礼物:My 1st Years
2017/11/19 全球购物
英国在线女鞋目的地:SIMMI
2018/12/27 全球购物
大三预备党员入党思想汇报
2014/01/08 职场文书
毕业生就业推荐表自我鉴定
2014/03/20 职场文书
关于环保的演讲稿
2014/05/10 职场文书
环卫工人先进事迹材料
2014/06/02 职场文书
领导干部作风建设自查报告
2014/10/23 职场文书
二年级上册数学教学计划
2015/01/20 职场文书
公司年会晚会开幕词
2019/04/02 职场文书
python 模拟在天空中放风筝的示例代码
2021/04/21 Python
SQL实现LeetCode(176.第二高薪水)
2021/08/04 MySQL