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

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]
});

赞 (0)

相关推荐

  • ExtJs 学习笔记 Ext.Panle Ext.TabPanel Ext.Viewport第1/3页

    ExtJs 学习笔记 Ext.Panle Ext.TabPanel Ext.Viewport第1/3页

    通过此文能学习到如下内容 1.创建一个简单的面板 Ext.Panel 2.制作一个可以拖动的面板 Ext.Panel 3 .使用选项卡面板 3.使用Ext.Viewport搭一个简单布局(用一个小例子来总结本文所有内容) 面板是ExtJs控件的基础,很多控件都是在面板的基础上扩展的,或者他会与其他控件之间有关系. 面板由一个工具栏.一个底部工具栏.面板头部.面板尾部和面板主区域几个部分组成.面本类中还提供了面板展开.关闭等功能.并提供了一些可重用的工具按钮让我们灵活的控制面板.面板可以放入其他任

  • 通过viewport实现jsp页面支持手机缩放

    要加入<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes"> 标签 其中个属性的意思: width :- viewport的宽度 height: - viewport的高度 initial-scale: - 初始的缩放比例 minimum-scale: -

  • 关于meta viewport中target-densitydpi属性详解（推荐）

    关于meta viewport中target-densitydpi属性详解（推荐）

    前段时间在做WAP页面,发现页面设置了meta viewport中的大众属性,即: <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" >  但发现页面依旧不根据手机屏幕进行自动缩放,后来找其他同事帮忙解决了,我看了源代码发现了是在原来的viewport中增加了target-densitydpi属性.看之初不太了解,也因为当时自己手

  • 自适应布局meta标签中viewport、content、width、initial-scale、minimum-scale、maximum-scale总结

    一.先明白几个概念 phys.width: device-width: 一般我们所指的宽度width即为phys.width,而device-width又称为css-width. 其中我们可以获取phys.width即width通过document.documentElement.clientWidth;而获取css-width通过 window.screen.width获取.如iphone6的phys.width为750px,而css-width为375px. 二.明白一个浏览器默认行为. 试

  • Ext.get() 和 Ext.query()组合使用实现最灵活的取元素方式

    前面写的get()和query()我都省略参数了,先看看文档中的函数原型: Ext.get( Mixed el ) : Element Parameters: el : Mixed The id of the node, a DOM Node or an existing Element. Returns: Element The Element object Ext.query( String path, [Node root] ) : Array Parameters: path : Str

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

    Ext.panel 可以存放很多元素,最常见的是Ext.form.formPanel对象,也可以用borderlayout布局 下面是我写的一个小例子,顶级容器不是viewport而是tabpanel 复制代码 代码如下: //一个普通的表单 var frm = new Ext.form.FormPanel({ defaultType: 'textfield', labelAlign: 'right', title: 'form1-center', labelWidth: 50, frame:

  • 学习ExtJS Panel常用方法

    一.属性 frame:布尔类型true 或 false ,为true时表示边框为圆角且具有背景色,取false则反之. xtype:在EXTJS的可视化组件部署中的一种机制,即通过指定xtype的值,来告诉容量如何初始化所包含的级件,如xtype:"textfiled",表示使用Ext.form.TextFile来进行初始化当前组件. xtype Class ------------- ------------------ box Ext.BoxComponent button Ext

  • Ext JS动态加载JavaScript创建窗体的方法

    Ext JS动态加载JavaScript创建窗体的方法

    JavaScript不需要编译即可运行,这让JavaScript构建的应用程序可以变得很灵活.我们可以根据需要动态从服务器加载JavaScript脚本来创建和控制UI来与用户交互.下面结合Ext JS来说明如何从服务器上动态加载JS脚本来动态创建窗体.  1 项目结构:  项目结构如下:其中GetJSUI一般处理程序用来从数据库表中抓取UI配置,并返回到客户端:Contents文件夹下用HTML文件和JS库等. 2 数据库表结构 可以用下面的SQL在MSSQL中创建表,其中JavaScriptC

  • JavaScript的Ext JS框架中的GridPanel组件使用指南

    JavaScript的Ext JS框架中的GridPanel组件使用指南

    1 最简单的Grid Panel Grid Panel是ExtJS的核心部分之一,通过Grid Panel可以对数据显示.排序.分组和编辑.Model和Store是Grid Panel处理数据的核心,每个Grid Panel都必须设置Model和Store.要创建Grid Panel,首先要定义Model,Model包括了Grid Panel所有需要显示的字段,相当于数据库中表字段的集合.Store可以看作是一行数据的集合或者是Model的实例集合,每个Store都包含一个或多个Model实例,

  • Ext4.2的Ext.grid.plugin.RowExpander无法触发事件解决办法

    Ext4.2的Ext.grid.plugin.RowExpander无法触发事件解决办法

    Ext4.2+ Ext.grid.plugin.RowExpander存在bug,添加的collapsebody,expandbody无法触发,查看了下 Ext.grid.plugin.RowExpander对应的源代码,没有添加collapsebody,expandbody事件,即使按照网上的方 法重写Ext.grid.plugin.RowExpander的init和toggleRow方法也无法触发 collapsebody,expandbody事件. 解决办法:给grid对象添加collap

  • ExtJs 学习笔记基础篇 Ext组件的使用第1/2页

    ExtJs 学习笔记基础篇 Ext组件的使用第1/2页

    天介绍一下Ext中组件举几个简单的例子做说明.注意:文章内容有些摘自本人学习过程中看到的资料. Ext2.0对框架进行了非常大的重构,其中最重要的是形成了一个结构及层次分明的组件体系,由这些组件形成了Ext控件.Ext组件由Component类定义,每一种组件都有一个指定的xtype属性值,通过该值可以得到一个组件的类型或者是定义一个指定类型的组件. Ext组件体系由下图所示: 组件大致可分成三大类,即基本组件.工具栏组件.表单元素组件.      基本组件有这么多的组件,可都是非常酷的.组件使

  • Ext面向对象开发实践代码第1/2页

    Ext面向对象开发实践代码第1/2页

    示例程序简述: 这个Demo为了演示如将使用GridPanel显示数据,并为GridPanel添加工具条按钮,提供弹出式窗体新增数据. 使用到的Ext组件 这个Demo涉及到Ext中的GridPanel,FormPanel和Window三个组件.效果图现在开始讲解代码,首先看一下创建GridPanel的代码片段 复制代码 代码如下: //定义数据列表面板类 PersonListGridPanel = Ext.extend(Ext.grid.GridPanel, { insertWin: null

  • Ext 表单布局实例代码

    复制代码 代码如下: Ext.onReady(function(){ Ext.QuickTips.init(); //第一句的目的是为需要的元件提供提示信息功能,form的主要提示信息就是客户端验证的错误信息了. Ext.form.Field.prototype.msgTarget = 'under'; //第二句的目的就是设置控件的错误信息显示位置,主要可选的位置有: var tdate = new Ext.form.DateField({ fieldLabel: '日期', emptyTex

随机推荐