关于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 相关文章推荐
js获取当前日期代码适用于网页头部
Jun 27 Javascript
JS返回上一页实例代码通过图片和按钮分别实现
Aug 16 Javascript
js日期范围初始化得到前一个月日期的方法
May 05 Javascript
使用jquery插件qrcode生成二维码
Oct 22 Javascript
Angularjs中使用layDate日期控件示例
Jan 11 Javascript
利用Js+Css实现折纸动态导航效果实例源码
Jan 25 Javascript
JS点击图片弹出文件选择框并覆盖原图功能的实现代码
Aug 25 Javascript
微信小程序下拉框组件使用方法详解
Dec 28 Javascript
vue 实现Web端的定位功能 获取经纬度
Aug 08 Javascript
Layui tree 下拉菜单树的实例代码
Sep 21 Javascript
js实现消灭星星(web简易版)
Mar 24 Javascript
jquery实现异步文件上传ajaxfileupload.js
Oct 23 jQuery
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读取文件内容至字符串中,同时去除换行、空行、行首行尾空格(Zjmainstay原创)
2012/07/31 PHP
thinkphp获取栏目和文章当前位置的方法
2014/10/29 PHP
PHP生成加减算法方式的验证码实例
2018/03/12 PHP
Laravel 框架返回状态拦截代码
2019/10/18 PHP
jquery 回车事件实现代码
2011/08/23 Javascript
简单常用的幻灯片播放实现代码
2013/09/25 Javascript
很不错的两款Bootstrap Icon图标选择组件
2016/01/28 Javascript
如何高效率去掉js数组中的重复项
2016/04/12 Javascript
JavaScript表单焦点自动切换代码
2016/07/24 Javascript
Angularjs之filter过滤器(推荐)
2016/11/27 Javascript
Require.JS中的几种define定义方式示例
2017/06/01 Javascript
webpack中使用iconfont字体图标的方法
2018/02/22 Javascript
jQuery实现输入框的放大和缩小功能示例
2018/07/21 jQuery
利用不到200行代码写一款属于你自己的js类库
2019/07/08 Javascript
vue+element项目中过滤输入框特殊字符小结
2019/08/07 Javascript
node中使用log4js4.x版本记录日志的方法
2019/08/20 Javascript
vue 对axios get pust put delete封装的实例代码
2020/01/05 Javascript
利用 JavaScript 实现并发控制的示例代码
2020/12/31 Javascript
详解Python中的__init__和__new__
2014/03/12 Python
python利用ffmpeg进行录制屏幕的方法
2019/01/10 Python
python实现微信防撤回神器
2019/04/29 Python
TFRecord文件查看包含的所有Features代码
2020/02/17 Python
python 如何用urllib与服务端交互(发送和接收数据)
2021/03/04 Python
汉森批发:Hansen Wholesale
2018/05/24 全球购物
输入一行文字,找出其中大写字母、小写字母、空格、数字、及其他字符各有多少
2016/04/15 面试题
预备党员入党思想汇报
2014/01/04 职场文书
模具设计与制造专业推荐信
2014/02/16 职场文书
企业管理毕业生求职信范文
2014/03/07 职场文书
保险公司早会主持词
2014/03/22 职场文书
小学生评语大全
2014/04/18 职场文书
业务员自荐信范文
2014/04/20 职场文书
中国梦演讲稿3分钟
2014/08/19 职场文书
酒店员工辞职信范文
2015/02/28 职场文书
信贷客户经理岗位职责
2015/04/09 职场文书
小学毕业教师寄语
2019/06/21 职场文书
Python中X[:,0]和X[:,1]的用法
2021/05/10 Python