Ext.onready()是用于在页面完成加载后显示内容,如果希望在加载过程中显示某些内容,那么必须在
<body>
<div id="test">要显示Ext组件的块</div>
<script type="text/javascript" src="包含Ext组件的代码"></script>
</body>
Ext.Panel是一个容器组件,显示为面板。相关属性如下
:
var panel = new Ext.Panel({
el: 'demo', //用于指定显示的位置,作用与renderTo类似,但用这个属性必须在后面配置render()方法,而renderTo不需要
title: '测试标题', //标题
floating: true, //浮动
shadow: true, //阴影
draggable: true, //可拖动
collapsible: true, //可收缩
html: '测试内容', //面板内容
pageX: 100, //位置
pageY: 50,
width: 200, //大小
height: 150
});
fireFox的调试工具firebug,
ie的调试工具debugbar 与companio.js
安装firebug
工具-->附加组件
f12 打开调试窗口 或ctrl+f12 弹出调试窗口
开启调试功能,注意不要对所有的网站开启调试功能,这样会引起浏览器崩溃,因为有些网站采用了旧的ie特有写法,会导致firefox不停报错。
通过选择“控制台”,“脚本”,“网络”下按按钮中的站点来设定针对哪些站点开启调试功能。
布局
1.容器有哪些?
容器可以通过
layout指定布局管理器
items指定需要摆放的组件。
2.布局管理器有哪些
FitLayout可以自动根据容器大小填充,但其中items只能指定一个组件,不能指定多个,而且组件不能指定自动调整高度autoHeight:true。
BorderLayout
可以针对多个子组件进行布局,弥补了FitLayout的不足。可以针对上、下、左、右、中五个方位进行布局。其中center必须指定,其余可以省略。
上、下只能指定高度,左、右只能指定宽度,中间部分自动计算。
同样也要避免指定autoHeight:true,以免破坏了布局。
上、下、左、右可以指定split:true进行调整大小,同时指定minSize和maxSize对调整范围进行限制。
每个区域都可以通过设置title:标题,collapsible:true来实现显示内容的折叠。
AccordionLayout实现伸缩菜单的布局
设置layout:'accordion'后,要记得在items的每个元素里都要加上title参数,因为accordion是通过点击标题来伸缩显示。另外与布局相关的配置参数都写到layoutConfig:{
titleCollapse:true, 是否单击标题折叠子面板
animate:true, 展开和折叠是否使用动画效果
activeOnTop:展开和折叠时是否改变子面板顺序
}
CardLayout制作向导最合适。
CardLayout配置几个子面板,每次它只显示其中一个。
当前显示的子面板是由activeItem来控制的。
AnchorLayout
可以为items中的每个组件指定与总体布局大小的值
第一种方式使用百分比进行配置,设置一个子组件占整体长和宽的百分比。
layout:'anchor',
items:[{
...
anchor:"宽度百分比 高度百分比"
},{
...
}];
第二种方式为设置右侧与底部的边距。
layout:'anchor',
items:[{
...
anchor:"-右侧的像素值 -底部的像素值"
},{
...
}];
以上两种方式可以同时使用。
AbsoluteLayout
是AnchorLayout的扩展,具备AnchorLayout所有特性,AnchorLayout布局下的子组件都是自上而下竖直排列的,我们不能控制每个组件的位置,AbsoluteLayout正是为解决这个问题而来的。
我们通过x,y参数达到控制子组件位置的效果。
FormLayout表单专用布局管理器
它也是AnchorLayout的扩展。
Ext.form.FormPanel使用它作为默认的布局方式。它提供了一素列的参数来控制显示效果。
FormLayout提供的用于控制表单显示的参数
hideLabels:是否隐藏field的标签
itemCls:表单显示的样式
labelAlign:标签的对齐方式(左,中,右)
labelPad:标签空白的像素值
labelWidth:标签宽度
Ext.form.Field对应的参数
clearCls:消除div渲染的css样式
fieldLabel:对应field的标签内容
hideLabel:是否隐藏标签
itemCls:field的css样式
labelSeparator:标签和field之间的分隔,默认是:
labelStyle: 标签的CSS样式
ColumnLayout布局
layout:'column',
items:[{
title:'column 1',
columnWidth: .3
},{
title:'column 2',
columnWidth: .7
}]
注意columnWidth参数,它是0-1之间的一个小数,表示组件在整体中所占的百分比,它们的总和应该是1.
如果希望某列的宽度固定,则可以直接用width:像素 指定。而其余的列会进行宽度的自动配置。
Ext.Container是所有可布局组件的超类,只要是继承了Ext.Contrainer的子类就可以对自身进行布局。最常用的也是最主要的参数layout和items,它们分别用来设置使用的布局方式和包含的子组件。只要是进行布局,就必然会用到这两个参数,与这两个参数对应的还有另外两个参数,它们在需要进行特殊配置时非常有用:layoutConfig用于完成特殊配置,activeItem表示当前显示哪一个子组件,这在AccordionLayout和CardLayout等每次只能显示一个子组件的布局方式中非常有用。
重点提及的一个参数是defaultType,它用来设置子组件默认使用的xtype的值。默认情况下是defaultType:'panel'也就是items中创建的每个子组件都是Ext.Panel的实例。
可以使用Viewport对整个页面进行布局,但是每个页面只能有一个Viewport的限制。
分享到:
相关推荐
本总结例子将深入探讨EXTJS Grid的核心特性和使用方法,通过源代码分析,帮助开发者更好地理解和应用EXTJS Grid。 一、EXTJS Grid的基本结构 EXTJS Grid由多个部分组成,包括Store(数据存储)、Columns(列配置)...
二、环境搭建 开始使用ExtJS前,需要从官方网站下载库文件。基本的引用文件包括: 1. `extjs/resources/css/ext-all.css`:样式表,定义了ExtJS组件的样式。 2. `extjs/adapter/ext/ext-base.js`:适配器,使ExtJS...
### Extjs 学习——总结的一些常用知识点 #### 一、概述 Extjs 是一个用于构建 Web 应用程序的强大框架,它提供了大量的 UI 组件和功能,可以帮助开发者快速搭建出高质量的应用界面。本文将根据一个月的学习经验,...
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 2.0学习笔记(Ext.Element API总结) ...
二、CSS元素 4.addClass Ext.fly('elId').addClass('myCls'); // 加入元素的'myCls'的样式 5.radioClass Ext.fly('elId').radioClass('myCls');//添加一个或多个className到这个元素,并移除其所有侧边...
### MyEclipse中使用ExtJS出现缓慢、卡死、白屏问题及解决方法总结 在进行Web开发时,经常会遇到一些工具与框架不兼容或配置不当导致的问题,这些问题往往会影响到开发效率。本文将针对在MyEclipse环境中使用ExtJS...
总结起来,这个项目是一个综合运用Java、JSP和Extjs4.0技术的后台管理系统,具备完整的源码和二次开发能力,为企业提供了高效、易用的管理工具。对于开发者来说,这是一个学习和实践企业级应用开发的良好案例。
虽然这个文件名暗示它可能与Java编程语言相关,但考虑到其在EXTJS资料包中,我们可以推测这可能是作者或分享者通过Java开发者视角来探讨EXTJS的使用,或者是如何将EXTJS与Java后端技术结合的经验总结。在阅读这份...
#### 二、ExtJS 4.0 新特性 - **模块化架构**:ExtJS 4.0 引入了模块化架构,使得开发者可以按需加载特定的功能模块,提高了应用程序的性能。 - **主题引擎**:新增的主题引擎支持动态更换界面风格,使得应用的外观...
总结,利用ExtJS和CSS,我们可以轻松地创建出吸引人的加载效果,提供良好的用户体验。无论是全局的加载遮罩还是组件级别的加载提示,都能有效地增强用户对系统状态的理解,使应用程序更加专业和用户友好。在实际项目...
#### 二、快速上手 本节将通过一个简单的例子演示如何使用ExtJs创建动态页面。 ##### **2.1 解压安装** - 将下载好的压缩包解压至合适的目录(例如`C:\code\Ext\v1.0`)。 - 在此目录下创建一个名为`tutorial`的...
总结起来,搭建ExtJS4开发环境主要包括以下几个步骤: 1. 下载并解压ExtJS4的版本。 2. 选择需要的资源文件导入Eclipse项目。 3. 在HTML页面中引入ExtJS的样式和脚本文件。 4. 使用`Ext.onReady`初始化组件库并编写...
#### 二、图书基本信息 - **书名**:《Learning ExtJS》 - **作者**:Shea Frederick、Colin Ramsay、Steve 'Cutter' Blades - **出版社**:Packt Publishing - **出版时间**:2008年11月 - **ISBN**:978-1-847195...
总结来说,EXTJS Grid的数据导出到Excel是通过获取Grid数据、转换数据格式、利用SheetJS创建Excel文件,并最终提供下载链接来实现的。这一过程涉及到了EXTJS的Store操作、SheetJS的API使用以及前端文件操作等技术。...
#### 二、安装与配置 **2.1 获取ExtJS** - 访问ExtJS官方网站 [http://www.extjs.com/download](http://www.extjs.com/download) 下载SDK。 - SDK包含了ExtJS的所有源代码以及API文档和示例。 **2.2 安装ExtJS** ...
#### 二、如何正确访问EXTJS 5.1 Examples 对于初次接触EXTJS 5.1或长时间未使用的开发者来说,可能会遇到一些访问上的问题。例如,尝试直接打开examples文件夹中的HTML文件时,只能看到简短的描述文本而无法查看...
ExtJS是一种基于JavaScript的...总结起来,"extjs网页控件开发"涵盖了ExtJS的核心技术,包括图表的创建和多级联动下拉列表框的实现。通过深入学习和实践,不仅可以提高开发效率,还能打造出具有专业水准的Web应用程序。
总结,ExtJS代码自动生成是提高开发效率的重要手段,它涉及对数据库字段的理解、组件类型的选取以及代码生成规则的制定。通过合理利用自动化工具和遵循一定的规范,可以使ExtJS应用的开发更加高效和一致。
### Extjs4 权威指南知识点总结 #### 一、Extjs4简介与获取途径 - **概述**:Extjs4是一款基于JavaScript的企业级富客户端Web应用程序开发框架,旨在简化前端开发过程,提供丰富的UI组件和强大的数据处理能力。 - ...
总结来说,这个"extjs通用后台管理界面"是一个使用ExtJS框架精心设计的后台管理界面模板,具备良好的用户体验和实用性。开发者可以通过下载和研究"Ext_Demo"压缩包,学习ExtJS的使用技巧,快速构建自己的后台管理...