感觉Ext好像和Swing好像啊,它的容器啊,布局啊,监听器什么的,也许当初开发Ext的时候就是参考了Swing的设计吧!看官方的api时,发现关于容器的操作有好多的属性可供选择的,一口气把它们看完了,对各个属性大概的了解了下!下面是一些示例代码,基本上是访api里面的例子写的!留个示供以后参考!
Container:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>01.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<link rel="stylesheet" type="text/css" href="/ext/ext4/resources/css/ext-all.css"/>
<script type="text/javascript" src="/ext/ext4/ext-all-debug.js"></script>
<script type="text/javascript">
Ext.onReady(function() {
Ext.create("Ext.container.Container",{
layout: "hbox",//布局
width:500,
border:1,
renderTo:Ext.getBody(),//指明上层容器
style: {borderColor:"#f00", borderStyle:"solid", borderWidth:"1px"},
defaults: {
xtype: "datefield",//默认的组件类型
labelWidth: 100,
style: {
padding:"10px"
}
},
items: [{
xtype: "datefield",
name: "startDate",
fieldLabel: "start Date"
},{
xtype: "datefield",
name: "endDate",
fieldLabel: "end Date"
}]
});
});
</script>
</head>
<body>
</body>
</html>
Viewport:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>01.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<link rel="stylesheet" type="text/css" href="/ext/ext4/resources/css/ext-all.css"/>
<script type="text/javascript" src="/ext/ext4/ext-all-debug.js"></script>
<script type="text/javascript">
Ext.onReady(function() {
Ext.create("Ext.container.Viewport",{
layout: "border",//布局,单个容器可以使用fit来填满窗口,当需要将当前容器突显的时候可以使用card
width:500,
renderTo:Ext.getBody(),//指明上层容器
items: [{
region: "north",
html: "<h2>Hello World!</h2>",
autoHeight: true,
border: false
},{
region: "west",
title: "navigation",
width: 200,
collapsible: true//是否有隐藏的小三角形按钮
},{
region: "east",
title: "east",
width: 200
},{
region: "center",
title: "default panel",
items: {
title: "default tab",
html: "others can add dynamicly!"
}
},{
region: "south",
title: "south",
height: 200
}]
});
});
</script>
</head>
<body>
</body>
</html>
ButtonGroup:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>03_ButtonGroup.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<link rel="stylesheet" type="text/css" href="/ext/ext4/resources/css/ext-all.css"/>
<script type="text/javascript" src="/ext/ext4/ext-all-debug.js"></script>
<script type="text/javascript">
Ext.onReady(function() {
Ext.create('Ext.panel.Panel', {
title: 'Panel with ButtonGroup',
width: 300,
height:200,
renderTo: document.body,
html: 'HTML Panel Content',
tbar: [{//topBar,相当于顶部的工具栏
xtype: 'buttongroup',
columns: 3,
title: 'Clipboard',
items: [{
text: 'Paste',
scale: 'large',
rowspan: 3,
iconCls: 'add',
iconAlign: 'top',
cls: 'x-btn-as-arrow'
},{
xtype:'splitbutton',
text: 'Menu Button',
scale: 'large',
rowspan: 3,
iconCls: 'add',
iconAlign: 'top',
arrowAlign:'bottom',
menu: [{text: 'Menu Item 1'}]
},{
xtype:'splitbutton', text: 'Cut', iconCls: 'add16', menu: [{text: 'Cut Menu Item'}]
},{
text: 'Copy', iconCls: 'add16'
},{
text: 'Format', iconCls: 'add16'
}]
}]
});
});
</script>
</head>
<body>
This is my HTML page. <br>
</body>
</html>