`
men4661273
  • 浏览: 275633 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

Ext中anchor布局解释

    博客分类:
  • ext
阅读更多
[size=large][size=medium]ext布局中的属性anchor:'100% 100%'貌似可以让面板自适应屏幕的分辨率

要点:

1.容器内的组件要么指定宽度,要么在anchor中同时指定高/宽

2.anchor值通常只能为负值(指非百分比值),正值没有意义,3.anchor必须为字符串值"  
[/size][/size]
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();   

});  

分享到:
评论

相关推荐

    Ext Js权威指南(.zip.001

    9.4.7 锚固布局:ext.layout.container.anchor / 448 9.4.8 绝对定位布局:ext.layout.container.absolute / 450 9.4.9 边框布局:ext.layout.container.border / 451 9.4.10 自动布局:ext.layout.container....

    ExtJs常用布局--layout详解实例代码

    ExtJs常见的布局方式有:border、form、absolute、column、accordion、table、fit、card、anchor 另外,不常见的布局有:tab、vbox、hbox 具体使用方法可见该文件的案例代码。 该文件含ext3.2.0压缩版,可直接运行哦...

    EXTJS4自学手册

    EXTJS4自学手册——EXT容器布局(Auto,Anchor,Absolute,Hbox) EXTJS4自学手册——EXT容器布局(Vbox,Accordion,Table,Column) EXTJS4自学手册——EXT容器布局(Fit,Card,Border) EXTJS4自学手册——EXT组件布局 ...

    ExtJSWeb应用程序开发指南(第2版)

    5.2.5 Anchor锚点布局 5.2.6 Absolute绝对位置布局 5.2.7 CheckboxGroup复选框组布局 5.2.8 Column列布局 5.2.9 Table表格布局 5.2.1 0Border边框布局 5.2.1 1Box盒布局 5.3 使用ViewPort 5.4 Ext.tab.Panel...

    ExtJs4_笔记.docx

    一、ExtJs中的Ajax:Ext.Ajax.request 23 二、元素对象Ajax式更新:Ext.Updater,[已弃用] 29 第四章 Ext.XTemplate 模板 31 一、使用标签tpl和操作符for 33 二、在子模板的范围内访问父元素对象 34 三、数组元素索引...

    Extjs4.1.1

    第九讲.ExtJS布局模式-Card、Anchor、Absolute 第十讲.ExtJS布局模式-Column、Table、Border 第十一讲.ExtJS布局模式-Box布局、使用ViewPort布局首页 第十二讲.ExtJS之Ext常用函数 第十三讲.ExtJS之Ext常用函数...

    ExtAspNet_v2.3.2_dll

    -修正extjs最新版本(v3.2.2)中的一个bug,如果下拉列表中存在两个相同的Text,则SelectedValue返回值永远是第一个Text的值(feedback:ben.zhou)。 -应用补丁#6593, #6621(feedback:vbelyaev)。 +修正IE7下Grid分页...

    ExtJS的FieldSet的column列布局

    以下是自己扩展的FieldSet: 代码如下: ME.Base.FieldSet = Ext.extend(Ext.form.FieldSet, { layout: ‘column’, fieldSetItems: [], autoScroll:false, defaults: { layout: ‘form’, labelAlign: ‘right’, ...

    深入浅出Extjs4.1.1

    9、ExtJS布局模式-Card、Anchor、Absolute( r! k$ G/ Q, u! c' U 11、ExtJS布局模式-Box布局、使用ViewPort布局首页0 j( d' o {. g$ T 12、ExtJS之Ext常用函数4 {, o8 W1 s! I6 ^3 k 13、ExtJS之Ext常用函数(二)' ...

    ExtAspNet v2.2.1 (2009-4-1) 值得一看

    ExtAspNet v2.2.1 ExtAspNet是一组专业的Asp.net控件库,拥有原生的AJAX支持和丰富的UI效果, 目标是创建没有JavaScript,没有... -在Page_Load中设置了哪些需要在AJAX中更新的Asp.net控件会在回发时保持状态,可以...

Global site tag (gtag.js) - Google Analytics