窗口和对话框
1.窗口的基本使用:对应的类是Ext.Window,继承自panel,包含了浮动,
拖动,可关闭,最大化,最小化等特性.
2.窗口是分组经行管理的,可以对一组窗口进行操作,默认在组
Ext.WindowMgr中,窗口分组由类Ext.WindowGroup定义,包括
bringToFront,getActive,hideAll,sendToBack来对窗口经行操纵.
3.对话框,Ext.Msg,可以自定义对话框.
布局
1.布局就是容器组件中子元素的分布排列组合方式.Ext的所有容器组
件都支持布局操作,每一个容器都对应一个布局,布局负责管理容器组
件中子元素的排列组合以及渲染方式等.基类为
Ext.layout.ContainerLayout,其它布局都是继承类,Extjs中的容器组
件包含一个layout以及layoutConfig配置属性,这两个属性指定容器使
用的布局以及布局的详细配置信息,如果没有指定容器组件的layout,
则默认使用ContainerLayout作为布局,该布局只是把元素简单放到容
器中.
Ext的一些容器都已经指定了所使用的布局,比如tabPanel使用的card
布局,FormPanel使用的form布局,GridPanel使用的column布局,我们在
使用这些容器的时候不能再指定另外的布局了.
2.Border布局
由Ext.layout.BorderLayout定义,名称为border,该布局把容器分成东
南西北中五个区域,分别由east,south,west,north,center来标识,往
容器中添加子元素的时候需要指定所在的位置.
3.column列布局
由Ext.layout.ColumnLayout类来定义,名称为column,该布局把整个容
器的组件看成是一列,然后往里面放入子元素的时候,可以通过在子元
素中指定使用的columnWidth或者width来指定子元素所占的列宽度,一
个使用的百分比,另外一个使用具体的数字.使用的时候可以混合使用.
4.fit布局
由Ext.layout.fitLayout类来定义,名称为fit,这是包含单个项布局的
基类,这种布局会在容器中自动铺开以填充整个容器,及时容器中指定
了多个面板,也只会渲染第一个面板.
5.Form布局
由类Ext.layout.FormLayout类来定义,名称为form,是一种专门用来管
理表单中输入字段的布局.
6.Accordion布局
由Ext.layout.Accordion类来定义,名称为accordion,表示可折叠的布
局,也就是说使用该布局的容器组件中的子元素是可折叠的形式.
7.Table布局
由类Ext.layout.TableLayout定义,名称为table,该布局负责把容器中的子元素按照类似于html标签布局.
下面附上代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>布局</title>
<link rel="Stylesheet" href="Ext/resources/css/ext-all.css"/>
<script type="text/javascript" src="Ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="Ext/ext-all.js"></script>
</head>
<script type="text/javascript">
function fn(){
var panel=new Ext.Panel({
renderTo:"lifc",
title:"lifc",
width:600,
height:500,
layout:"column",
items:[
{title:"面板一",width:300,height:400,html:"<h1>你好</h1>"},
{title:"面板一",columnWidth:0.5,html:"<h1>你好</h1>"},
{title:"面板一",columnWidth:0.5,html:"<h1>你好</h1>"}]
});
}
function fit(){
var panel=new Ext.Panel({
renderTo:"lifc",
height:700,
width:600,
title:"fit 面板",
layout:"fit",
items:[{title:"第一个子元素",height:600,html:"<h1>这是第一个子元素</h1>"},
{title:"第二个子元素",height:100,html:"<h1>这是第二个子元素</h1>"}]
});
}
function form(){
new Ext.Panel({
renderTo:"lifc",
title:"登录",
layout:"form",
height:400,
width:300,
hideLabels:false,
labelAlign:"center",
defaultType:"textfield",
items:[
{fieldLabel:"请输入姓名",name:"name"},
{fieldLabel:"请输入年龄",name:"age"},
{fieldLabel:"请输入性别",name:"sex"},
]
}); }
function accrodion(){
new Ext.Panel({
renderTo:"lifc",
title:"层叠面板",
layout:"accordion",
layoutConfig:{animate:true},
height:900,
width:600,
items:[
{title:"子元素一",html:"我爱你"},
{title:"子元素二",html:"我爱你"},
{title:"子元素三",html:"我爱你"}
]
});
}
function table(){
new Ext.Panel({
title:"table布局",
applyTo:"lifc",
height:500,
width:400,
layout:"table",
layoutConfig:{columns:3},
items:[{title:"我是一",html:"你好",rowspan:2,height:150},{title:"我是二",html:"你好",colspan:2,height:50},{title:"我是三",html:"你好",height:100},{title:"我是四",html:"你好",height:100}]
});
}
Ext.onReady(table);
</script>
<body>
<div id="lifc"></div>
</body>
</html>
分享到：
相关推荐
在本篇内容中，我们将深入探讨如何利用Extjs这一强大的JavaScript框架来实现模态对话框。 Extjs是一个全面的前端UI库，它提供了丰富的组件和布局模式，适用于构建复杂的企业级应用。模态对话框在Extjs中被称作`Ext....
这个项目不仅提供了源代码，还提供了一个在线演示网址，便于用户了解和测试系统的功能。通过访问演示网址（http://wslcn.101.80000web.net.cn/disk/），我们可以直观地看到这个网络硬盘系统是如何工作的。 ExtJs是...
总的来说，"ExtJS2Samples-v2.0.0.zip"是一个综合性的学习资源，它将C语言的深度和ExtJS的广度结合在一起，对于想要提升技能的开发者来说是一份宝贵的财富。通过深入学习和实践，开发者不仅可以掌握C语言的基础，还...
用的extjs是3.4版，在新的extjs4.2环境下不能运行，费了好大劲，终于搞定。期间到laz英文论坛提问，可能跟我英文差有关吧，一个回答的都没有。搞定后，版主又要我进行了“ open a new issue in the bugtracker and ...
前台采用ExtJs 2.2.1编写(由于库文件比较大，考虑到大家本机都有了,所以在此没有上传,大家直接改一下路径即可),后台采用asp+access编写(看文件名就知道了). 本例子演示的4级联动菜单:州+国家+城市+地区
20. extJs 2.0学习笔记(Ext.Panel篇一) 48 21. extJs 2.0学习笔记(Ext.Panel篇二) 50 22. extJs 2.0学习笔记(Ext.Panel篇三) 59 23. extJs 2.0学习笔记(Ext.Panel篇四) 62 24. extJs 2.0学习笔记(组件总论篇) 66 25....
ExtJS学习笔记.docExtJS学习笔记.docExtJS学习笔记.docExtJS学习笔记.doc
ExtJS资料笔记(extjs各个属性的详解) ExtJS资料笔记(extjs各个属性的详解) ExtJS资料笔记(extjs各个属性的详解)
这篇“ExtJS笔记——Grid实现后台分页”探讨了如何在ExtJS的Grid组件中实现高效的后台分页功能。 后台分页是一种常见的数据处理策略，特别是在大数据量的情况下，它将数据分批加载，避免一次性加载所有记录导致的...
ExtJS4学习笔记(一)---window的创建 ExtJS4学习笔记(二)---HBox的使用 ExtJS4学习笔记(三)---VBox的使 ExtJS4学习笔记(四)---Grid的使用 ExtJS4学习笔记(五)---Grid分页 ExtJS4学习笔记(六)---多表头Grid ...
本话题主要关注如何在EXTJS3的Window组件中实现一个功能：当用户在窗口内修改了数据后，关闭窗口时提示用户是否保存更改。未进行修改的情况下，窗口可以直接关闭，不显示任何提示。 首先，我们需要创建一个基本的...
本资源包含ExtJs的API文档、笔记以及示例，帮助开发者深入理解和使用ExtJs。 首先，API文档是ExtJs开发的基础，其中包括ExtJs3.2和3.1-3.3的中文版本。这些CHM文件提供了详细的类、方法和事件的参考，有助于开发者...
### Extjs 5 学习笔记之 SenchaCmd 深入解析 #### 一、SenchaCmd 的简介 SenchaCmd 是一个跨平台的命令行工具，它为基于 ExtJS 和 Sencha Touch 应用程序的开发周期提供了全面的支持。从创建应用程序的基础结构到...
EXTJS in Action 是一本专为学习EXTJS编写的书籍，但这里我们主要关注学习笔记中的关键知识点。 首先，EXTJS的目录结构非常重要，因为它包含了所有必要的资源和源码： 1. `adapter`：这部分包含了适配器，用于将...
在探讨《ExtJS学习心得笔记》这一主题时，我们不仅会深入理解ExtJS框架的核心概念与实践技巧，还会从新手的角度出发，提炼出一系列有助于快速上手的学习策略，避免常见的学习陷阱，确保学习过程高效而有成效。...
ExtJS4学习笔记(一)---window的创建 ExtJS4学习笔记(七)---带搜索的Grid（SearchGrid） ExtJS4学习笔记(三)---VBox的使用 ExtJS4学习笔记(九)---ExtJS4 EditGrid(可编辑的Grid) ExtJS4学习笔记(二)---HBox的使用 ...
在EXTJS中实现Window的最小化和还原功能是一项常见的需求，这有助于提升用户体验，让用户能够更方便地管理和组织窗口。 在EXTJS中，Window组件并不直接支持最小化功能，但可以通过自定义事件监听和处理来实现这一...
开发笔记展示了EXTJS4的一个典型布局模式，包括头部、菜单、内容区和底部，这种布局提供了良好的用户体验和功能组织。开发者需要熟悉EXTJS4中的各种布局（如fit, border, anchor等）以及如何通过region属性来指定...