EXTJS 中 anchor 的用法
来源:互联网 发布:淘宝联盟付款了没记录 编辑:程序博客网 时间:2024/06/03 19:29
anchor布局将使组件固定于父容器的某一个位置,使用anchor布局的子组件尺寸相对于容器的尺寸,即父容器容器的大小发生变化时,使用anchor布局的组件会根据规定的规则重新渲染位置和大小。
AnchorLayout布局没有任何的直接配置选项(继承的除外),然而在使用AnchorLayout布局时,其子组件都有一个anchor属性,用来配置此子组件在父容器中所处的位置。
anchor属性为一组字符串,可以使用百分比或者是-数字来表示。配置字符串使用空格隔开,例如
anchor:'75% 25%',表示宽度为父容器的75%,高度为父容器的25%
anchor:'-300 -200',表示组件相对于父容器右边距为300,相对于父容器的底部位200
anchor:'-250 20%',混合模式,表示组件党对于如容器右边为250,高度为父容器的20%
示例代码:
- Ext.application(
- {
- name:'layout_anchor',
- launch:function(){
- Ext.create(
- 'Ext.panel.Panel',
- {
- width:500,
- height:300,
- title:'anchor布局',
- layout:'anchor',
- x:60,
- y:80,
- renderTo:Ext.getBody(),
- items:[
- {
- xtype:'panel',
- title:'第一个',
- //表示宽度为父容器的75%,高度为父容器的20%
- anchor:'75% 20%'
- },{
- xtype:'panel',
- title:'第二个',
- //表示相对于父容器右边距为130,相对于父容器下边距为120
- anchor:'-130 -120'
- }
- ]
- }
- )
- }
- }
- )
- {
- columnWidth:0.33,
- layout:'form',
- items:[{
- id:'missiontype',
- name:"mission.missiontype",
- xtype:'combo',
- fieldLabel:'任务类型',
- editable:false,
- store : gdlxStore,
- displayField:'gdlx',
- mode:'local',
- anchor:'100%',
- listeners:{
- 'select':function(combo, record,index){
- dmlxCom.clearValue();
- if(this.getValue())
- dmlxStore.load({params:{missionType:this.getValue()}});
- //gdlxStore.reload();
- }
- }
- }]
- }
ext中许多组件都有anchor这个属性,他一般与布局column一起使用,以文本组件为例:columnWidth的值乘以anchor的值,即为本组件所占的长度。
另外注意:anchor不可与设置长度的属性width同时出现,否则,width属性无效。
0 0
- EXTJS 中 anchor 的用法
- EXTJS 中 anchor 的用法
- EXTJS 中 anchor 的用法
- EXTJS 中 anchor 的用法
- anchor的用法
- .net winform中Anchor和Dock的用法
- ExtJS中的Anchor
- ExtJs中Grid的用法
- EXTJS中store的用法
- Extjs中apply的用法
- extjs中tabPanel的用法
- faster rcnn中rpn的anchor
- Extjs中layout的用法总结
- extjs中Toolbar工具栏的用法
- Extjs中layout的用法总结
- ExtJS中layout的用法总结
- EXTJS 3.4 graidpanel 中 combox 的用法
- extjs中apply和applyIf的用法
- 【学渣笔记】Scala XML操作手册
- C++ 枚举进程信息,并结束指定进程
- Android入门——Bitmap和BitmapFactory
- selenium 定位到iframe中的元素
- selenium 抓取 自己 评论的腾讯新闻
- EXTJS 中 anchor 的用法
- selenium 常用函数
- Selenium Webdriver java 积累
- js 取值
- selenium处理 <a target=_blank 几种方式整理(转)
- PAT (Advanced Level) Practise 1083 List Grades (25)
- maven 打jar包
- selenium ie 设置
- webdriver selenium org.openqa.selenium.remote.UnreachableBrowserException: Error