`

extjs4.1几种布局方式

 
阅读更多
http://blog.csdn.net/yunji3344/article/details/8372922

http://www.extjs.org.cn/node/298


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Advanced Ext.ux.StatusBar Example</title>
<!-- Ext -->
<script type="text/javascript" src="ext/adapter/ext/ext-base.js">

</script>
<script type="text/javascript" src="ext/ext-all.js">

</script>

<script type="text/javascript" src="ext/ext-lang-zh_CN.js">

</script>
<script type="text/javascript">
Ext.onReady(function() {
alert('afaa');

});
</script>
</head>
<body>

</body>
</html>





Ext.onReady(function() {

/**
* 1.auto布局使用（默认布局）
*/
var panel1 = Ext.create('Ext.panel.Panel', {
title : 'panel1',
html : 'panel1ddd',
height : 80,
width : 100
});
var panel2 = Ext.create('Ext.panel.Panel', {
title : 'panel2',
html : 'panel2ffff',
height : 80,
width : 100
});
var panel3 = Ext.create('Ext.panel.Panel', {
title : 'panel3',
html : 'panel3yyyy',
height : 80,
width : 100
});
var panel4 = Ext.create('Ext.panel.Panel', {
title : 'panel4',
html : 'panel4GGG',
height : 80,
width : 100
});
var auto = Ext.create('Ext.window.Window', {
title : 'auto Layout',
width : 100,
height : 420,
layout : 'auto',
defaults : {
bodyStyle : 'padding:15px'
},
items : [panel1, panel2, panel3, panel4]
});
auto.show();


/**
* 2 anchor布局（按百分比显示）
*/
var panel5 = Ext.create('Ext.panel.Panel', {
title : 'panel5',
html : '100% 30%',
anchor : '100% 30%'
});
var panel6 = Ext.create('Ext.panel.Panel', {
title : 'panel6',
html : '100% 25%',
anchor : '1000% 25%'
});


var panel7 = Ext.create('Ext.panel.Panel', {
title : 'panel7',
html : '100% 15%',
anchor : '100% 15%'
});


var panel8 = Ext.create('Ext.panel.Panel', {
title : 'panel8',
html : '100% 30%',
anchor : '100% 30%'
});


var anchor = Ext.create('Ext.window.Window', {
title : 'Anchor Layout',
width : 250,
height : 300,
layout : 'anchor',
defaults : {
bodyStyle : 'padding:10px'
},
items : [panel5, panel6, panel7, panel8]
});
anchor.show();


/**
* 3 HBox 布局（水平）
*/
var pp1 = Ext.create('Ext.panel.Panel', {
title : 'pp1',
html : 'pp1',
flex : 1
});


var pp2 = Ext.create('Ext.panel.Panel', {
title : 'pp2',
html : 'pp2',
flex : 2
// 设置pp1与pp2显示宽度的比例为1:2
});


var hbox = Ext.create('Ext.window.Window', {
title : 'Hbox Layout',
width : 300,
height : 100,
layout : {
type : 'hbox',
align : 'stretch'// 水平方向拉伸
},
defaults : {
bodyStyle : 'padding:10px'
},
items : [pp1, pp2]
});
hbox.show();


/**
* 4. VBox布局(垂直)
*/
var p1 = Ext.create('Ext.panel.Panel', {
title : 'p1',
html : 'p1',
flex : 2
});


var p2 = Ext.create('Ext.panel.Panel', {
title : 'p2',
html : 'p2',
flex : 1
});
var vbox = Ext.create('Ext.window.Window', {
title : 'VBox Layout',
width : 82,
height : 300,
layout : {
type : 'vbox',
align : 'stretch'
},
defaults : {
bodyStyle : 'padding:15px'
},
items : [p1, p2]
});
vbox.show();


/**
* 5.accordion(折叠布局)
*/
var pa1 = Ext.create('Ext.panel.Panel', {
title : 'pa1',
html : '<b>pa1</b>'
});
var pa2 = Ext.create('Ext.panel.Panel', {
title : 'pa1',
html : '<b>pa2</b>'
});
var pa3 = Ext.create('Ext.panel.Panel', {
title : 'pa3',
html : '<b>pa3</b>'
});
var pa4 = Ext.create('Ext.panel.Panel', {
title : 'pa4',
html : '<b>pa4</b>'
});
var pa5 = Ext.create('Ext.panel.Panel', {
title : 'pa5',
html : '<b>pa5</b>'
});


var accordion = Ext.create('Ext.window.Window', {
title : 'Accordion Layout',
margins : '5 0 5 5',
split : true,
width : 210,
height : 250,
layout : 'accordion',
defaults : {
bodyStyle : 'padding:35 15 0 50'
},
items : [pa1, pa2, pa3, pa4, pa5]
});
accordion.show();


/**
* 6. fit布局（显示一个单独的组件在一容器上，填满容器空间）
*
*/
var pan1 = Ext.create('Ext.panel.Panel', {
title : 'pan1',
bodyStyle : 'padding:15px',
html : 'Fit content'
});
var fit = Ext.create('Ext.window.Window', {
title : 'fit layout',
width : 100,
height : 150,
layout : 'fit',
items : [pan1]
});
fit.show();


/**
* border布局
*/
var border = Ext.create('Ext.window.Window', {
width : 700,
height : 400,
title : 'Border Layout',
layout : 'border',
defaults : {
xtype : 'panel'
},
items : [{
title : 'North Region is resizable',
region : 'north',
height : 100,
split : true
}, {
title : 'South Region is resizable',
region : 'south',
height : 100,
split : true
}, {
title : 'West Region is collapsible',
region : 'west',
width : 200,
collapsible : true,
layout : 'fit'
}, {
title : 'East Region is collapsible',
region : 'east',
width : 200,
collapsible : true,
layout : 'fit'
}, {
title : 'Center Region',
region : 'center',
layout : 'fit'
}]
});
border.show();


/**
* tools 布局
*/
var tp = Ext.create('Ext.panel.Panel', {
width : 500,
renderTo : 'toolId',
html : 'ffff',
title : 'Tools--header',
tools : [{
type : 'close',
tooltip: 'close the window',
handler : function() {
}
}, {
type : 'collapse',
tooltip: 'collapse the window',
handler : function() {
}
}, {
type : 'down',
tooltip: 'close the window',
handler : function() {
}
}, {
type : 'expand',
tooltip: 'close the window',
handler : function() {
}
}, {
type : 'gear',
tooltip: 'close the window',
handler : function() {
}
}, {
type : 'help',
tooltip: 'close the window',
handler : function() {
}
}, {
type : 'left',
tooltip: 'close the window',
handler : function() {
}
}, {
type : 'maximize',
tooltip: 'close the window',
handler : function() {
}
}, {
type : 'minimze',
tooltip: 'close the window',
handler : function() {
}
}, {
type : 'minus',
tooltip: 'close the window',
handler : function() {
}
}, {
type : 'next',
tooltip: 'close the window',
handler : function() {
}
}, {
type : 'pin',
tooltip: 'close the window',
handler : function() {
}
}, {
type : 'plus',
tooltip: 'close the window',
handler : function() {
}
}, {
type : 'prev',
tooltip: 'close the window',
handler : function() {
}
}, {
type : 'print',
tooltip: 'close the window',
handler : function() {
}
}, {
type : 'refresh',
tooltip: 'close the window',
handler : function() {
}
}, {
type : 'restore',
tooltip: 'close the window',
handler : function() {
}
}, {
type : 'right',
tooltip: 'close the window',
handler : function() {
}
}, {
type : 'save',
tooltip: 'close the window',
handler : function() {
}
}, {
type : 'search',
tooltip: 'close the window',
handler : function() {
}
}, {
type : 'toggle',
tooltip: 'close the window',
handler : function() {
}
}, {
type : 'unpin',
tooltip: 'close the window',
handler : function() {
}
}, {
type : 'up',
tooltip: 'close the window',
handler : function() {
}
}]
});


});
分享到：
| extjs4.1 几种绘图
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    ExtJs4.1中文API离线BS版

    这个“ExtJs4.1中文API离线BS版”提供了完整的中文文档，方便开发者在没有网络连接或者网络环境不稳定的情况下查阅。 1. **EXTJS4.1中文API**： ExtJS 4.1的中文API文档包含了框架的所有类、方法、属性和事件，这...

    Extjs4.1 小例子（适合extjs初学者学习使用）

    标题中的"Extjs4.1 小例子"意味着这个压缩包包含了一些基础的示例代码，旨在帮助初学者快速入门。通过这些小例子，你可以了解如何使用ExtJS 4.1来创建用户界面，包括布局管理、组件系统、数据绑定、事件处理等核心...

    extjs4.1中文文档

    extjs4.1的中文文档，可以方便查看API

    ExtJs4.1 正式版

    ExtJs4.1 正式版，考虑到官网速度慢，放上来服务大家！

    ExtJs 4.1 中文版api

    Extjs 4.1中文版api，非常难得的一款4.1的中文api，值得大家收藏

    ExtJS 4.1 中文版API帮助文档下载

    ExtJS 4.1 中文版API [脚本娃娃---开源文档翻译组]历时一年多完整翻译。 在此友情扩散下载，非常完整详细！ 学习ExtJS必备的帮助文档,而且对其中的API进行了汉化,更有利于ExtJS的学习！

    Extjs4.1中文API指南.chm

    Extjs4.1中文API.chm

    ExtJS4.1学习心得及源码

    ExtJS4.1学习心得及源码 目录 一、安装与配置 二、第一个ExtJS例子 三、表格 四、从XML读取数据表格 五、按钮 六、ComboBox控件 七、Panel面板 八、Viewport 九、表单Form 十、窗口 十一、消息对话框 十二...

    extjs4.1修改bug版本

    extjs4.1修改bug版本,已修改数字、日期等多个控件的问题

    ExtJS4.1布局后台系统

    用ExtJS4.1布局后台系统,这个是自写的js,extjs4.1的源码包，需要到extjs.org.cn下载。

    100行代码解决ExtJs4.1合并单元格问题

    100行代码解决ExtJs4.1合并单元格问题

    extjs 4.1 beta 预览版

    EXTJS 4.1 Beta 预览版是一款先进的JavaScript框架，专用于构建富客户端Web应用程序。EXTJS的核心是其组件化的架构，提供了一系列可复用的UI组件，包括表格、面板、表单、菜单、工具栏等，使得开发者能够快速创建...

    Extjs 4.1 下拉框 Tree 的实现（mvc）

    在ExtJS 4.1中，创建一个Tree ComboBox涉及以下几个关键步骤： ##### 2.1 定义View 首先，需要定义一个Window组件作为容器，其中包含Tree ComboBox。代码示例中的`MyApp.view.chainDatastatistics....

    无需积分，ExtJs权威指南第一部分(ExtJs4.1)

    无需积分，ExtJs权威指南第一部分(ExtJs4.1)，请两部分都下载完成后解压

    extjs4.1所需包

    标题"extjs4.1所需包"指的是这个压缩包包含了ExtJS 4.1版本开发所需的全部或部分核心文件和资源。 在描述中提到"使用ExtJS4 1所需要的支持文件夹亲测有用"，这意味着这个压缩包包含的文件已经过实际测试，确保它们...

    ExtJS4.1实现的mvc模式经典入门案例

    总结，本案例"ExtJS4.1实现的mvc模式经典入门案例"旨在帮助新手理解如何在ExtJS中使用MVC模式构建应用。通过模型管理数据，视图展示数据，控制器处理用户交互，以及存储与服务器通信，开发者可以构建出复杂且易于...

    ExtJS 4.1中文版帮助文档

    学习ExtJS必备的帮助文档，而且对其中的API进行了汉化，更有利于ExtJS的学习。

    extjs4.1主题皮肤

    使用EXTJS 4.1皮肤的步骤通常包括以下几步： 1. **导入皮肤**：将压缩包中的皮肤文件解压，并确保它们位于EXTJS库的正确目录下，通常是resources/skins目录。 2. **设置皮肤**：在应用程序配置中指定要使用的皮肤...

    ExtJS4.1API

    EXTJS4.1API中文版，适合于4.x各版本通用，简单易懂，对于英语能力不是非常好的开发者可以借鉴。

    ExtJs4.1+Jbpm4+SSH2+Oracle10g实际项目源码

    ExtJs4.1+Jbpm4+SSH2+Oracle10g视频教程 视频教程正在上传中！先共享代码，有了代码，还买啥教程额！ SSH2+JBPM+ExtJs4实战,JBPM是重点讲解。实战与demo的区别我不再多说，在以前工作中走过一些弯路，一些实现都是...

Magicbox
Global site tag (gtag.js) - Google Analytics