ext-js中的容器和布局(介绍)

本文涉及的产品
容器镜像服务 ACR,镜像仓库100个 不限时长
简介:

 什么是容器(Container)

Extjs被称为是最强大的前端组件库,组件,也就是Component,是可以复用的代码块,并且直接可以和浏览器配合形成最终外观。而容器,是一种特殊的组件,说白了就是用来包含其他组件的组件。而我们的extjs的应用是由若干的组件,以及组件的排列组合嵌套共同组成。

什么是容器布局(Layout):

因为容器是用包含其他组件的,所以容器肯定有一种机制来管理在其中的各个组件,包括它内部的各个组件的尺寸和位置,这时候,布局(Layout)就闪亮登场了

布局生效时间:

一旦设定好了值之后,当初始化组件时,extjs会自动调用容器的doLayout方法,这个方法的作用是计算出所有子组件的尺寸和位置,并且更新到DOM树。doLayout是一种递归调用机制,所以会层层计算直到最底部,一般开发时候程序员不用主动去调用,extjs框架会自动调用。

当我们对于组件进行了任何添加删除或者容器被resize的时候,会触发容器的redoLayout,从而重新计算各个组件的尺寸和位置。我们可以用suspendLayout方法+手动调用doLayout来阻止容器自动布局,而是我们自己来负责布局。

什么是组件布局:

如果是extjs自带的预定义组件,那么我们无需去担心布局问题,因为框架设计者已经为我们做好了一切,但是如果是自己定义的组件,那么我们需要给一个布局方式参数,用componentLayout,否则,它会自动的使用默认的auto的方式进行布局。

 





本文转自 charles_wang888 51CTO博客,原文链接:http://blog.51cto.com/supercharles888/1192044,如需转载请自行联系原作者
目录
相关文章
|
1天前
|
设计模式 数据安全/隐私保护
Next.js 实战 (七):浅谈 Layout 布局的嵌套设计模式
这篇文章介绍了在Next.js框架下,如何处理中后台管理系统中特殊页面(如登录页)不包裹根布局(RootLayout)的问题。作者指出Next.js的设计理念是通过布局的嵌套来创建复杂的页面结构,这虽然保持了代码的整洁和可维护性,但对于特殊页面来说,却造成了不必要的布局包裹。文章提出了一个解决方案,即通过判断页面的skipGlobalLayout属性来决定是否包含RootLayout,从而实现特殊页面不包裹根布局的目标。
43 33
|
1月前
Next.js 实战 (二):搭建 Layouts 基础排版布局
本文介绍了作者在Next.js v15.x版本发布后,对一个旧项目的重构过程。文章详细说明了项目开发规范配置、UI组件库选择(最终选择了Ant-Design)、以及使用Ant Design的Layout组件实现中后台布局的方法。文末展示了布局的初步效果,并提供了GitHub仓库链接供读者参考学习。
Next.js 实战 (二):搭建 Layouts 基础排版布局
|
7月前
|
Web App开发 前端开发 JavaScript
技术心得记录:瀑布流的布局原理分析(纯CSS瀑布流与JS瀑布流)
技术心得记录:瀑布流的布局原理分析(纯CSS瀑布流与JS瀑布流)
71 0
|
3月前
|
JavaScript 前端开发 容器
js之弹性布局使用方法
js之弹性布局使用方法
40 0
|
4月前
|
JavaScript 前端开发
网页前端课程设计-【模仿】香港中文大学官网,轮播图及div+css布局,js的dom操作
这篇文章介绍了如何模仿香港中文大学官网进行网页前端课程设计,包括使用div+css布局、js的DOM操作以及实现轮播图等技术细节。
|
5月前
|
容器 iOS开发 Linux
震惊!Uno Platform 响应式 UI 构建秘籍大公开!从布局容器到自适应设计,带你轻松打造跨平台完美界面
【8月更文挑战第31天】Uno Platform 是一款强大的跨平台应用开发框架,支持 Web、桌面(Windows、macOS、Linux)及移动(iOS、Android)等平台,仅需单一代码库。本文分享了四个构建响应式用户界面的最佳实践:利用布局容器(如 Grid)适配不同屏幕尺寸;采用自适应布局调整 UI;使用媒体查询定制样式;遵循响应式设计原则确保 UI 元素自适应调整。通过这些方法,开发者可以为用户提供一致且优秀的多设备体验。
209 0
|
5月前
|
JavaScript 前端开发 容器
js之弹性布局使用方法
js之弹性布局使用方法
71 0
|
6月前
|
JavaScript 前端开发 容器
vue组件封装——固定宽高比的容器(2种方法:纯CSS实现 + JS实现)
vue组件封装——固定宽高比的容器(2种方法:纯CSS实现 + JS实现)
224 2
|
6月前
|
Java 容器
Java详解:GUI图形用户界面设计—容器组件及面板布局方式
Java详解:GUI图形用户界面设计—容器组件及面板布局方式
178 0
|
7月前
|
前端开发 程序员 UED
全面解析layui:掌握基础知识与实用技能(1. 核心组件与模块 2. 布局与容器 3. 弹出层与提示框;1. 数据表格与数据表单 2. 表单验证与提交 3. 图片轮播与导航菜单)
全面解析layui:掌握基础知识与实用技能(1. 核心组件与模块 2. 布局与容器 3. 弹出层与提示框;1. 数据表格与数据表单 2. 表单验证与提交 3. 图片轮播与导航菜单)
92 0
下一篇
开通oss服务