书签 分享 收藏 举报 版权申诉 / 29

类型Extjs40学习笔记大全.docx

  • 文档编号:6080592
  • 上传时间:2023-01-03
  • 格式:DOCX
  • 页数:29
  • 大小:37.97KB

Ext.onReady(function(){

vard1=Ext.create('Ext.Panel',{

title:

'HBox顶对齐,且组件在容器的左边',

frame:

true,

width:

600,

height:

100,

items:

[{

anchor:

'100%',

layout:

{

type:

'hbox',

padding:

'10',

pack:

'start',

align:

'top'

},

defaults:

{margins:

'0500'},

items:

[{

xtype:

'button',

text:

'Button1'

},{

xtype:

'button',

text:

'Button2'

},{

xtype:

'button',

text:

'Button3'

},{

xtype:

'button',

text:

'Button4'

}]

}]

})

d1.render('d1');

vard2=Ext.create('Ext.Panel',{

title:

'HBox垂直对齐,且组件在容器的右边',

frame:

true,

width:

600,

height:

100,

items:

[{

anchor:

'100%',

layout:

{

type:

'hbox',

padding:

'10',

align:

'middle',

pack:

'end'

},

defaults:

{margins:

'0500'},

items:

[{

xtype:

'button',

text:

'Button1'

},{

xtype:

'button',

text:

'Button2'

},{

xtype:

'button',

text:

'Button3'

},{

xtype:

'button',

text:

'Button4'

}]

}]

})

d2.render('d2');

vard3=Ext.create('Ext.Panel',{

title:

'HBox垂直水平居中,并且所有控件高度为最高控件的高度',

frame:

true,

width:

600,

height:

100,

items:

[{

anchor:

'100%',

layout:

{

type:

'hbox',

padding:

'5',

align:

'stretchmax',

pack:

'center'

},

defaults:

{margins:

'0500'},

items:

[{

xtype:

'button',

text:

'SmallSize'

},{

xtype:

'button',

scale:

'medium',

text:

'MediumSize'

},{

xtype:

'button',

scale:

'large',

text:

'LargeSize'

}]

}]

})

d3.render('d3');

})

Ext.onReady(function(){

vard1=Ext.create('Ext.Panel',{

title:

'HBox顶对齐,且组件在容器的左边',

frame:

true,

width:

600,

height:

100,

items:

[{

anchor:

'100%',

layout:

{

type:

'hbox',

padding:

'10',

pack:

'start',

align:

'top'

},

defaults:

{margins:

'0500'},

items:

[{

xtype:

'button',

text:

'Button1'

},{

xtype:

'button',

text:

'Button2'

},{

xtype:

'button',

text:

'Button3'

},{

xtype:

'button',

text:

'Button4'

}]

}]

})

d1.render('d1');

vard2=Ext.create('Ext.Panel',{

title:

'HBox垂直对齐,且组件在容器的右边',

frame:

true,

width:

600,

height:

100,

items:

[{

anchor:

'100%',

layout:

{

type:

'hbox',

padding:

'10',

align:

'middle',

pack:

'end'

},

defaults:

{margins:

'0500'},

items:

[{

xtype:

'button',

text:

'Button1'

},{

xtype:

'button',

text:

'Button2'

},{

xtype:

'button',

text:

'Button3'

},{

xtype:

'button',

text:

'Button4'

}]

}]

})

d2.render('d2');

vard3=Ext.create('Ext.Panel',{

title:

'HBox垂直水平居中,并且所有控件高度为最高控件的高度',

frame:

true,

width:

600,

height:

100,

items:

[{

anchor:

'100%',

layout:

{

type:

'hbox',

padding:

'5',

align:

'stretchmax',

pack:

'center'

},

defaults:

{margins:

'0500'},

items:

[{

xtype:

'button',

text:

'SmallSize'

},{

xtype:

'button',

scale:

'medium',

text:

'MediumSize'

},{

xtype:

'button',

scale:

'large',

text:

'LargeSize'

}]

}]

})

d3.render('d3');

})

最后是效果图:

另外多种的布局方式,大家自己尝试就OK了。

ExtJS4学习笔记(三)---VBox的使用

要使用VBox布局方式,首先的熟悉下一下几个主要属性:

一、align:

字符类型,指示组件在容器内的对齐方式。

有如下几种属性。

1、left(默认):

排列于容器左侧。

2、center:

控件在容器水平居中。

3、stretch:

控件横向拉伸至容器大小

4、stretchmax:

控件横向拉伸,宽度为最宽控件的宽。

二、flex:

数字类型,指示组件在容器中水平呈现方式,通俗的讲,就是指示组件在容器中的相对宽度。

三、pack:

字符类型,指示组件在容器的位置,有如下几种属性。

1、start(默认):

组件在容器上边

2、center:

组件在容器中间

3、end:

组件在容器的下边

DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http:

//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

//www.w3.org/1999/xhtml">

VBox---

html,body{

font:

normal12pxverdana;

margin:

0;

padding:

0;

border:

0none;

}

ExtJS4学习笔记(四)---Grid的使用

Extjs4Grid创建还是比较容易的,难记、难理解的地方,也就是数据的获取。

下面,就创建一个最简单的Grid组件,后面,我们会逐渐丰富这个Grid的功能。

HTML代码:

1

DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http:

//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

2

//www.w3.org/1999/xhtml">

3

4

5Grid-

6

7

8

9

10

11

12

13

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:

'UserName'},

26'Sex',

27'Age',

28'XueHao',

29'BanJi'

30]

31});

32

33//创建数据源

34varstore=Ext.create('Ext.data.Store',{

35model:

'MyData',

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:

'UserName',sortable:

true},

55{text:

"性别",flex:

1,dataIndex:

'Sex',sortable:

false},

56{text:

"年龄",width:

100,dataIndex:

'Age',sortable:

true},

57{text:

"学号",width:

100,dataIndex:

'XueHao',sortable:

true},

58{text:

"班级",width:

100,dataIndex:

'BanJi',sortable:

true}

59],

60height:

400,

61width:

480,

62x:

20,

63y:

40,

64title:

'ExtJS4Grid示例',

65renderTo:

'demo',

66viewConfig:

{

67stripeRows:

true

68}

69})

70})

71Ext.require([

72'Ext.grid.*',

73'Ext.data.*'

74]);

75Ext.onReady(function(){

76Ext.define('MyData',{

77extend:

'Ext.data.Model',

78fields:

[

79//第一个字段需要指定mapping,其他字段,可以省略掉。

80{name:

'UserName',mapping:

'UserName'},

81'Sex',

82'Age',

83'XueHao',

84'BanJi'

85]

86});

87

88//创建数据源

89varstore=Ext.create('Ext.data.Store',{

90model:

'MyData',

91proxy:

{

92//异步获取数据,这里的URL可以改为任何动态页面,只要返回JSON数据即可

93type:

'ajax',

94url:

'mydata.json',

95

96reader:

{

97type:

'json',

98root:

'items',

99//totalProperty:

'total'

100}

101},

102autoLoad:

true

103});

104

105//创建Grid

106vargrid=Ext.create('Ext.grid.Panel',{

107store:

store,

108columns:

[

109{text:

"姓名",width:

120,dataIndex:

'UserName',sortable:

true},

110{text:

"性别",flex:

1,dataIndex:

'Sex',sortable:

false},

111{text:

"年龄",width:

100,dataIndex:

'Age',sortable:

true},

112{text:

"学号",width:

100,dataIndex:

'XueHao',sortabl

配套讲稿:

如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。

特殊限制:

部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。

关 键  词:
Extjs40 学习 笔记 大全
提示  冰豆网所有资源均是用户自行上传分享,仅供网友学习交流,未经上传用户书面授权,请勿作他用。
关于本文
本文标题:Extjs40学习笔记大全.docx
链接地址:https://www.bdocx.com/doc/6080592.html
关于我们 - 网站声明 - 网站地图 - 资源地图 - 友情链接 - 网站客服 - 联系我们

copyright@ 2008-2022 冰点文档网站版权所有

经营许可证编号:鄂ICP备2022015515号-1

收起
展开