Extjs4,创建Ext组件有了新的方式,就是Ext.create(....),而且可以使用动态加载JS的方式来加快组件的渲染,我们再也不必一次加载已经达到1MB的ext-all.js了,本文介绍如何在EXTJS4中创建一个window。
编者注(修正于2011-7-8):代码中所有Ext.Window应该是Ext.window.Window,如果按Ext.Window的话,在某些浏览器中显示不出Window窗口,切记。。。。
代码如下:
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>窗口实例</title>
- <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
- <script type="text/javascript" src="../../bootstrap.js"></script>
- <script type="text/javascript" src="../../locale/ext-lang-zh_CN.js"></script>
- <script type="text/jscript">
- Ext.require('Ext.window');
- Ext.onReady(function(){
- Ext.create('Ext.Window',{
- width:400,
- height:230,
- //X,Y标识窗口相对于父窗口的偏移值。
- x:10,
- y:10,
- plain: true,
- //指示标题头的位置,分别为 top,bottom,left,right,默认为top
- headerPosition: 'left',
- title: 'ExtJS4 Window的创建,头在左'
- }).show();
- Ext.create('Ext.Window',{
- width:400,
- height:230,
- x:500,
- y:10,
- plain: true,
- //指示标题头的位置,分别为 top,bottom,left,right,默认为top
- headerPosition: 'right',
- title: 'ExtJS4 Window的创建,头在右'
- }).show();
- Ext.create('Ext.Window',{
- width:400,
- height:230,
- x:10,
- y:300,
- plain: true,
- //指示标题头的位置,分别为 top,bottom,left,right,默认为top
- headerPosition: 'bottom',
- title: 'ExtJS4 Window的创建,头在底'
- }).show();
- var win = Ext.create('Ext.Window',{
- width:400,
- height:230,
- x:500,
- y:300,
- plain: true,
- //指示标题头的位置,分别为 top,bottom,left,right,默认为top
- headerPosition: 'top',
- title: 'ExtJS4 Window的创建'
- });
- win.show();
- });
- </script>
- </head>
- <body>
- </body>
- </html>