tesia
- 浏览: 33422 次
- 性别:
- 来自: 广州
-
最新评论
<!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" 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',{
title:'Ext.layout.container.Fit',
frame:true,
renderTo:Ext.getBody(),
bodyPadding:5,
width:200,
// layout:'auto',//自动布局
layout:'fit', //自适应布局
// layout:'accordion', //折叠布局
defaults:{
bodyStyle:'background-color:#FFFFFF'
},
//面板items配置项默认的xtype类型为panel 该默认值可以通过defaultType配置项进行更改
items:[{
title:'嵌套面板一',
html:'面板一'
},{
title:'嵌套面板二',
html:'面板二'
}]
});
});
</script>
</head>
<body>
</body>
</html>
<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" 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',{
title:'Ext.layout.container.Fit',
frame:true,
renderTo:Ext.getBody(),
bodyPadding:5,
width:200,
// layout:'auto',//自动布局
layout:'fit', //自适应布局
// layout:'accordion', //折叠布局
defaults:{
bodyStyle:'background-color:#FFFFFF'
},
//面板items配置项默认的xtype类型为panel 该默认值可以通过defaultType配置项进行更改
items:[{
title:'嵌套面板一',
html:'面板一'
},{
title:'嵌套面板二',
html:'面板二'
}]
});
});
</script>
</head>
<body>
</body>
</html>
分享到：
发表评论
-
Ext.data.TreeStore 分级异步加载树节点示例
2013-07-10 15:36 2074Ext.data.TreeStore远程加载树节点有两种常用方 ... -
Ext.Ajax.request提交JSON数据
2013-07-10 09:29 1368JSON作为轻量级的数据传输格式，在很多时候可以作为XML文件 ... -
Ext.Ajax.request提交XML数据示例
2013-07-09 16:51 948服务器端：loginServerXml.jsp 在lib下要有 ... -
Ext.Ajax.request异步提交表单示例
2013-07-09 16:10 1048服务器端代码：loginServer.jsp <%@ ... -
树形面板Ext.tree.Panel
2013-07-05 15:19 647<!DOCTYPE html PUBLIC " ... -
relayEvents传播分发事件
2013-07-04 14:17 696<!DOCTYPE html PUBLIC " ... -
Extjs自定义事件
2013-07-04 10:54 436<!DOCTYPE html PUBLIC " ... -
改变文档样式风格示例
2013-07-04 10:55 774<!DOCTYPE html PUBLIC " ... -
ExtJS事件绑定方式示例
2013-07-04 10:55 673<!DOCTYPE html PUBLIC " ... -
Ext.util.JSON编码和解码JSON对象
2013-07-03 15:27 944<script type="text/java ... -
Ext.util.Format提供的常用格式化方法
2013-07-03 14:57 1334<!DOCTYPE html PUBLIC " ... -
Ext.util.ClickRepeater 事件的配置和触发
2013-07-03 11:55 748Ext.util.ClickRepeater 继承Ext.ut ... -
样式表的创建和规则获取示例
2013-07-03 10:44 517<!DOCTYPE html PUBLIC " ... -
Ext.KeyNav为元素提供简单的按键处理方法示例
2013-07-03 09:46 849<!DOCTYPE html PUBLIC " ... -
Ext常用函数
2013-07-01 16:42 629函数一：Ext.onReady（） Ext的Dom都是动态生成 ... -
水平盒布局HBox
2013-07-01 15:43 486<!DOCTYPE html PUBLIC " ... -
表格布局
2013-07-01 15:18 523<!DOCTYPE html PUBLIC " ... -
Ext.layout.container.Column布局
2013-07-01 15:18 756<script type="text/java ... -
Absolute绝对位置布局示例
2013-07-01 14:35 396Ext.layout.container.Absolute对应 ... -
Card 卡片式布局
2013-06-28 16:40 951<!DOCTYPE html PUBLIC " ...
相关推荐
- **定义**：`Ext.layout.ContainerLayout` 是 ExtJS 的基础布局类，其他所有布局都基于此基类进行扩展。 - **作用**：当没有为容器指定任何布局时，默认采用 `ContainerLayout`。该布局简单地将所有子元素按顺序...
9.4.3 容器类布局基类：ext.layout.container.container / 442 9.4.4 盒子布局、垂直布局与水平布局：ext.layout.container.box、ext.layout.container.vbox与ext.layout.container.hbox / 442 9.4.5 为盒子模型...
Ext.extend(Ext.layout.container.MyIFrameLayout, Ext.layout.container.Fit, { onLayout: function(ct, target) { var iframe = ct.items.first(); if (iframe && iframe.rendered) { var iframeBody = ...
这行代码定义了一个名为`WebApp.view.tip.ToolTip`的新类，该类继承自`Ext.container.Container`。这意味着我们可以使用所有容器类的功能。 2. **布局配置**： ```javascript layout:{ type:'center', pack:'...
在支持一次仅显示一个子组件的布局中，如`Ext.layout.Accordion`、`Ext.layout.CardLayout`和`Ext.layout.FitLayout`，这个属性特别有用。 2. **allowDomMove**: 默认值为`true`，表示在组件渲染过程中允许移动DOM...
layout: 'fit', // 全屏布局 items: [{ xtype: 'form', items: [{ xtype: 'tinymcetextarea', // 使用TinyMCE的textarea组件 fieldLabel: '富文本编辑', name: 'myEditor' }] }] }); } }); ``` 在这个...
4. **布局管理**：`Ext.layout`包含各种布局管理器，如`Ext.layout.container.Fit`和`Ext.layout.container.Border`，它们负责计算和调整组件的大小和位置。 5. **AJAX通信**：`Ext.Ajax`提供了与服务器交互的接口...
此外，`Ext.layout.container.Border`或`Ext.layout.container.Fit`布局可以帮助调整各个组件的位置和大小。 接着，文章详情页可能包含标题、作者信息、发布日期、文章内容以及评论区。在ExtJS中，可以使用`Ext....
使用Ext.layout.container.Horizontal或Ext.layout.container.Vertical来设定布局。每个事件在时间轴上表示为一个节点或标记，可以通过Ext.container.Container和其子类进行渲染。 4. **时间轴渲染**：事件在时间轴...
1. **组件系统**：了解Ext JS的组件是如何组织和相互作用的，包括容器（Container）和组件（Component）的概念，以及如何通过布局（Layout）管理组件的排列和大小。 2. **数据绑定**：学习如何将数据模型（Model）...
var formPanel = Ext.create('Ext.container.Container', { layout: 'fit', items: [treeCombo] }); Ext.create('Ext.container.Viewport', { layout: 'fit', items: [formPanel] }); } }); ``` 在给定的...
Fit布局的类为`Ext.layout.FitLayout`，它有两个子类：`AccordionLayout`和`CardLayout`。`AccordionLayout`用于折叠面板布局，而`CardLayout`则用于在一个区域内展示一组卡片，每次只显示一张。设置Fit布局非常简单...
11.1 标准布局类 11.1.1 折叠布局——AccordionLayout 11.1.2 边框布局——BorderLayout 11.1.3 卡片式布局——CardLayout 11.1.4 列布局——ColoumnLayout 11.1.5 锚点布局——AnchorLayout 11.1.6 自适应...
对于动态布局，EXTJS 的`Ext.layout.container`类提供了多种布局方式，如Fit布局、Border布局、Form布局等。在拖放操作中，我们需要确保布局能够适应控件位置的变化。例如，如果使用了`AutoLayout`，当一个面板被拖...
2. **Ext.container.Container**: 用于组合其他组件，如`Ext.container.Viewport`可以作为整个应用的容器，包含登录表单。 3. **Ext.form.Panel**: 专门用于创建表单的容器，可以包含多个字段、验证规则等。在登录...
在EXT中，布局（Layout）是一种核心特性，它负责管理组件（Components）在容器（Container）中的排列和尺寸调整。本示例主要讲解了EXT如何利用Border Layout实现一个简单而实用的布局设计。 Border Layout是EXT中的...
11.1 标准布局类 11.1.1 折叠布局——AccordionLayout 11.1.2 边框布局——BorderLayout 11.1.3 卡片式布局——CardLayout 11.1.4 列布局——ColoumnLayout 11.1.5 锚点布局——AnchorLayout 11.1.6 自适应...
Ext.ux.callout.Callout 一个CSS样式的浮动标注容器，带有可选箭头，可与Ext JS 4.0+一起使用。 这对于创建： ... 可以使用任何标准容器布局（通过layout配置）配置Ext.ux.callout.Callout并使用Ext.Componen
通过设置不同的布局策略，`Ext.Container` 可以实现灵活的界面布局。 #### 四、Panels、Windows 和 TabPanel **4.1 Ext.Panel 程序例子** `Ext.Panel` 是一个非常常用的容器组件，它可以用来封装一组相关的组件，...
layout: 'hbox', // 水平布局 items: [ datePicker, timePicker ] }); ``` 4. **样例文件**： 附件中的css文件可能包含了自定义样式，以改变日期和时间选择器的外观。js文件可能包含了一些预定义的配置或...