ExtJs学习笔记(12)_Anchor布局

最新推荐文章于 2021-07-06 17:00:31 发布
最新推荐文章于 2021-07-06 17:00:31 发布
阅读量639 收藏
点赞数
分类专栏： Javascript/CSS/Web Standard 文章标签： extjs stylesheet function
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yjmyzz/article/details/2875970
版权
 

Anchor布局的效果直接看代码和效果图最为直观

 

 


!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>Window LayOut</title>
    <link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css" />   
     <script type="text/javascript" src="../adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="../ext-all-debug.js"></script>
    <style type="text/css">
    .x-panel-body p {
        margin:10px;
        font-size:12px;
    }
    </style>
</head>
<body>
<script type="text/javascript">

    //Anchor Layout要点:"1.容器内的组件要么指定宽度，要么在anchor中同时指定高/宽，2.anchor值通常只能为负值(指非百分比值)，正值没有意义，3.anchor必须为字符串值"
    Ext.onReady(function() {
        var panel1 = new Ext.Panel({
            title: "panel1",
            height: 100,
            anchor: '-50',
            html: "高度等于100，宽度=容器宽度-50"
        });

        var panel2 = new Ext.Panel({
            title: "panel2",
            height: 100,
            anchor: '50%',
            html: "高度等于100,宽度=容器宽度的50%"

        });

        var panel3 = new Ext.Panel({
            title: "panel3",
            anchor: '-10, -250',
            html: "宽度=容器宽度-10,高度=容器宽度-250"

        });

        var win = new Ext.Window({
            title: "Anchor Layout",
            height: 400,
            width: 400,
            plain: true,                    
            layout: 'anchor',
            items: [panel1, panel2,panel3]            
        });

        win.show();

    });
</script>
</body>
</html>

菩提树下的杨过
关注
专栏目录
Extjs学习笔记之七 布局
01-19
1. AbsoluteLayout 可以通过Panel内部组件的决定位置来布局。通过x,y来指定。 示例用法： 代码如下: new Ext.Panel({ layout: ‘absolute’, title: ‘AbsuluteLayout’, renderTo: document.body, frame: true, ...
extjs_tapestry.rar_extjs tapestry_extjs_tapestry_tapestry
09-22
6. **样式与布局**：由于两个框架都涉及用户界面，可能需要处理 ExtJS 样式与 Tapestry 默认样式之间的冲突，以确保视觉一致性。 通过这样的集成，开发者可以获得 ExtJS 提供的精美 UI 组件和 Tapestry 强大的后端...
Extjs4----anchor布局
网站开发初中级代码参考-转载
09-10 159
anchor布局将使组件固定于父容器的某一个位置，使用anchor布局的子组件尺寸相对于容器的尺寸，即父容器容器的大小发生变化时，使用anchor布局的组件会根据规定的规则重新渲染位置和大小。 用anchor布局时，用anchor属性来配置组件在父容器中的位置 anchor属性为一组字符串，可以使用百分比或者是-数字来表示。配置字符串使用空格隔开 Ext....
Extjs Anchor布局
unixtux的专栏
08-07 181
1.百分比（Percentage）定位 图1 [code="js"] Ext.onReady(function() { var panel_1 = new Ext.Panel({ title:'panel_1', anchor:'60% 50%', html:'(anchor:宽 高)'+ '(anchor:60% 50%)'+ '宽度...
ExtJS中的Anchor
evilcry2012的专栏
01-21 597
Anchor   （Anchor布局）  编辑 本词条缺少信息栏、名片图，补充相关内容使词条更完整，还能快速升级，赶紧来编辑吧！ 简介 ExtJS中的Anchor Anchor在ExtJS中用来布局，anchor值通常只能为负值OR非百分比值，正值没有意义。 Anchor布局，提供了一种灵活的布局方式，既可以为items中的每个组件指定与总体布局大小
Extjs4布局详解(五)——anchor布局
随风的专栏
01-17 559
anchor布局将使组件固定于父容器的某一个位置，使用anchor布局的子组件尺寸相对于容器的尺寸，即父容器容器的大小发生变化时，使用anchor布局的组件会根据规定的规则重新渲染位置和大小。 AnchorLayout布局没有任何的直接配置选项（继承的除外），然而在使用AnchorLayout布局时，其子组件都有一个anchor属性，用来配置此子组件在父容器中所处的位置。 anchor属性为一
extjs_simple.rar_extjs_extjs simple_extjs_simple
09-14
ExtJS实现的用户管理界面,实现了用户的增加功能、修改功能、删除功能、查看工程。还提供了下拉列表选择框进行年龄的选择功能。
ssh_extjs.rar_extjs_extjs ssh_oracle
09-23
在描述中提到的"extjs4"指的是ExtJS的第4个主要版本，这个版本引入了许多改进和新特性，如新的布局系统、更好的性能和更多的UI组件。 **3. Oracle数据库** Oracle是全球知名的关系型数据库管理系统，广泛应用于大型...
无废话ExtJs 系列教程十四-----(一) [锚点布局：AnchorLayout ]
huiqinbo的专栏
07-03 357
1:Ext.layout.AnchorLayout    它是根据容器大小为其所包含的子面板进行定位的布局，对应面板布局(layout)配置项的名称为anchor，如果容器大小发生变化时，所有子面板的位置都会根据规则进行重新计算，并自动渲染，它的主要配置项如下：   (1)：anchorSize(父容器提供)            anchor布局用anchorSize配置项用来设置虚拟...
EXTJS 中 anchor 的用法
qq_29663071的博客
03-25 5593
{                     columnWidth:0.33,                       layout:'form',                           items:[{                    id:'missiontype',                    name:"mission.missiontype",
Extjs中layout的用法与总结
csdnwyf的博客
07-06 751
layout中有absolute,anchor,border,accordion,card,form,table,column,fit这几种， 现一一举例： 1.absolute(绝对的)根据字面意思就知道，是根据具体坐标进行定位的。 2.anchor:其值可以使百分比和数值，数值一般为负数，其代表的意思是如果宽度和长度中有一个设定值了，则anchor代表的是未设置的那个，如果两者都没有设定具体值，则如果需要使用anchor则需要anchro:‘ww,hh’ Ext.onReady(function() {
Ext3.2 布局——anchor layout
专注于应用与管理！
02-13 1865
anchor layout 是一个有点意思的布局。简单的来说，在使用anchor布局的容器中，它的子组件都有一个anchor配置项，这个配置项表示该组件相对于父组件的位置。 上图是一个使用了anchor的viewport。viewport是一个特殊的容器，用来描述应用的可见区域，它会把自己渲染到document.body，并自动将自己调整到浏览器的大小。而使用了anchor的布局，则子组
FineUI 的 Layout="Anchor" 布局 asp 的
12345789
05-02 849
Fineui 的 锚点布局 是源自 asp 的 使用如下 : (子容器可以是具体的控件) 在父容器中指定布局类型为 锚点布局 在子容器中设置锚点布局的具体参数 此处有3种情况发生: AnchorValue="100% 30%">按照百分比布局 这种布局故名思议就是子容器的大小按照父亲的百分比来,布局会优先右填充,不够,变
ExtJs4 笔记（14） layout 布局
weixin_30699831的博客
12-27 149
《回到系列目录 本篇讲解Ext另一个重要的概念：布局。一般的容器类控件都是通过配置项items添加子控件的，这些子控件相对于父控件怎么定位呢，这里就要用到布局。某些容器类控件，它本身默认就集成了一种布局方式，例如比较典型的是：Ext.container.Viewport 布局控件，它其实就是一个border布局的容器，还有Ext.form.Panel、Ext.tab.Panel等。本节我们系...
Ext中anchor布局解释
evilcry2012的专栏
09-01 2586
Ext中anchor布局解释 博客分类：  ext extanchor布局  [size=large][size=medium]ext布局中的属性anchor:'100% 100%'貌似可以让面板自适应屏幕的分辨率  要点:  1.容器内的组件要么指定宽度，要么在anchor中同时指定高/宽  2.anchor值通常只能为负值(指非百分比值)，正值没有意义
关于ext属性anchor的说明
guwh
12-01 561
{items : [{ xtype : 'panel', layout : 'column', defaults : { layout : 'form' }, items : [ {columnWidth : .8, items :[ ...
Ext Js 3.2 锚点布局---AnchorLayout
张波的技术积累
11-27 4258
1:Ext.layout.AnchorLayout    它是根据容器大小为其所包含的子面板进行定位的布局，对应面板布局(layout)配置项的名称为anchor，如果容器大小发生变化时，所有子面板的位置都会根据规则进行重新计算，并自动渲染，它的主要配置项如下：   (1)：anchorSize(父容器提供)            anchor布局用anchorSize配置项用来设置虚拟容器
ExtJs常用布局--layout详解（含实例）
weixin_30377461的博客
05-23 1000
序言： 笔者用的ExtJs版本：ext-3.2.0 ExtJs常见的布局方式有：border、form、absolute、column、accordion、table、fit、card、anchor 另外，不常见的布局有：tab、vbox、hbox 本文所有实例代码已提供下载，下载链接：ExtJs常用布局--layout详解实例代码 简介： 最常用的边框布局—...
ExtJs学习笔记：优缺点与深入探索
本资源是一份详细的ExtJs学习笔记文档，包含了多个章节内容，涵盖了ExtJs的基础结构、组件、数据管理以及Ajax相关技术。首先，学习者会从ExtJs的结构树开始，理解其组织架构，包括Ext.form组件的概述，这是前端表单...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值