ExtJS4学习笔记之window的创建

Extjs4,创建Ext组件有了新的方式，就是Ext.create(....)，而且可以使用动态加载JS的方式来加快组件的渲染，我们再也不必一次加载已经达到1MB的ext-all.js了，本文介绍如何在EXTJS4中创建一个window。

代码如下：

1. "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2. "http://www.w3.org/1999/xhtml">
4. "Content-Type" content="text/html; charset=utf-8" />
6. "stylesheet" type="text/css" href="http://www.cnblogs.com/resources/css/ext-all.css" />
7. "text/javascript" src="http://www.cnblogs.com/bootstrap.js">
8. "text/javascript" src="http://www.cnblogs.com/locale/ext-lang-zh_CN.js">
9. "text/jscript">
10. Ext.require('Ext.window');
11. Ext.onReady(function(){
12.   Ext.create('Ext.Window',{
13.     width:400,
14.     height:230,
15.     //X,Y标识窗口相对于父窗口的偏移值。
16.     x:10,
17.     y:10,
18.     plain: true,
19.     //指示标题头的位置,分别为 top,bottom,left,right,默认为top
20.     headerPosition: 'left',
21.     title: 'ExtJS4 Window的创建，头在左'
22.   }).show();
23.   
24.   Ext.create('Ext.Window',{
25.     width:400,
26.     height:230,
27.     x:500,
28.     y:10,
29.     plain: true,
30.     //指示标题头的位置,分别为 top,bottom,left,right,默认为top
31.     headerPosition: 'right',
32.     title: 'ExtJS4 Window的创建，头在右'
33.   }).show();
34.   
35.   Ext.create('Ext.Window',{
36.     width:400,
37.     height:230,
38.     x:10,
39.     y:300,
40.     plain: true,
41.     //指示标题头的位置,分别为 top,bottom,left,right,默认为top
42.     headerPosition: 'bottom',
43.     title: 'ExtJS4 Window的创建，头在底'
44.   }).show();
45.   var win = Ext.create('Ext.Window',{
46.     width:400,
47.     height:230,
48.     x:500,
49.     y:300,
50.     plain: true,
51.     //指示标题头的位置,分别为 top,bottom,left,right,默认为top
52.     headerPosition: 'top',
53.     title: 'ExtJS4 Window的创建'
54.   });
55.   win.show();
56. });