首页 web前端 js教程 关于viewport,Ext.panel和Ext.form.panel的关系_extjs

关于viewport,Ext.panel和Ext.form.panel的关系_extjs

May 16, 2016 pm 06:53 PM
ext panel viewport

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]
});
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热门文章

两个点博物馆:邦格荒地地点指南
4 周前 By 尊渡假赌尊渡假赌尊渡假赌
仓库:如何复兴队友
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
3 周前 By 尊渡假赌尊渡假赌尊渡假赌

热门文章

两个点博物馆:邦格荒地地点指南
4 周前 By 尊渡假赌尊渡假赌尊渡假赌
仓库:如何复兴队友
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
3 周前 By 尊渡假赌尊渡假赌尊渡假赌

热门文章标签

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

Ubuntu恢复被误删除的GNOME Panel的方法 Ubuntu恢复被误删除的GNOME Panel的方法 Jan 06, 2024 pm 11:01 PM

Ubuntu恢复被误删除的GNOME Panel的方法

深入探讨Linux ext2文件系统的物理存储结构 深入探讨Linux ext2文件系统的物理存储结构 Mar 14, 2024 pm 09:06 PM

深入探讨Linux ext2文件系统的物理存储结构

CSS Viewport: 如何使用 vh、vw、vmin 和 vmax 单位来实现响应式设计 CSS Viewport: 如何使用 vh、vw、vmin 和 vmax 单位来实现响应式设计 Sep 13, 2023 pm 12:15 PM

CSS Viewport: 如何使用 vh、vw、vmin 和 vmax 单位来实现响应式设计

如何使用 CSS Viewport 单位 vh 来创建适配手机屏幕的网页布局 如何使用 CSS Viewport 单位 vh 来创建适配手机屏幕的网页布局 Sep 13, 2023 am 11:15 AM

如何使用 CSS Viewport 单位 vh 来创建适配手机屏幕的网页布局

分析Linux ext2文件系统的物理组织方式 分析Linux ext2文件系统的物理组织方式 Mar 15, 2024 am 09:24 AM

分析Linux ext2文件系统的物理组织方式

使用 CSS Viewport 单位 vh 和 vmin 创建媒体查询的技巧 使用 CSS Viewport 单位 vh 和 vmin 创建媒体查询的技巧 Sep 13, 2023 am 11:18 AM

使用 CSS Viewport 单位 vh 和 vmin 创建媒体查询的技巧

panel控件怎么用 panel控件怎么用 Oct 10, 2023 am 09:36 AM

panel控件怎么用

Linux系统中ext3和ext4有什么不同? Linux系统中ext3和ext4有什么不同? Feb 19, 2024 am 11:48 AM

Linux系统中ext3和ext4有什么不同?

See all articles