关于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核心读书有感之语句
Feb 11 Javascript
原生js实现模拟滚动条
Jun 15 Javascript
js绘制圆形和矩形的方法
Aug 05 Javascript
jQuery Ajax 实例代码 ($.ajax、$.post、$.get)
Apr 29 Javascript
jquery简单插件制作(fn.extend)完整实例
May 24 Javascript
javascript三种代码注释方法
Jun 02 Javascript
基于JavaScript实现前端文件的断点续传
Oct 17 Javascript
JS实现HTML标签转义及反转义
Apr 14 Javascript
vue2.0结合DataTable插件实现表格动态刷新的方法详解
Mar 17 Javascript
基于Vue实现支持按周切换的日历
Sep 24 Javascript
详解vue中axios请求的封装
Apr 08 Javascript
如何基于viewport vm适配移动端页面
Nov 13 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 preg_match_all结合str_replace替换内容中所有img
2008/10/11 PHP
php四种基础算法代码实例
2013/10/29 PHP
qq登录,新浪微博登录接口申请过程中遇到的问题
2014/07/22 PHP
深入理解php printf() 输出格式化的字符串
2016/05/23 PHP
php封装的smarty类完整实例
2016/10/19 PHP
Thinkphp开发--集成极光推送
2017/09/15 PHP
ThinkPHP5分页paginate代码实例解析
2020/11/10 PHP
JScript内置对象Array中元素的删除方法
2007/03/08 Javascript
浅析JavaScript中的typeof运算符
2013/11/30 Javascript
javascript实现简单的全选和反选功能
2016/01/05 Javascript
JS实现的手机端精简幻灯片效果
2016/09/05 Javascript
JS查找字符串中出现最多的字符及个数统计
2017/02/04 Javascript
Nodejs 和Session 原理及实战技巧小结
2017/08/25 NodeJs
浅谈angular.copy() 深拷贝
2017/09/14 Javascript
Vue 全家桶实现移动端酷狗音乐功能
2018/11/16 Javascript
JavaScript forEach中return失效问题解决方案
2020/06/01 Javascript
Windows系统配置python脚本开机启动的3种方法分享
2015/03/10 Python
Django 如何获取前端发送的头文件详解(推荐)
2017/08/15 Python
对python中的xlsxwriter库简单分析
2018/05/04 Python
对python中的装包与解包实例详解
2019/08/24 Python
纯CSS打造(无图像无js)的非常流行的讲话(语音)气泡效果
2012/12/28 HTML / CSS
加拿大建筑和装修专家:Reno-Depot
2017/12/21 全球购物
生物有机护肤品:Aurelia Probiotic Skincare
2018/01/31 全球购物
Charles & Keith欧盟:新加坡时尚品牌
2019/08/01 全球购物
大学新生军训个人的自我评价
2013/10/03 职场文书
职业生涯规划书前言
2014/04/15 职场文书
设计大赛策划方案
2014/06/13 职场文书
临床专业自荐信
2014/06/22 职场文书
商务经理岗位职责
2014/07/30 职场文书
十佳家长事迹材料
2014/08/26 职场文书
防汛工作情况汇报
2014/10/28 职场文书
2015年敬老月活动总结
2015/03/27 职场文书
《红领巾真好》教学反思
2016/02/16 职场文书
Redis基本数据类型List常用操作命令
2022/06/01 Redis
使用Cargo工具高效创建Rust项目
2022/08/14 Javascript
Flink 侧流输出源码示例解析
2022/09/23 Servers