`

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 几种绘图
评论
发表评论

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

相关推荐

    Extjs中布局的组合使用中文WORD版

    Extjs4.1中布局很经典，也很好用，关键是如何组合布局，组合布局，不仅要达到我们想要的界面效果，还要注意因为布局所付出的渲染代价。下面是作者经过反复调试，总结的最常用也很高效的几种组合布局。希望本文档会给...

    ext4.1登陆界面

    EXTJS4的FormPanel提供了一种组织表单元素的方式，可以添加验证规则，并能方便地与服务器通信以提交数据。 3. **数据绑定（Data Binding）**：EXTJS4支持双向数据绑定，这意味着表单字段和后台模型之间可以自动同步...

    ExtJs2.0简明教程

    面板是ExtJS中最常用的容器之一，它可以用来组织其他组件，并且支持多种布局方式。通过设置`title`、`bodyPadding`等属性来自定义面板的样式。 #### 4.2 选项面板TabPanel TabPanel是一种特殊的面板，它包含了多...

    老师整理的extjs学习笔记

    ExtJS 提供了多种布局管理器，每种布局管理器都有其特定的应用场景。布局管理器决定了容器内子项的排列方式。常见的布局管理器有： - **AnchorLayout**: 基于百分比的布局。 - **FormLayout**: 表单布局，适用于...

    Extjs4 API文档阅读（二）——MVC构架(上)

    为了解决这一问题，Extjs4引入了一种新的应用架构——MVC（Model-View-Controller）。 #### 二、Extjs4 MVC架构概述 Extjs4中的MVC架构与传统的MVC有所不同，它拥有自己独特的实现方式。下面分别介绍其三个核心...

    源码免费课程下载

    1. **布局管理**：ExtJs提供了多种布局方式，如BorderLayout、CardLayout等，能够帮助开发者灵活地组织页面结构。 2. **控件使用**：ExtJs拥有丰富的UI组件库，包括按钮、表格、树形菜单等。掌握这些控件的使用方法...

    java开发实战下载

    北风课堂提供了多个关于Java设计模式的课程，涵盖以下几种模式： - **访问者模式**：适用于需要对数据结构中的元素执行操作的情况。 - **迭代模式**：用于顺序访问聚合对象的元素，而不暴露底层表示。 - **组合...

    EXT2.0中文教程

    4.1. 不用ext的form啊，不怕错过有趣的东西吗？ 4.2. 慢慢来，先建一个form再说 4.3. 胡乱扫一下输入控件 4.4. 起点高撒，从comboBox往上蹦 4.4.1. 凭空变出个comboBox来。 4.4.2. 把select变成comboBox。 4.4.3. ...

    Ext 开发指南 学习资料

    4.1. 不用ext的form啊，不怕错过有趣的东西吗？ 4.2. 慢慢来，先建一个form再说 4.3. 胡乱扫一下输入控件 4.4. 起点高撒，从comboBox往上蹦 4.4.1. 凭空变出个comboBox来。 4.4.2. 把select变成comboBox。 4.4.3. ...

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