5.初学ExtJs——Ext.window.Window

最新推荐文章于 2017-12-01 23:12:06 发布

木子_lishk

最新推荐文章于 2017-12-01 23:12:06 发布

阅读量606

点赞数

实例：

<html>
<head>
<meta http-equiv="Content-Type" content ="text/html";charset="utf-8" />
<title>ExtJS</title>
<link rel="stylesheet" type="text/css" href="resources/css/ext-all.css" />
<script type="text/javascript" src="ext-all.js"></script>
<script type="text/javascript" src="ext-lang-zh_CN.js" charset="utf-8"></script>

<script>
Ext.onReady(function(){
	var win = Ext.create('Ext.window.Window', 
	{//花括号中为第二个参数
		title: '示例窗口',
		width: 300,
		height: 200
	});
	win.show();
})
</script>

</head>
<body>
    
</body>
</html>

运行结果：

示例：

<html>
<head>
<meta http-equiv="Content-Type" content ="text/html";charset="utf-8" />
<title>ExtJS</title>
<link rel="stylesheet" type="text/css" href="resources/css/ext-all.css" />
<script type="text/javascript" src="ext-all.js"></script>
<script type="text/javascript" src="ext-lang-zh_CN.js" charset="utf-8"></script>

<script>
Ext.onReady(function(){
    var btn = Ext.get('btn');
    btn.on('click',function()
	{
		//需添加该条件，否则多次点击btn控件时窗口重叠混乱
		if(!Ext.getCmp('mywin'))
		{
			Ext.create('Ext.window.Window',
			{
				title:'我是添加的窗口组件',
				id:'mywin',
				width:400,
				height:300,
				renderTo:Ext.getBody()
			}).show();
		}
    });
})
</script>

</head>
<body>
    <input type="button" id="btn" value="点击"/>
</body>
</html>

运行结果：