Extjs40学习笔记大全Word文档格式.docx
《Extjs40学习笔记大全Word文档格式.docx》由会员分享，可在线阅读，更多相关《Extjs40学习笔记大全Word文档格式.docx（29页珍藏版）》请在冰豆网上搜索。
/script>
../../locale/ext-lang-zh_CN.js"
text/jscript"
Ext.require（'
Ext.window'
）;
Ext.onReady（function（）{
Ext.create（'
Ext.Window'
{
width:
400,
height:
230,
//X,Y标识窗口相对于父窗口的偏移值。
x:
10,
y:
plain:
true,
//指示标题头的位置,分别为top,bottom,left,right,默认为top
headerPosition:
'
left'
title:
ExtJS4Window的创建，头在左'
}）.show（）;
500,
right'
ExtJS4Window的创建，头在右'
300,
bottom'
ExtJS4Window的创建，头在底'
varwin=Ext.create（'
top'
ExtJS4Window的创建'
}）;
win.show（）;
}）;
/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代码：
charset=gb2312"
HBox实例--<
hbox.js"
divid="
d1"
/div>
d2"
d3"
vard1=Ext.create（'
Ext.Panel'
'
HBox顶对齐，且组件在容器的左边'
frame:
true,
600,
100,
items:
[{
anchor:
100%'
layout:
{
type:
hbox'
padding:
10'
pack:
start'
align:
},
defaults:
{margins:
0500'
},
xtype:
button'
text:
Button1'
},{
Button2'
Button3'
Button4'
}]
}）
d1.render（'
d1'
vard2=Ext.create（'
HBox垂直对齐，且组件在容器的右边'
middle'
end'
d2.render（'
d2'
vard3=Ext.create（'
HBox垂直水平居中，并且所有控件高度为最高控件的高度'
5'
stretchmax'
center'
SmallSize'
scale:
medium'
MediumSize'
large'
LargeSize'
d3.render（'
d3'
}）
}）
d1.render（'
vard2=Ext.create（'
d2.render（'
vard3=Ext.create（'
}）
d3.render（'
最后是效果图：
另外多种的布局方式，大家自己尝试就OK了。
ExtJS4学习笔记（三）---VBox的使用
要使用VBox布局方式，首先的熟悉下一下几个主要属性：
1、left（默认）：
排列于容器左侧。
2、center：
控件在容器水平居中。
控件横向拉伸至容器大小
控件横向拉伸，宽度为最宽控件的宽。
组件在容器上边
组件在容器的下边
VBox---<
vbox.js"
styletype="
html,body{
font:
normal12pxverdana;
margin:
0;
border:
0none;
}
/style>
ExtJS4学习笔记（四）---Grid的使用
Extjs4Grid创建还是比较容易的，难记、难理解的地方，也就是数据的获取。
下面，就创建一个最简单的Grid组件，后面，我们会逐渐丰富这个Grid的功能。
HTML代码：
1<
2<
3<
4<
5<
Grid-<
6<
7<
8<
9<
grid.js"
10<
11
12<
13<
demo"
14<
15<
复制代码
grid.js：
16Ext.require（[
17'
Ext.grid.*'
18'
Ext.data.*'
19]）;
20Ext.onReady（function（）{
21Ext.define（'
MyData'
22extend:
Ext.data.Model'
23fields:
[
24//第一个字段需要指定mapping，其他字段，可以省略掉。
25{name:
UserName'
mapping:
26'
Sex'
27'
Age'
28'
XueHao'
29'
BanJi'
30]
31}）;
32
33//创建数据源
34varstore=Ext.create（'
Ext.data.Store'
{
35model:
36proxy:
37//异步获取数据，这里的URL可以改为任何动态页面，只要返回JSON数据即可
38type:
ajax'
39url:
mydata.json'
40
41reader:
42type:
json'
43root:
items'
44//totalProperty:
total'
45}
46},
47autoLoad:
true
48}）;
49
50//创建Grid
51vargrid=Ext.create（'
Ext.grid.Panel'
52store:
store,
53columns:
54{text:
姓名"
width:
120,dataIndex:
sortable:
true},
55{text:
性别"
flex:
1,dataIndex:
false},
56{text:
年龄"
100,dataIndex:
57{text:
学号"
58{text:
班级"
true}
59],
60height:
61width:
480,
62x:
20,
63y:
40,
64title:
ExtJS4Grid示例'
65renderTo:
demo'
66viewConfig:
67stripeRows:
68}
69}）
70}）
71Ext.require（[
72'
73'
74]）;
75Ext.onReady（function（）{
76Ext.define（'
77extend:
78fields:
79//第一个字段需要指定mapping，其他字段，可以省略掉。
80{name:
81'
82'
83'
84'
85]
86}）;
87
88//创建数据源
89varstore=Ext.create（'
90model:
91proxy:
92//异步获取数据，这里的URL可以改为任何动态页面，只要返回JSON数据即可
93type:
94url:
95
96reader:
97type:
98root:
99//totalProperty:
100}
101},
102autoLoad:
103}）;
104
105//创建Grid
106vargrid=Ext.create（'
107store:
108columns:
109{text:
110{text:
111{text:
112{text:
sortabl
升级会员 