关于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 Web Slider 焦点图示例源码
Oct 10 Javascript
JS简单的图片放大缩小的两种方法
Nov 11 Javascript
JavaScript中的公有、私有、特权和静态成员用法分析
Nov 20 Javascript
node.js中的fs.renameSync方法使用说明
Dec 16 Javascript
bootstrap读书笔记之CSS组件(上)
Oct 17 Javascript
本地Bootstrap文件字体图标引入却无法显示问题的解决方法
Apr 18 Javascript
EasyUI学习之DataGird分页显示数据
Dec 29 Javascript
基于jQuery实现Ajax验证用户名是否可用实例
Mar 25 jQuery
小程序视频列表中视频的播放与停止的示例代码
Jul 20 Javascript
详解Axios 如何取消已发送的请求
Oct 20 Javascript
JavaScript基于遍历操作实现对象深拷贝功能示例
Mar 05 Javascript
vue穿梭框实现上下移动
Jan 29 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
无线电广播的开始
2002/01/30 无线电
修改destoon会员公司的伪静态中的com目录的方法
2014/08/21 PHP
PHP如何防止XSS攻击与XSS攻击原理的讲解
2019/03/22 PHP
Laravel 5.2 文档 数据库 ―― 起步介绍
2019/10/21 PHP
神奇的代码 通杀各种网站-可随意修改复制页面内容
2008/07/17 Javascript
jquery select操作的日期联动实现代码
2009/12/06 Javascript
javascript中字符串的定义示例代码
2013/12/19 Javascript
javascript跨域的方法汇总
2015/10/23 Javascript
AngularJS优雅的自定义指令
2016/07/01 Javascript
微信小程序使用Socket的实例
2017/09/19 Javascript
ES6 javascript中Class类继承用法实例详解
2017/10/30 Javascript
关于Google发布的JavaScript代码规范你要知道哪些
2018/04/04 Javascript
全站最详细的Vuex教程
2018/04/13 Javascript
webpack打包多页面的方法
2018/11/30 Javascript
优雅的将ElementUI表格变身成树形表格的方法步骤
2019/04/11 Javascript
layui 富文本图片上传接口与普通按钮 文件上传接口的例子
2019/09/23 Javascript
JS数组方法reverse()用法实例分析
2020/01/18 Javascript
js实现拖拽元素选择和删除
2020/08/25 Javascript
[05:06]TI4西雅图DOTA2前线报道 海涛密探LGD训练
2014/07/09 DOTA
在Python的Django框架下使用django-tagging的教程
2015/05/30 Python
Python函数式编程指南(一):函数式编程概述
2015/06/24 Python
Python连接Mssql基础教程之Python库pymssql
2018/09/16 Python
基于python实现学生管理系统
2018/10/17 Python
Django ORM 查询管理器源码解析
2019/08/05 Python
python中树与树的表示知识点总结
2019/09/14 Python
python实现局域网内实时通信代码
2019/12/22 Python
Python Tornado之跨域请求与Options请求方式
2020/03/28 Python
python中导入 train_test_split提示错误的解决
2020/06/19 Python
python中zip()函数遍历多个列表方法
2021/02/18 Python
国际政治个人自荐信范文
2013/11/26 职场文书
采购部主管岗位职责
2014/01/01 职场文书
2014年迎新年活动方案
2014/02/19 职场文书
自荐信的基本格式
2014/02/22 职场文书
快递员岗位职责
2014/09/12 职场文书
2015年教研室工作总结范文
2015/05/23 职场文书
婚礼必备主持词范本!
2019/07/23 职场文书