`
keepwork
  • 浏览: 332028 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

EXT--Absolute绝对位置布局示例

    博客分类:
  • EXT
 
阅读更多
Ext.layout.container.Absolute对应面板布局配置项的名称为Absolute,它可以根据子面板中配置的x/y 坐标进行定位。下面是绝对位置布局的简单示例: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>绝对位置布局</title> 
<link  rel="stylesheet" type="text/css" href="ext-4.2.1/resources/css/ext-all.css" /> 
<script type="text/javascript" src="ext-4.2.1/bootstrap.js"></script> 
<script type="text/javascript" src="ext-4.2.1/locale/ext-lang-zh_CN.js"></script> 
<script type="text/javascript"> 
Ext.onReady(function(){ 
  Ext.create('Ext.panel.Panel',{ 
  layout:'absolute', 
  title:'Ext.layout.conatiner.Absolute', 
  frame:false, 
  height:150, 
  width:300, 
  renderTo:Ext.getBody(), 
  defaults:{ 
  frame:true, 
  height:70, 
  width:100, 
  bodyStyle:'background-color:#FFFFFF;padding:15px' 
  }, 
  items:[{ 
  x:10, 
  y:10, 
  html:'子面板一', //横坐标为距父容器左边缘90像素的位置 
  title:'子面板一' //纵坐标为距父容器上边缘10像素的位置 
  },{ 
  x:130, 
  y:40, 
  html:'子面板二', 
  title:'子面板三' 
  }] 
  
  }); 
}); 
</script> 
</head> 

<body> 
</body> 
</html> 

 

开发者博客www.developsearch.com

分享到:
评论

相关推荐

    EXT 3.2.1 Demo 最全实例

    1. **布局管理**:EXT JS提供多种布局方式,如表单布局(Form Layout)、流式布局(Fluid Layout)、绝对布局(Absolute Layout)、列布局(Column Layout)等,这些布局在创建复杂的网页布局时非常有用。...

    extjs布局全面讲解

    title: '绝对定位布局示例', layout: 'absolute', items: [ { xtype: 'button', text: '按钮1', x: 10, y: 10, width: 100, height: 30 }, { xtype: 'button', text: '按钮2', x: 120, y: 10, ...

    extjs布局管理学习指南

    - **Absolute Layout** (绝对定位布局): 允许你精确地设置子项的位置。 - **Anchor Layout** (锚点布局): 使子项能够相对于容器的边缘进行定位。 - **Table Layout** (表格布局): 使用HTML表格来组织子项。 - **Card...

    Extjs4-学习指南

    ##### 2.6 Absolute 布局 - **特点**:允许子项绝对定位。 - **用途**:精确控制元素的位置,但不建议广泛使用。 ##### 2.7 Column 布局 - **特点**:子项根据列宽排列。 - **用途**:构建响应式布局,适应不同...

    Extjs学习笔记之七 布局

    绝对布局是最直接的布局方式,每个组件的位置通过指定的x和y坐标进行布局。这种布局方式类似于CSS中的position:absolute属性,组件的位置和尺寸完全由开发者通过代码决定。使用绝对布局时,每个组件都需要提供x和y...

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

    -增加示例-如何将Grid控件导出为Excel(data\grid_excel_run.aspx)(feedback:503684912)。 -如果TreeNode的属性Enabled="false",则此项变灰并且不会被选中(feedback:your568)。 -修正TreeNode的属性NavigateUrl不...

    extjs4.0整套开发工具

    3. **布局(Layouts)**:EXTJS 4.0 的布局系统进行了优化,支持更多的布局类型,如表单布局(Form Layout)、绝对布局(Absolute Layout)、瀑布流布局(Masonry Layout)等,让开发者能够轻松创建复杂页面结构。...

    Ext Js权威指南(.zip.001

    9.4.8 绝对定位布局:ext.layout.container.absolute / 450 9.4.9 边框布局:ext.layout.container.border / 451 9.4.10 自动布局:ext.layout.container.auto / 453 9.4.11 表格布局:ext.layout.container....

    学习YUI.Ext 第四天--对话框Dialog的使用

    需要注意的是,这里提供的只是一个简单的示例,实际上YUI.Ext提供了更多高级特性,如拖拽、动态加载内容等功能,开发者可以根据具体需求进行扩展和定制。通过熟练掌握YUI.Ext中的对话框组件,可以极大地提升Web应用...

    Extjs4学习指南

    ##### 2.6 Absolute布局 - **特点**:允许精确控制每个子项的位置和大小。 - **应用场景**:适用于需要精细控制元素位置的场景。 ##### 2.7 Column布局 - **特点**:允许子项按照指定的列宽进行排列,适用于表格...

    ExtAspNet_v2.3.2_dll

    -增加示例-如何将Grid控件导出为Excel(data\grid_excel_run.aspx)(feedback:503684912)。 -如果TreeNode的属性Enabled="false",则此项变灰并且不会被选中(feedback:your568)。 -修正TreeNode的属性NavigateUrl不...

    ExtJs2.0简明教程

    此外,ExtJS还支持其他一些布局,如Anchor布局、Absolute布局等,以满足不同应用场景的需求。 ### 七、使用表格控件Grid #### 7.1 基本表格GridPanel GridPanel是用于显示表格数据的主要组件。它支持分页、排序、...

    ExtJS基础教程.pdf

    1. **布局类**:包括容器布局(Container Layout)、绝对定位布局(Absolute Layout)、手风琴布局(Accordion)、锚点布局(Anchor Layout)、边框布局(Border Layout)、卡片布局(Card Layout)、列布局(Column Layout)、...

    EXTJS2 API

    3. **布局管理(Layouts)**:EXTJS2支持多种布局方式,如表布局(Table Layout)、流式布局(Form Layout)、绝对布局(Absolute Layout)等,可以灵活调整组件在容器中的排列和大小。 4. **Store和Model**:Store...

    划词搜索Extjs实现方式

    4. **展示搜索结果**:如果是在当前页面内展示搜索结果,则需要处理好界面的布局问题;如果是跳转到新的页面,则需要注意URL的构造。 #### 四、具体实现步骤 以下代码示例展示了如何使用Extjs实现划词搜索功能: ...

    移动端的text-overflow多行文本溢出显示省略号(…)

    position: absolute; bottom: 0; right: 0; padding: 0 20px 1px 45px; background: url(http://huoche.7234.cn/images/jb51/mt5enx42twk.png) repeat-y; } ``` 这种方法需要注意的是,`height`应为`line-...

Global site tag (gtag.js) - Google Analytics