首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    ExtJs学习笔记(11)_Absolute布局和Accordion布局

    ExtJs其实在某种程度上可以代替div+css来进行页面布局(不过经测试,在最新的Firefox3下,部分功能好象有点问题),今天我们来学习二种最基本的布局 1.Absolute 布局:这种最容易理解...,直接用x,y值来绝对定位组件 2.Accordion布局:Accordion意为"手风琴",即最终效果可以象手风琴那样拉来拉去,说白了,就是类似QQ面板的功能 下面通过示例代码观察一下效果: Extjs_Intellisense.js"> Layout_Border示例         #...head>     Ext.onReady(function() { //layout:absolute(绝对定位布局...                })             ]         })         win.show(); //layout:Accordion(类似QQ面板的布局

    1K60

    自己动手写UI库——引入ExtJs(布局)

    第一:来看一下最终的效果 第二:来看一下使用方法: 第三: Component类代码如下所示: public class Component     {                   public...里的一个基类,Ext里所有的界面元素都继承自这个基类 第二: Id,Width,Region,Height都是这个基类的属性,在ExtJs中Component类也包含这些属性,当然还有很多其他的属性,这里我们就没有一一例举了...第三: 设置Width,Region,Height这三个属性的时候我们都让浏览器执行了一段脚本,这段脚本让ExtJs设置控件的相应属性 Panel类的代码 第一: 我们再这个控件类的构造函数里执行了...JS代码,并通过JS代码创建了这个控件 第二: 创建完控件之后,就马上获取了这个控件的ID,这个ID是EXTJS自动生成的ID,与页面上的其他控件是不会重复的 第三: 控件在界面上的ID获取到之后,我们就赋给这个控件的基类的属性...第五: Viewport类的代码 第一: 这个类的代码的执行逻辑和panel代码类的逻辑相似 第二: 这个类和Panel类都继承自Container类 Container类的代码 第一: 与Extjs

    1K50

    CSS布局(三) 布局模型

    布局模型 在网页中,元素有三种布局模型: 1、流动模型(Flow) 默认的 2、浮动模型 (Float) 3、层模型(Layer) 1、流动模型(Flow) 流动(Flow)模型是默认的网页布局模式。...流动布局模型具有2个比较典型的特征: 第一点,块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布,因为在默认状态下,块状元素的宽度都为100%。实际上,块状元素都会以行的形式占据位置。...3、层模型(Layer) 层模型有三种形式: 1、相对定位(position: relative)  2、绝对定位(position: absolute) 3、固定定位(position: fixed)...绝对定位使元素脱离文档流,因此不占据空间 ,普通文档流中元素的布局就当绝对定位的元素不存在时一样,仍然在文档流中的其他元素将忽略该元素并填补他原先的空间。...为了表示三维立体的概念如显示元素的上下层的叠加顺序引入了z-index属性来表示z轴的区别。表示一个元素在叠加顺序上的上下立体关系。 z-index值较大的元素将叠加在z-index值较小的元素之上。

    2.3K71

    Ext布局

    ExtJS常用的布局都在Ext.layout下,这里几乎涵盖了所有的布局方式(但是值得注意的是通常我们不是直接通过new来创建这些类的对象然后往里面添加控件使用,而是作为控件一个配置属性使用让Ext自动创建对应的类...虽然这个布局还略显粗糙,但也可以自动检测浏览器的大小变化和自动适应布局中每个部分的大小。 为了实现良好的页面布局,ExtJS提供了多种各式各样的布局,下面就将学习各种常见布局。...1.6 分列式布局—ColumnLayout 使用ColumnLayout可以对页面进行分列式布局。先看一个简单的示例,代码如示例4.10所示。...BorderLayout,然后对各个子组件再使用不同的布局方式 ​本章总结​ Ø ExtJS提供了多种布局方式实现页面布局,ExtJS常用的布局都在Ext.layout下,常见的布局有: n 最简单布局...—FitLayout n 常用布局—BorderLayout n 伸缩菜单布局—Accordion n 控制大小的布局—AnchorLayout n 分列式布局—ColumnLayout n 表格布局—

    9010

    实现三栏布局

    实现三栏布局 三栏布局在开发十分常见,即两边固定宽度,中间自适应宽度的布局。...Flex 使用CSS3的flex布局实现三栏布局,Flex布局也称弹性布局,可以为盒状模型提供最大的灵活性,是布局的首选方案,现已得到所有现代浏览器的支持,此处主要是利用flex容器成员默认按照主轴排列...right Calc 通过CSS的calc可以动态计算中间部分的长度从而做到自适应,calc可以配合inline-block行内块级元素实现三栏布局...,也是浮动元素与其他元素交互的区域,是用于布局块级盒子的一块渲染区域,并且与这个区域的外部毫无关系,是一个独立的区域,是一个环境,在这里利用BFC区域不会与浮动元素重叠的特性实现三栏布局。...,实现三栏布局。

    44020

    三、Flex布局简介

    一、Flex布局简介 布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性 什么是flex布局?...1) Flex是Flexible Box的缩写,意为”弹性布局”,用来为盒状模型提供最大的灵活性。 2) 任何一个容器都可以指定为Flex布局。...justify-content 定义了项目在主轴上的对齐方式 align-items 定义项目在交叉轴上如何对齐 align-content 属性定义了多根轴线的对齐方式 注意,设为Flex布局以后...学习地址: Flex 布局语法教程 | 菜鸟教程 二、视图层 View 框架的视图层由 WXML 与 WXSS 编写,由组件来进行展示。...-- 调用 wxs 里面的 getMax 函数,参数为 page.js 里面的 array --> {{m1.getMax(array)}} 页面输出: 5 三、会议OA

    26730

    三. CSS layout(布局)

    要设置边框,需要至少设置三个样式: 边框的宽度 border-width 边框的颜色 border-color 边框的样式 border-style <!.../* 边框(border),边框属于盒子边缘,边框里边属于盒子内部,出了边框都是盒子的外部,边框的大小会影响到整个盒子的大小 要设置边框,需要至少设置三个样式...可以用来指定四个方向的边框的宽度 值的情况 四个值:上 右 下 左 三个值...行内元素可以设置border,垂直方向的border不会影响页面的布局 行内元素可以设置margin,垂直方向的margin不会影响布局 display 用来设置元素显示的类型 可选值: inline...0px 50px rgba(0, 0, 0, .3) ; 第一个值 水平偏移量 设置阴影的水平位置 正值向右移动 负值向左移动 第二个值 垂直偏移量 设置阴影的垂直 位置 正值向下移动 负值向上移动 第三个值

    2.2K40
    领券