Ext(2)——container

最新推荐文章于 2021-04-19 00:09:01 发布

iteye_13139

最新推荐文章于 2021-04-19 00:09:01 发布

阅读量128

点赞数

分类专栏： extjs4 文章标签： EXT CSS JavaScript HTML Swing ViewUI

本文链接：https://blog.csdn.net/iteye_13139/article/details/82068979

版权

extjs4 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

感觉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>

iteye_13139

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Ext(2)——container

感觉Ext好像和Swing好像啊，它的容器啊，布局啊，监听器什么的，也许当初开发Ext的时候就是参考了Swing的设计吧！看官方的api时，发现关于容器的操作有好多的属性可供选择的，一口气把它们看完了，对各个属性大概的了解了下！下面是一些示例代码，基本上是访api里面的例子写的！留个示供以后参考！ Container:&lt;!DOCTYPE HTML PUBLIC "-//W3C//...
复制链接

扫一扫