`
men4661273
  • 浏览: 278553 次
  • 性别: 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();   

});  

分享到:
评论

相关推荐

    Ext10种布局

    - **定义**:通过 `Ext.layout.AnchorLayout` 类定义,布局名称为 `anchor`。 - **功能**:根据容器大小定位其包含的子面板。 - **定位方式**: - 百分比定位:如 `anchor: '100%'` 表示子面板占满容器宽度。 - ...

    Ext 表单布局实例代码

    在EXT JS这个强大的JavaScript框架中,表单布局是构建用户界面时一个非常重要的组成部分。EXT JS提供了多种布局方式,使得开发者可以灵活地设计和组织表单元素。在提供的代码实例中,我们看到了一个基于EXT JS的表单...

    Ext4.0中文api[帮助文档]

    “布局”(Layouts)是Ext JS的一大特色,它提供了多种布局方式,如fit、anchor、border等,以适应不同复杂的界面排列需求。开发者可以根据组件的大小和位置需求选择合适的布局。 此外,“事件处理”(Events)部分...

    ext 4.1中文API

    2. **布局管理**:EXT提供了多种布局管理器,如Fit、Border、Anchor、Table等,用于控制组件在容器中的排列方式和大小调整。了解不同布局的使用场景和配置方式能帮助优化界面设计。 3. **数据绑定**:EXT 4.1加强了...

    Extjs fieldset两行两列布局

    ### Extjs FieldSet 两行两列布局解析 ...以上代码展示了如何在Extjs中实现一个两行两列的`FieldSet`布局,并对各个组成部分进行了详细的解析。这种布局方法灵活且强大,适用于多种复杂的UI设计需求。

    ext 3.2源码

    2. **布局管理器**:EXT 3.2提供了多种布局模式,如`Fit`, `Table`, `Anchor`, `FormLayout`等。这些布局管理器在`Ext.layout`命名空间下实现,它们负责容器中组件的定位和尺寸调整。理解布局管理器的工作原理对于...

    ext说明文档和查阅手册

    2. **布局管理**:EXT提供了多种布局方式,如Fit布局、Anchor布局、Table布局等,这使得开发者能够灵活地设计和调整页面元素的排列和展示。 3. **窗口系统**:EXT的Window组件是弹出式对话框的基础,可以创建浮动、...

    ext文件上传下载

    在EXTJS中,文件上传通常会用到`Ext.form.Panel`组件,它包含一个或多个`Ext.form.field.File`(文件选择字段),也被称为“上传按钮”。这个组件允许用户选择本地文件,并在提交表单时将文件数据发送到服务器。以下...

    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....

    ext2.0 中文资料(含多例子)

    5. **兼容多种浏览器**:Ext 2.0在不同浏览器中的表现一致,降低了跨浏览器的兼容性问题。 ### 示例代码解析 #### 示例一:基本表格展示 这段代码可能展示了如何使用Ext 2.0创建一个简单的表格,其中包含了数据行...

    EXT js 实例 学生成绩管理

    例如,我们可以使用 fit 布局让一个组件占据整个容器,或者使用 anchor 布局根据容器大小动态调整组件的大小。 7. **事件处理(Events)**:EXT JS 的事件驱动模型使得组件之间可以轻松地进行通信。通过监听和处理...

    Ext2.0一些小例子

    3. **布局管理**:拥有多种布局模式,如Fit布局、Table布局、Anchor布局等,可以根据需要调整组件的大小和位置。 4. **Ajax支持**:通过Ajax技术实现异步通信,使Web应用能实时更新数据,提高用户体验。 5. **可...

    Ext2.2API中文版(最终完成版)

    2. **布局管理器**:Ext提供了多种布局管理器,如Fit布局、Table布局、Anchor布局等,用于自动调整组件大小和位置,适应不同屏幕尺寸和用户交互。 3. **数据绑定**:Ext支持双向数据绑定,可以方便地将视图组件与...

    yui的扩展ext.rar

    - 布局组件(Layouts):如Fit,Anchor,Border等,负责组件的尺寸和位置管理。 - 工具栏和菜单(Toolbars & Menus):提供按钮、下拉菜单等交互元素。 4. 构建EXT应用 EXT的应用通常由以下几个步骤组成: - ...

    Extjs学习笔记之七 布局

    在这种布局中,Panel可以被设置为默认展开或折叠,而且可以配置是否在展开时自动滚到顶部等细节。 示例代码如下: ```javascript new Ext.Panel({ title: 'AccordionLayout', layout: 'accordion', renderTo: ...

    Ext JS高级程序设计

    在Ext JS中,`HBoxLayout`(简称HBox)是一种常用的布局管理器,主要用于水平方向上的元素排列。它提供了丰富的配置选项来帮助开发者更好地控制组件的布局,包括元素的对齐方式、填充样式等。本文将详细介绍`...

    Ext JS6 by Example中文版(含源码).rar

    - **布局管理**:学习如何利用Box、Fit、Anchor等布局方式,优化组件在不同屏幕尺寸下的展示。 - **事件处理**:理解事件监听和触发机制,提升组件间的交互性。 - **数据管理**:掌握Store和Model的使用,以及...

    EXTJS4自学手册

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

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

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

Global site tag (gtag.js) - Google Analytics