`
bdql
  • 浏览: 49958 次
  • 性别: Icon_minigender_1
  • 来自: 武汉
社区版块
存档分类
最新评论

ExtJs总结(二)

阅读更多

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的基本结构 EXTJS Grid由多个部分组成,包括Store(数据存储)、Columns(列配置)...

    extjs 总结,可以方便大家开发

    二、环境搭建 开始使用ExtJS前,需要从官方网站下载库文件。基本的引用文件包括: 1. `extjs/resources/css/ext-all.css`:样式表,定义了ExtJS组件的样式。 2. `extjs/adapter/ext/ext-base.js`:适配器,使ExtJS...

    Extjs学习—总结的extjs的一些常用小知识点

    ### Extjs 学习——总结的一些常用知识点 #### 一、概述 Extjs 是一个用于构建 Web 应用程序的强大框架,它提供了大量的 UI 组件和功能,可以帮助开发者快速搭建出高质量的应用界面。本文将根据一个月的学习经验,...

    extJs 2.1学习笔记

    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总结) ...

    EXTJS总结.txt

    二、CSS元素 4.addClass Ext.fly('elId').addClass('myCls'); // 加入元素的'myCls'的样式 5.radioClass Ext.fly('elId').radioClass('myCls');//添加一个或多个className到这个元素,并移除其所有侧边...

    myeclipse中使用extjs缓慢 卡死 白屏 解决方法总结

    ### MyEclipse中使用ExtJS出现缓慢、卡死、白屏问题及解决方法总结 在进行Web开发时,经常会遇到一些工具与框架不兼容或配置不当导致的问题,这些问题往往会影响到开发效率。本文将针对在MyEclipse环境中使用ExtJS...

    (Java+JSP)可二次开发Extjs4.0通用后台管理系统源码完整大型项目.zip

    总结起来,这个项目是一个综合运用Java、JSP和Extjs4.0技术的后台管理系统,具备完整的源码和二次开发能力,为企业提供了高效、易用的管理工具。对于开发者来说,这是一个学习和实践企业级应用开发的良好案例。

    extjs资料打包

    虽然这个文件名暗示它可能与Java编程语言相关,但考虑到其在EXTJS资料包中,我们可以推测这可能是作者或分享者通过Java开发者视角来探讨EXTJS的使用,或者是如何将EXTJS与Java后端技术结合的经验总结。在阅读这份...

    extjs4中文视频下载地址

    #### 二、ExtJS 4.0 新特性 - **模块化架构**:ExtJS 4.0 引入了模块化架构,使得开发者可以按需加载特定的功能模块,提高了应用程序的性能。 - **主题引擎**:新增的主题引擎支持动态更换界面风格,使得应用的外观...

    Extjs的loading效果

    总结,利用ExtJS和CSS,我们可以轻松地创建出吸引人的加载效果,提供良好的用户体验。无论是全局的加载遮罩还是组件级别的加载提示,都能有效地增强用户对系统状态的理解,使应用程序更加专业和用户友好。在实际项目...

    ExtJs官方网站中文的入门指南 javascript

    #### 二、快速上手 本节将通过一个简单的例子演示如何使用ExtJs创建动态页面。 ##### **2.1 解压安装** - 将下载好的压缩包解压至合适的目录(例如`C:\code\Ext\v1.0`)。 - 在此目录下创建一个名为`tutorial`的...

    extjs4环境搭建

    总结起来,搭建ExtJS4开发环境主要包括以下几个步骤: 1. 下载并解压ExtJS4的版本。 2. 选择需要的资源文件导入Eclipse项目。 3. 在HTML页面中引入ExtJS的样式和脚本文件。 4. 使用`Ext.onReady`初始化组件库并编写...

    learning extjs 经典教材

    #### 二、图书基本信息 - **书名**:《Learning ExtJS》 - **作者**:Shea Frederick、Colin Ramsay、Steve 'Cutter' Blades - **出版社**:Packt Publishing - **出版时间**:2008年11月 - **ISBN**:978-1-847195...

    extjs grid数据导出excel文件

    总结来说,EXTJS Grid的数据导出到Excel是通过获取Grid数据、转换数据格式、利用SheetJS创建Excel文件,并最终提供下载链接来实现的。这一过程涉及到了EXTJS的Store操作、SheetJS的API使用以及前端文件操作等技术。...

    ExtJs教程_完整版

    #### 二、安装与配置 **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 对于初次接触EXTJS 5.1或长时间未使用的开发者来说,可能会遇到一些访问上的问题。例如,尝试直接打开examples文件夹中的HTML文件时,只能看到简短的描述文本而无法查看...

    extjs网页控件开发

    ExtJS是一种基于JavaScript的...总结起来,"extjs网页控件开发"涵盖了ExtJS的核心技术,包括图表的创建和多级联动下拉列表框的实现。通过深入学习和实践,不仅可以提高开发效率,还能打造出具有专业水准的Web应用程序。

    ExtJs代码自动生成

    总结,ExtJS代码自动生成是提高开发效率的重要手段,它涉及对数据库字段的理解、组件类型的选取以及代码生成规则的制定。通过合理利用自动化工具和遵循一定的规范,可以使ExtJS应用的开发更加高效和一致。

    Extjs4 权威指南(中)

    ### Extjs4 权威指南知识点总结 #### 一、Extjs4简介与获取途径 - **概述**:Extjs4是一款基于JavaScript的企业级富客户端Web应用程序开发框架,旨在简化前端开发过程,提供丰富的UI组件和强大的数据处理能力。 - ...

    extjs通用后台管理界面

    总结来说,这个"extjs通用后台管理界面"是一个使用ExtJS框架精心设计的后台管理界面模板,具备良好的用户体验和实用性。开发者可以通过下载和研究"Ext_Demo"压缩包,学习ExtJS的使用技巧,快速构建自己的后台管理...

Global site tag (gtag.js) - Google Analytics