谈谈Ext JS的组件——布局的用法续二

简介:

绝对布局(Ext.layout.container.Absolute)

绝对布局让我回忆到了使用Foxpro开发的时候,哪时候的界面布局就是这样。通过设置控件的左上角坐标(x。y)和宽度来进行的,由于输入控件的高度基本是固定的。所以不须要设置。在可视化编程没有出现之前,开发界面算是个苦差事,由于布局是须要花费不少功夫的。比如想要在已经定义好的组件中插入一个组件,那就得又一次改动插入位置下面的组件的坐标。这工作是比較枯燥无聊的。因而,在不是必需的情况下,还是少选择这样的布局模式。

绝对布局是使用CSS的绝对定位(absolute)实现的,因而在使用的时候须要定义子组件的左上角坐标、宽度和高度。

在CSS中。绝对定义是使用left和top来定义左上角坐标的,而在Ext JS中,则转换为习惯的x、y来取代。宽度和高度能够分别使用width和height来定义,也能够是anchor来定义。

使用anchor的优点是子组件会依据容器的尺寸变化来调整子组件的尺寸。从而保证不会在容器变小的时候,仅仅能显示部分子组件,而在容器大了的时候,显示一片的空白区域。

使用anchor来定义宽度和高度也有三种方式。一种是使用百分比来定义,如“90% 95%”,这里表示的是子组件的宽度是容器宽度的90%。高度为容器高度的95%,一种是使用偏移量,如“-20 -5”,这里表示的是子组件的右边界将廉价容器的右边界-20像素,也就是两个边界相距20个像素,而-5则表示子组件的底部边界与容器的边界相距5个像素。

假设你使用正值。那子组件的显示就会超出容器。一般绝少这样设置。最后一种方式就是混合以上两种方式的方式。也就是宽度用百分比。高度使用偏移量,或宽度使用偏移量,而高度使用百分比。假设子组件的高度是固定的。以上三种方式也可仅仅设置一个值。也就是仅仅设置子组件的宽度。

锚布局(Ext.layout.container.Anchor)

锚布局是表单面板的默认模板,因而是一种常有的布局,它的优点就是子组件可依据容器尺寸的变化而调整。在表单面板中使用anchor布局。就可避免在表单面板变小后,输入组件的长度会超出表单面板的訪问,而变大的时候则不会留下一片空白。

要使用锚布局。除了要在容器中将layout定义为“anchor”,还须要在子组件中使用anchor配置项来定义子组件的高度和宽度。配置项anchor的用法与绝对布局中的anchor配置项的用法是一样的,这里就不再赘述了。

列布局(Ext.layout.container.Column)

在Ext JS 2没有水平盒子布局的时候,仅仅能使用列布局进行列的划分,自从有了水平盒子布局。就非常少使用列布局了。只是,咸鱼白菜各有喜好,能实现所需效果才是终于目的。

要使用列布局,除了要在容器中将layout定义为“column”,还须要在子组件中定义宽度。

宽度的定义方式有两种。一是直接使用width来定义,这样的方式不要的地方是宽度固定,不能随容器的变化而进行调整。第二张方式是使用columnWidth,通过设置百分比(值用小数来表示)来设置列宽,这样的方式的优点就是列宽可随容器大小的变化调整列宽。

手风琴布局(Ext.layout.container.Accordion)

手风琴也是一种常有的布局。它派生于垂直盒子布局,在原理上事实上也差点儿相同。把容器垂直划分为几个区域,仅仅有一个区域是展开来显示标题和内容的,其它区域都是折叠仅仅显示标题的。

当然,手风琴布局也能够同一时候显示多个展开区域。这个要在layout的配置对象中将multi配置项设置为true。

由于手风琴布局须要显示标题,而它自己不会去创建一个这样的标题,仅仅使用容器类的标题,因而。在使用手风琴布局的时候。子组件必须选择是带有标题且能折叠的容器类,如面板、表单面板、树面板等。

使用手风琴布局,仅仅须要在容器中将layout定义为“accordion”即可了。假设喜欢活动面板始终位于容器定义。可在layout的配置对象中设置activeOnTop为true。默认情况下。面板的折叠仅仅能通过单击面板折叠button来实现,假设希望单击标题栏就实现折叠,可在layout的配置对象中设置titleCollapse为true。

假设希望切换时显示动画。可设置animate为true。假设希望隐藏面板标题中的折叠button。可设置hideCollapseTool为true。这时候。titleCollapse会被自己主动设置未true。

表单布局(Ext.layout.container.Form)

表单布局与锚布局有点相似,都同意子组件随容器尺寸的变化而调整子组件的大小,只是这仅仅限于输入字段,因而一般仅仅用于仅仅有输入字段的容器。它与锚布局的不同之处在于不须要在子组件定义anchor配置项。

对于输入字段来说,表单布局与锚布局的实现方式是一样的。他们都是通过样式来实现效果的。在输入字段的封装DIV中,使用了样式“display: table;”,也就是说该DIV的行为与HTML表格的行为是一样的。而对于输入字段的标签和输入框,使用的样式是“display: table-cell;”,也就相当于把输入字段的封装DIV划分成了表格的两列。当中一列显示标签,还有一列显示输入框。由于表格会自己主动尾随父容器的尺寸变化而调整自身的尺寸,这也就实现了子组件尾随容器尺寸的变化而自己主动做对应的调整。表单布局与锚布局的不同在于表单布局不会去计算输入字段的封装DIV的宽度,直接设置未100%,而锚布局会依据设置去计算封装DIV的宽度和高度。而这也是锚布局内可使用不论什么子组件。而表单布局内仅仅能使用输入字段的一个原因,由于锚布局可依据设置去计算子组件的宽度和高度。而表单布局则不会。

假设在表单布局内使用非输入字段类的组件,由于没有计算过程。就等于使用了自己主动布局,子组件的尺寸默认是多少就是多少了。不会去做调整。而输入字段自身的表格特性不须要这样的计算就能正确。

使用表单布局,仅仅须要在容器中将layout定义为“form”即可了。使用labelWidth可设置输入字段的标签的宽度。

表格布局(Ext.layout.container.Table)

表格布局是使用TABLE元素实现的布局,因而,普通情况。其它布局能实现的效果。就不要建议使用该布局。

使用表格布局,除了要将布局类型定义为table,还须要使用columns来定义表格的列数。要定义表格的属性,可使用tableAttrs配置项。要定义行的属性。可使用trAttrs配置项;要定义单元格的属性,可使用tdAttrs配置项。

假设没有特别说明。容器会依子组件的定义次序将子组件写入表格第一个中。如定义了2列,3个子组件,则第一个子组件会渲染在表格的第一行第一列,而第二子组件会渲染在第一行第二列,第三个子组件会渲染在第二行第一列。

假设要实现跨列,则可在子组件中使用colspan配置项来声明跨几列,要跨行。则使用rowspan配置项。要定义单元格的id,可使用cellId配置项。要定义单元格的样式,可使用cellCls配置项。

小结

在使用Ext JS的时候,显示错误多半是使用了错误的布局造成的,因而,能熟练的使用布局是相当重要的。而要能熟练使用布局,最好的方式就是能了解各种布局在页面中是怎样实现的,并了解这些实现的特性。从而对布局了然于胸,这样,就不怕用错布局了。

在下文。将介绍面板。





本文转自mfrbuaa博客园博客,原文链接:http://www.cnblogs.com/mfrbuaa/p/5139623.html,如需转载请自行联系原作者

相关文章
|
数据采集 Web App开发 JavaScript
Puppeteer的高级用法:如何在Node.js中实现复杂的Web Scraping
随着互联网的发展,网页数据抓取已成为数据分析和市场调研的关键手段。Puppeteer是一款由Google开发的无头浏览器工具,可在Node.js环境中模拟用户行为,高效抓取网页数据。本文将介绍如何利用Puppeteer的高级功能,通过设置代理IP、User-Agent和Cookies等技术,实现复杂的Web Scraping任务,并提供示例代码,展示如何使用亿牛云的爬虫代理来提高爬虫的成功率。通过合理配置这些参数,开发者可以有效规避目标网站的反爬机制,提升数据抓取效率。
904 4
Puppeteer的高级用法:如何在Node.js中实现复杂的Web Scraping
|
JavaScript 前端开发 开发者
哇塞!Vue.js 与 Web Components 携手,掀起前端组件复用风暴,震撼你的开发世界!
【8月更文挑战第30天】这段内容介绍了Vue.js和Web Components在前端开发中的优势及二者结合的可能性。Vue.js提供高效简洁的组件化开发,单个组件包含模板、脚本和样式,方便构建复杂用户界面。Web Components作为新兴技术标准,利用自定义元素、Shadow DOM等技术创建封装性强的自定义HTML元素,实现跨框架复用。结合二者,不仅增强了Web Components的逻辑和交互功能,还实现了Vue.js组件在不同框架中的复用,提高了开发效率和可维护性。未来前端开发中,这种结合将大有可为。
408 0
|
7月前
|
JavaScript 前端开发 Java
详解js柯里化原理及用法,探究柯里化在Redux Selector 的场景模拟、构建复杂的数据流管道、优化深度嵌套函数中的精妙应用
柯里化是一种强大的函数式编程技术,它通过将函数分解为单参数形式,实现了灵活性与可复用性的统一。无论是参数复用、延迟执行,还是函数组合,柯里化都为现代编程提供了极大的便利。 从 Redux 的选择器优化到复杂的数据流处理,再到深度嵌套的函数优化,柯里化在实际开发中展现出了非凡的价值。如果你希望编写更简洁、更优雅的代码,柯里化无疑是一个值得深入学习和实践的工具。从简单的实现到复杂的应用,希望这篇博客能为你揭开柯里化的奥秘,助力你的开发之旅! 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一
|
12月前
|
JavaScript 前端开发
JS try catch用法:异常处理
【10月更文挑战第12天】try/catch` 是 JavaScript 中非常重要的一个特性,它可以帮助我们更好地处理程序中的异常情况,提高程序的可靠性和稳定性。
507 56
|
10月前
Next.js 实战 (二):搭建 Layouts 基础排版布局
本文介绍了作者在Next.js v15.x版本发布后,对一个旧项目的重构过程。文章详细说明了项目开发规范配置、UI组件库选择(最终选择了Ant-Design)、以及使用Ant Design的Layout组件实现中后台布局的方法。文末展示了布局的初步效果,并提供了GitHub仓库链接供读者参考学习。
311 1
Next.js 实战 (二):搭建 Layouts 基础排版布局
|
11月前
|
JavaScript 前端开发
js中的bind,call,apply方法的区别以及用法
JavaScript中,`bind`、`call`和`apply`均可改变函数的`this`指向并传递参数。其中,`bind`返回一个新函数,不立即执行;`call`和`apply`则立即执行,且`apply`的参数以数组形式传递。三者在改变`this`指向及传参上功能相似,但在执行时机和参数传递方式上有所区别。
171 1
|
11月前
|
JavaScript 前端开发
JS中的构造函数的含义和用法
构造函数是JavaScript中用于创建新对象的特殊函数,通常首字母大写。通过`new`关键字调用构造函数,可以初始化具有相同属性和方法的对象实例,从而实现代码复用。例如,定义一个`Person`构造函数,可以通过传入不同的参数创建多个`Person`对象,每个对象都有自己的属性值。此外,构造函数还可以包含方法,使每个实例都能执行特定的操作。构造函数的静态属性仅能通过构造函数本身访问。ES6引入了`class`语法糖,简化了类的定义和实例化过程。
177 1
|
数据采集 存储 JavaScript
Puppeteer的高级用法:如何在Node.js中实现复杂的Web Scraping
在现代Web开发中,数据采集尤为重要,尤其在财经领域。本文以“东财股吧”为例,介绍如何使用Puppeteer结合代理IP技术进行高效的数据抓取。Puppeteer是一个强大的Node.js库,支持无头浏览器操作,适用于复杂的数据采集任务。通过设置代理IP、User-Agent及Cookies,可显著提升抓取成功率与效率,并以示例代码展示具体实现过程,为数据分析提供有力支持。
482 2
Puppeteer的高级用法:如何在Node.js中实现复杂的Web Scraping
|
12月前
|
JavaScript 前端开发
js的math.max的用法
js的math.max的用法
349 6
|
12月前
|
JavaScript
JS中的splice的三种用法(删除,替换,插入)
JS中的splice的三种用法(删除,替换,插入)
965 4

热门文章

最新文章