Extjs4.0学习笔记大全.docVIP

ExtJS4学习笔记(一)window的创建Extjs4,创建Ext组件有了新的方式，就是Ext.create()，而且可以使用动态加载JS的方式来加快组件的渲染，我们再也不必一次加载已经达到1MB的ext-all.js了，本文介绍如何在EXTJS4中创建一个window。代码如下： !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN /TR/xhtml1/DTD/xhtml1-transitional.dtd html xmlns=/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 ExtJS4学习笔记(二)HBox的使用要使用HBox布局方式，首先的熟悉下一下几个主要属性：一、align：字符类型，指示组件在容器内的对齐方式。有如下几种属性。 1、top（默认）：排列于容器顶端。 2、middle：垂直居中排列于容器中。 3、stretch：垂直排列且拉伸义填补容器高度 4、stretchmax:垂直拉伸，并且组件以最高高度的组件为准。二、flex:数字类型，指示组件在容器中水平呈现方式，通俗的讲，就是指示组件在容器中的相对宽度。三、pack : 字符类型，指示组件在容器的位置，有如下几种属性。 1、start（默认）：组件在容器左边 2、center：组件在容器中间 3、end：组件在容器的右边实例代码：一、HTML代码： !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN /TR/xh