Ext(2)——container
感觉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>?