Ext学习笔记(4):容器Demo

最新推荐文章于 2023-06-03 00:28:17 发布

洛枫偃月

最新推荐文章于 2023-06-03 00:28:17 发布

阅读量626

点赞数

分类专栏： Js/Jquery

本文链接：https://blog.csdn.net/zgs_shmily/article/details/10681125

版权

Js/Jquery 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

<html>
<head>
<!-- Ext容器Demo -->
<script src="js/ext-all.js"></script>
<link href="css/ext-theme-gray-all.css" type="text/css" rel="stylesheet" />
<script type="text/javascript">
	Ext.onReady(function() {
		Ext.create('Ext.container.Container', {
		    layout: {
		    	/* 布局可选： vbox(纵向)、hbox（水平）*/
		        type: 'vbox'
		    },
		    shadow:true,
		    floating: true,/* 在该容器中需要指定为true时才能进行拖动 */
		    /* 拖动范围：任意 */
		    draggable:true,/* 设置为true时该容器能够进行拖动 */ 
		    /* 在指定范围内拖动 */
		    constrain: true, /*拖动限制在这个组件组件中，即 loadcontainer中，默认为false*/
		    width: 400,
		    renderTo: Ext.DomQuery.selectNode("div[@id='loadcontainer']"),
		    border: 1,
		    style: {borderColor:'#C0C0C0', borderStyle:'solid', borderWidth:'1px'},
		    items: [{
		        xtype: 'datefield',
		        name: 'startDate',
		        fieldLabel: 'Start date'
		    },{
		        xtype: 'datefield',
		        name: 'endDate',
		        fieldLabel: 'End date'
		    }]
		});
	});
</script>
</head>
<body>
	<br>
	<div id="loadcontainer" style="margin-left: 100px;">
	</div>
	<br>	
</body>
</html>

洛枫偃月

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Ext学习笔记(4):容器Demo

Ext.onReady(function() { Ext.create('Ext.container.Container', { layout: { /* 布局可选： vbox(纵向)、hbox（水平）*/ type: 'vbox' }, shadow:true, floating: true,/* 在该容器中需
复制链接

扫一扫