ExtJs学习笔记(12)_Anchor布局

最新推荐文章于 2019-04-08 11:37:45 发布
最新推荐文章于 2019-04-08 11:37:45 发布
阅读量133 收藏
点赞数
分类专栏： Java 文章标签： EXT CSS JavaScript HTML BBS ViewUI

ExtJs学习笔记(12)_Anchor布局

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

 

 

Code
<!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />-->!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>WindowLayOut</title>
<linkrel="stylesheet"type="text/css"href="../resources/css/ext-all.css"/>
<scripttype="text/javascript"src="../adapter/ext/ext-base.js"></script>
<scripttype="text/javascript"src="../ext-all-debug.js"></script>
<styletype="text/css">
.x-panel-bodyp{}{
margin:10px;
font-size:12px;
}
</style>
</head>
<body>
<scripttype="text/javascript">

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

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

});

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

});

varwin=newExt.Window({
title:"AnchorLayout",
height:400,
width:400,
plain:true,
layout:'anchor',
items:[panel1,panel2,panel3]
});

win.show();

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

欢迎加入:http://www.itpob.cn/bbs

adcbefg
关注
专栏目录
目标检测算法笔记（一）综述
liuxinnanshou的博客
02-23 1126
目录 简述 One-Stage 算法 Two-Stage 算法 检测的方法分析 后续 总结 简述 目标检测（Object Detection），在计算机视觉领域的任务就是给定一张图片，将图片中的物体识别并且框定出来。随着近年来的发展，其主要分成了两大类别，Two-Stage检测算法（以Faster R-CNN为代表）和以及One-Stage检测算法（以YOLO为代表）。 PS：Multi-St...
Extjs学习笔记之七 布局
01-19
1. AbsoluteLayout 可以通过Panel内部组件的决定位置来布局。通过x,y来指定。 示例用法： 代码如下: new Ext.Panel({ layout: ‘absolute’, title: ‘AbsuluteLayout’, renderTo: document.body, frame: true, ...
Ext的Anchor布局
huanyingjung的专栏
03-04 153
Anchor布局的例子： //Anchor Layout要点:"1.容器内的组件要么指定宽度，要么在anchor中同时指定高/宽，2.anchor值通常只能为负值(指非百分比值)，正值没有意义，3.anchor必须为字符串值" Ext.onReady(function() { var panel1 = new Ext.Panel({ ...
小谈Ext架构-最简单的layout:AnchorLayout
caibinghong的专栏
03-31 99
  最简单的layout:AnchorLayout   AnchorLayout是最简单的布局管理其，它只是将元素按照配置的属性在元素容器中进行定位。     让我们看一下它的render方法以理解如果进行布局：     onLayout : function(ct, target){     Ext.layout.AnchorLayout.superclass.onLayout.ca...
关于ext属性anchor的说明
guwh
12-01 552
{items : [{ xtype : 'panel', layout : 'column', defaults : { layout : 'form' }, items : [ {columnWidth : .8, items :[ ...
人脸检测
热门推荐
qq_17278169的博客
03-10 2万+
人脸检测 人脸检测目的就是在一张图中找到所有的人脸。本次分享只针对人脸检测，不涉及到人脸识别。 人脸检测几种常用的方法： ①早期的人脸检测方法是利用人工提取特征，训练分类器，进行人脸检测。例如opencv源码中自带的人脸检测器就是利用haar特征进行的人脸检测。这类方法的缺点就是在环境变化强烈的时候检测效果不理想，例如弱光条件，人脸不全。 ②从通用的目标检测算法...
EXTJS学习笔记
Guojun的博客
04-08 211
sencha which set PATH=%PATH%;C:\Sencha\Cmd\6.0.0.92 sencha generate app --ext MyApp ./myapp 将会创建名为 MyApp 的 Ext JS 应用，应用所有的文件都放在 当前目录下名为 myapp 的文件夹。 extjs 1.基本结构: Ext.define(‘Car’,{ name:null, construc...
extjs_simple.rar_extjs_extjs simple_extjs_simple
09-14
ExtJS实现的用户管理界面,实现了用户的增加功能、修改功能、删除功能、查看工程。还提供了下拉列表选择框进行年龄的选择功能。
extjs_tapestry.rar_extjs tapestry_extjs_tapestry_tapestry
09-22
6. **样式与布局**：由于两个框架都涉及用户界面，可能需要处理 ExtJS 样式与 Tapestry 默认样式之间的冲突，以确保视觉一致性。 通过这样的集成，开发者可以获得 ExtJS 提供的精美 UI 组件和 Tapestry 强大的后端...
ssh_extjs.rar_extjs_extjs ssh_oracle
09-23
在描述中提到的"extjs4"指的是ExtJS的第4个主要版本，这个版本引入了许多改进和新特性，如新的布局系统、更好的性能和更多的UI组件。 **3. Oracle数据库** Oracle是全球知名的关系型数据库管理系统，广泛应用于大型...
Ext中anchor布局解释
evilcry2012的专栏
09-01 2576
Ext中anchor布局解释 博客分类：  ext extanchor布局  [size=large][size=medium]ext布局中的属性anchor:'100% 100%'貌似可以让面板自适应屏幕的分辨率  要点:  1.容器内的组件要么指定宽度，要么在anchor中同时指定高/宽  2.anchor值通常只能为负值(指非百分比值)，正值没有意义
Java语言编程基础及Web开发入门教程：Java 是一种广泛使用的面向对象编程语言，以其平台无关性和安全性著称 Java 不仅
最新发布
09-15
javascript：Java 是一种广泛使用的面向对象编程语言，以其平台无关性和安全性著称。Java 不仅适用于桌面应用程序开发，还特别适合 Web 开发，包括服务器端开发、Android 应用开发等。下面是一个简要的 Java 编程基础和 Web 开发入门指南。 Java 编程基础 1. 环境搭建 首先需要安装 Java 开发工具包 JDK 和一个集成开发环境（IDE），比如 Eclipse 或 IntelliJ IDEA。 2. 第一个 Java 程序 创建一个简单的 Java 程序来熟悉 Java 的基本语法结构。 java 深色版本 1public class HelloWorld {2 public static void main(String[] args) {3 System.out.println("Hello, World!");4 }5} 3. 数据类型 Java 支持多种数据类型，包括基本类型（如 int, double）和引用类型（如 String, 类）。 4. 控制结构 学习条件语句（if, switch）、循环语句（for,
5345-微信小程序校园二手交易平台小程序（源码+数据库）.zip
09-15
本系统主要针对计算机相关专业的正在做毕业设计的学生和需要项目实战练习的学习者，可作为毕业设计、课程设计、期末大作业。本系统主要针对计算机相关专业的正在做毕业设计的学生和需要项目实战练习的学习者，可作为毕业设计、课程设计、期末大作业。本系统主要针对计算机相关专业的正在做毕业设计的学生和需要项目实战练习的学习者，可作为毕业设计、课程设计、期末大作业。本系统主要针对计算机相关专业的正在做毕业设计的学生和需要项目实战练习的学习者，可作为毕业设计、课程设计、期末大作业。
基于 Flask 和 MongoDB 的任务管理项目.zip
09-15
这是一个使用 Flas、kmongoDB 和 Python 后端技术构建的任务管理项目。该项目允许用户创建个人资料，将任务插入数据库并进行编辑。它采用防御性编程来限制用户的权限。项目还使用了 JavaScript、HTML 和 Materialize 框架来进行前端开发和样式设计。管理员可以使用'admin'作为用户名和密码登录，以访问网站的所有功能。这是一个完整的全栈项目，涵盖了前端和后端的开发。 1、资源项目源码均已通过严格测试验证，保证能够正常运行； 2、项目问题、技术讨论，可以给博主私信或留言，博主看到后会第一时间与您进行沟通； 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用，尤其对于人工智能、计算机科学与技术等相关专业，更为适合； 4、下载使用后，可先查看README.md文件（如有），本项目仅用作交流学习参考，请切勿用于商业用途。
5104-微信小程序小说实体书商城+ssm（源码+数据库+lun文）.zip
09-15
本系统主要针对计算机相关专业的正在做毕业设计的学生和需要项目实战练习的学习者，可作为毕业设计、课程设计、期末大作业。本系统主要针对计算机相关专业的正在做毕业设计的学生和需要项目实战练习的学习者，可作为毕业设计、课程设计、期末大作业。本系统主要针对计算机相关专业的正在做毕业设计的学生和需要项目实战练习的学习者，可作为毕业设计、课程设计、期末大作业。本系统主要针对计算机相关专业的正在做毕业设计的学生和需要项目实战练习的学习者，可作为毕业设计、课程设计、期末大作业。
5223-微信小程序的新生报到系统的设计与实现ssm（源码+数据库+lun文）.zip
09-15
本系统主要针对计算机相关专业的正在做毕业设计的学生和需要项目实战练习的学习者，可作为毕业设计、课程设计、期末大作业。本系统主要针对计算机相关专业的正在做毕业设计的学生和需要项目实战练习的学习者，可作为毕业设计、课程设计、期末大作业。本系统主要针对计算机相关专业的正在做毕业设计的学生和需要项目实战练习的学习者，可作为毕业设计、课程设计、期末大作业。本系统主要针对计算机相关专业的正在做毕业设计的学生和需要项目实战练习的学习者，可作为毕业设计、课程设计、期末大作业。本系统主要针对计算机相关专业的正在做毕业设计的学生和需要项目实战练习的学习者，可作为毕业设计、课程设计、期末大作业。本系统主要针对计算机相关专业的正在做毕业设计的学生和需要项目实战练习的学习者，可作为毕业设计、课程设计、期末大作业。
5033-微信小程序微信课堂助手小程序+php（源码+数据库+lun文）.zip
09-15
本系统主要针对计算机相关专业的正在做毕业设计的学生和需要项目实战练习的学习者，可作为毕业设计、课程设计、期末大作业。本系统主要针对计算机相关专业的正在做毕业设计的学生和需要项目实战练习的学习者，可作为毕业设计、课程设计、期末大作业。本系统主要针对计算机相关专业的正在做毕业设计的学生和需要项目实战练习的学习者，可作为毕业设计、课程设计、期末大作业。本系统主要针对计算机相关专业的正在做毕业设计的学生和需要项目实战练习的学习者，可作为毕业设计、课程设计、期末大作业。
ExtJs 2.1 学习笔记概览
"extJs+2.1学习笔记.pdf" 这篇学习笔记详尽地涵盖了ExtJs 2.1版本的关键概念和技术。ExtJs是一种基于JavaScript的富客户端框架，用于构建功能丰富的Web应用程序。笔记分为多个章节，逐步深入地介绍了ExtJs的核心...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值