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>