Ext-Layout
<%
/**
* @author lzb
* Created on 2008-12-11
* 练习使用Ext-tree
*
*/
%>
<%@ page contentType="text/html; charset=UTF-8" %>
<%@ include file="http://www.cnblogs.com/http://www.cnblogs.com/../common/common_page.jsp" %>
<html>
<head>
<title>练习使用Ext-layout</title>
<!-- Ext css -->
<link rel="stylesheet" type="text/css" href="http://www.cnblogs.com/../resources/css/ext-all.css"/>
<link rel="stylesheet" type="text/css" href="../forms.css"/>
<link rel="stylesheet" type="text/css" href="http://www.cnblogs.com/examples.css"/>
<!-- Ext js -->
<script type="text/javascript" src="http://www.cnblogs.com/../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="http://www.cnblogs.com/../ext-all.js"></script>
<script type="text/javascript" src="http://www.cnblogs.com/../source/locale/ext-lang-zh_CN.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
new Ext.Panel({
renderTo:"layout",
width:window.screem,
height:200,
layout:"column",
items:[{columnWidth:.5,
title:"面板1"},
{columnWidth:.5,
title:"面板2"}]
});
});
//Border区域布局
//由类Ext.layout.BorderLayout定
Ext.onReady(function(){
new Ext.Viewport({
layout:"border",
items:[
{
region:"north",
height:50,
title:"顶部面板"
},{
region:"south",
height:50,
title:"底部面板"
},{
region:"center",
title:"中央面板"
},{
region:"west",
width:100,
title:"左边面板"
},{
region:"east",
width:100,
title:"右边面板"
}]
});
});
//Column 列布局由Ext.layout.ColumnLayout 类定
//columnWidth 表示使用百分比的形式指定列宽度，而width 则是使用绝对象素的方式指定列宽度
Ext.onReady(function(){
new Ext.Panel({
renderTo:"Column",
title:"容器组件",
layout:"column",
columnWidth:100,
columnWidth:100,
items:[
{title:"列1",width:100},
{title:"列2",width:200},
{title:"列3",width:100},
{title:"列4"}
]
});
});
//Fit如果容器组件中有多个子元素，则只会显示一个元素
//如果不使用布局Fit,将显示所有的元素
Ext.onReady(function(){
new Ext.Panel({
renderTo:"Fit",
title:"容器组件",
layout:"fit",
width:500,
height:100,
items:[{title:"子元素",html:"这是子元素中的内容"},
{title:"子元素2",html:"这是子元素2中的内容"}
]}
);
});
//Form 布局由类Ext.layout.FormLayout 定义
Ext.onReady(function(){
new Ext.Panel({
renderTo:"Form",
title:"容器组件",
width:300,
layout:"form",
hideLabels:false,
labelAlign:"right",
height:120,
defaultType: 'textfield',
items:[
{fieldLabel:"请输入姓名",name:"name"},
{fieldLabel:"请输入地址",name:"address"},
{fieldLabel:"请输入电话",name:"tel"}
]}
);
});
//Accordion布局由类Ext.layout.Accordion 定义，名称为accordion，表示可折叠的布局
Ext.onReady(function(){
new Ext.Panel({
renderTo:"Accordion",
title:"容器组件",
width:500,
height:200,
layout:"accordion",
layoutConfig: {
animate: true
},
items:[{title:"子元素1",html:"这是子元素1中的内容"},
{title:"子元素2",html:"这是子元素2中的内容"},
{title:"子元素3",html:"这是子元素3中的内容"}
]
});
});
//Table布局 该布局负责把容器中的子元素按照类似普通html 标签
Ext.onReady(function(){
var panel=new Ext.Panel({
renderTo:"table",
title:"容器组件",
width:500,
height:200,
layout:"table",
layoutConfig: {
columns: 3
},
items:[{title:"子元素1",html:"这是子元素1中的内容",rowspan:2,height:100},
{title:"子元素2",html:"这是子元素2中的内容",colspan:2},
{title:"子元素3",html:"这是子元素3中的内容"},
{title:"子元素4",html:"这是子元素4中的内容"}
]
});
});
</script>
</head>
<body>
<div style="display:none" id="layout"></div>
<div id="border"></div>
<div id="Column"></div>
<div id="Fit"></div>
<div id="Form"></div>
<div id="Accordion"></div>
<div id="table"></div>
</body>
</HTML>
/**
* @author lzb
* Created on 2008-12-11
* 练习使用Ext-tree
*
*/
%>
<%@ page contentType="text/html; charset=UTF-8" %>
<%@ include file="http://www.cnblogs.com/http://www.cnblogs.com/../common/common_page.jsp" %>
<html>
<head>
<title>练习使用Ext-layout</title>
<!-- Ext css -->
<link rel="stylesheet" type="text/css" href="http://www.cnblogs.com/../resources/css/ext-all.css"/>
<link rel="stylesheet" type="text/css" href="../forms.css"/>
<link rel="stylesheet" type="text/css" href="http://www.cnblogs.com/examples.css"/>
<!-- Ext js -->
<script type="text/javascript" src="http://www.cnblogs.com/../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="http://www.cnblogs.com/../ext-all.js"></script>
<script type="text/javascript" src="http://www.cnblogs.com/../source/locale/ext-lang-zh_CN.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
new Ext.Panel({
renderTo:"layout",
width:window.screem,
height:200,
layout:"column",
items:[{columnWidth:.5,
title:"面板1"},
{columnWidth:.5,
title:"面板2"}]
});
});
//Border区域布局
//由类Ext.layout.BorderLayout定
Ext.onReady(function(){
new Ext.Viewport({
layout:"border",
items:[
{
region:"north",
height:50,
title:"顶部面板"
},{
region:"south",
height:50,
title:"底部面板"
},{
region:"center",
title:"中央面板"
},{
region:"west",
width:100,
title:"左边面板"
},{
region:"east",
width:100,
title:"右边面板"
}]
});
});
//Column 列布局由Ext.layout.ColumnLayout 类定
//columnWidth 表示使用百分比的形式指定列宽度，而width 则是使用绝对象素的方式指定列宽度
Ext.onReady(function(){
new Ext.Panel({
renderTo:"Column",
title:"容器组件",
layout:"column",
columnWidth:100,
columnWidth:100,
items:[
{title:"列1",width:100},
{title:"列2",width:200},
{title:"列3",width:100},
{title:"列4"}
]
});
});
//Fit如果容器组件中有多个子元素，则只会显示一个元素
//如果不使用布局Fit,将显示所有的元素
Ext.onReady(function(){
new Ext.Panel({
renderTo:"Fit",
title:"容器组件",
layout:"fit",
width:500,
height:100,
items:[{title:"子元素",html:"这是子元素中的内容"},
{title:"子元素2",html:"这是子元素2中的内容"}
]}
);
});
//Form 布局由类Ext.layout.FormLayout 定义
Ext.onReady(function(){
new Ext.Panel({
renderTo:"Form",
title:"容器组件",
width:300,
layout:"form",
hideLabels:false,
labelAlign:"right",
height:120,
defaultType: 'textfield',
items:[
{fieldLabel:"请输入姓名",name:"name"},
{fieldLabel:"请输入地址",name:"address"},
{fieldLabel:"请输入电话",name:"tel"}
]}
);
});
//Accordion布局由类Ext.layout.Accordion 定义，名称为accordion，表示可折叠的布局
Ext.onReady(function(){
new Ext.Panel({
renderTo:"Accordion",
title:"容器组件",
width:500,
height:200,
layout:"accordion",
layoutConfig: {
animate: true
},
items:[{title:"子元素1",html:"这是子元素1中的内容"},
{title:"子元素2",html:"这是子元素2中的内容"},
{title:"子元素3",html:"这是子元素3中的内容"}
]
});
});
//Table布局 该布局负责把容器中的子元素按照类似普通html 标签
Ext.onReady(function(){
var panel=new Ext.Panel({
renderTo:"table",
title:"容器组件",
width:500,
height:200,
layout:"table",
layoutConfig: {
columns: 3
},
items:[{title:"子元素1",html:"这是子元素1中的内容",rowspan:2,height:100},
{title:"子元素2",html:"这是子元素2中的内容",colspan:2},
{title:"子元素3",html:"这是子元素3中的内容"},
{title:"子元素4",html:"这是子元素4中的内容"}
]
});
});
</script>
</head>
<body>
<div style="display:none" id="layout"></div>
<div id="border"></div>
<div id="Column"></div>
<div id="Fit"></div>
<div id="Form"></div>
<div id="Accordion"></div>
<div id="table"></div>
</body>
</HTML>
浙公网安备 33010602011771号