`

Ext的Anchor布局

阅读更多

Anchor布局的例子:

    //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();

     });

 

分享到:
评论

相关推荐

    Ext10种布局

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

    Ext 表单布局实例代码

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

    EXTJS4自学手册

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

    Extjs fieldset两行两列布局

    ### Extjs FieldSet 两行两列布局解析 在Extjs框架中,`FieldSet`是一种常见的组件,常用于组织一组相关的表单字段,并通过一个标题来标识这组字段的主题。本文将详细介绍如何使用Extjs实现一个两行两列布局的`...

    ext 3.2源码

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

    ext说明文档和查阅手册

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

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

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

    ext文件上传下载

    layout: 'fit', // 使用适应布局填满整个容器 items: [{ xtype: 'form', // 创建一个表单 title: '文件上传', bodyPadding: 10, width: 400, items: [{ xtype: 'filefield', // 文件选择字段 fieldLabel: '...

    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一些小例子

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

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

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

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

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

    yui的扩展ext.rar

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

    ext 4.1中文API

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

    EXT js 实例 学生成绩管理

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

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

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

    ext常用操作

    - Ext JS 支持多种布局方式,可以根据实际需求选择合适的布局方式。 - 示例:使用表单布局来组织表单字段。 5. **国际化** - 支持多种语言包,可以在不同语言环境下使用相同的代码。 - 示例:根据用户选择的...

    Ext JS高级程序设计

    ### Ext JS 高级程序设计:深入理解 HBoxLayout 布局管理器 #### 概述 在Ext JS中,`HBoxLayout`(简称HBox)是一种常用的布局管理器,主要用于水平方向上的元素排列。它提供了丰富的配置选项来帮助开发者更好地...

    Extjs学习笔记之七 布局

    锚点布局的anchor属性接受一个字符串,包含两个值,分别是水平锚点值和垂直锚点值。可以设置百分比或相对比例来确定组件与容器边缘的距离。在API文档中,anchor属性的设置解释得很清楚。 以上介绍的只是Extjs布局...

Global site tag (gtag.js) - Google Analytics