前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >ExtJs学习笔记(12)_Anchor布局

ExtJs学习笔记(12)_Anchor布局

作者头像
菩提树下的杨过
发布2018-01-24 15:35:01
5540
发布2018-01-24 15:35:01
举报
文章被收录于专栏:菩提树下的杨过

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

代码语言:js
复制
!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>

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2008-09-02 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
相关产品与服务
容器服务
腾讯云容器服务(Tencent Kubernetes Engine, TKE)基于原生 kubernetes 提供以容器为核心的、高度可扩展的高性能容器管理服务,覆盖 Serverless、边缘计算、分布式云等多种业务部署场景,业内首创单个集群兼容多种计算节点的容器资源管理模式。同时产品作为云原生 Finops 领先布道者,主导开源项目Crane,全面助力客户实现资源优化、成本控制。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档