个人在网上搜的ext的一些资料.docx
- 文档编号:18508404
- 上传时间:2023-08-19
- 格式:DOCX
- 页数:35
- 大小:221.78KB
个人在网上搜的ext的一些资料.docx
《个人在网上搜的ext的一些资料.docx》由会员分享,可在线阅读,更多相关《个人在网上搜的ext的一些资料.docx(35页珍藏版)》请在冰点文库上搜索。
个人在网上搜的ext的一些资料
前段时间公司让我们学习ExtJS,学习了一个礼拜,完成了个小练习,思来想去决定做个总结,但是又懒得敲word,于是就在代码上每行都加上注释,以后忘记了就翻开来看看。
在这里给出代码。
完成的功能如图所示。
Js代码
1./**
2. * 默认页面
3. *
4. * @author leaves.qq:
1330771552
5. */
6.
7.Ext.define('SupplyManagementDesktop.defaultsWindow', {
8. extend :
'Ext.ux.desktop.Module',
9.
10. requires :
['Ext.data.ArrayStore', 'Ext.util.Format', 'Ext.grid.Panel',
11. 'Ext.grid.RowNumberer', 'Ext.ux.LiveSearchGridPanel'],
12.
13. id :
'defaultsWindow-win',
14.
15. /***************************************************************************
16. * ExtJS控件使用按照如下规则。
首先,创建控件,调用Ext.create
17. * weightName:
空间命名空间,args:
空间参数,用{}包围,当做对象传入
18. *
19. * ####################################### 注意JS中有如下语法:
var object={
20. * paramter1:
value1, paramter2:
value2, paramter3:
value3 }
21. * object.paramter1可以直接获得value1 #####################################
22. *
23. * ExtJS中所有空间创建方法都如上
24. *
25. * Ext.create(String weightName,Mixed args)
26. * 所以此处args相当于一个匿名对象(没有引用),但并非真的匿名对象
27. *
28. */
29. // 初始化窗体的方法
30. init :
function() {
31. this.launcher = {
32. text :
'Defaults Window',
33. iconCls :
'icon-grid',
34. // 调用createWindow方法
35. handler :
this.createWindow,
36. scope :
this
37. // this指向Ext.define(这个方法用来声明命名空间。
)定义的命名空间
38. };
39. },// 初始化窗体的方法结束
40.
41. // 创建窗体的方法
42. createWindow :
function() {
43. // 下面进行预定义。
就好像C里面的 先定义后使用。
不然后定义的在前面使用会认为未初始化。
(猜测:
可能不跟JS一样,属于ExtJS的语法)
44. var dataPanel;// 预定义一个GridPanel,用来显示数据
45. var innerPanel;// 存放Panel的容器
46. var workerPanel;
47. var westPanel;
48. var deptStore;
49. var moduleObj = this;// 创建windows窗体的时获取下本身的环境,此处不能确定,这个this是指向Ext.define还是指向创建的这个窗体
50. var desktop = this.app.getDesktop();
51.
52. // 获取窗体,外部最大窗体,具体方法不清楚。
53. var win = desktop.getWindow('defaultsWindow-win');
54.
55. // 创建按钮bar组件,是上面的几个按钮。
56. var buttonBar = Ext.create('Ext.toolbar.Toolbar', {
57. dock :
'top',
58. items :
[{
59. xtype :
'button',
60. text :
'新建',
61. iconCls :
'add',
62. handler :
function() {
63. // 自行新建操作,传入一个create字符串用来标示是什么按钮事件,传入dataPanel(注意:
上面没有var
64. // dataPanel;此处会报错。
)因为后面的新建需要用到表格显示的数据(dataPanel.getSelectionModel().getSelection())
65. moduleObj.proAction("create", dataPanel,
66. workerPanel);
67. }
68. }, {
69. // 分隔符,不解释。
70. xtype :
'tbseparator'
71. }, {
72. xtype :
'button',
73. text :
'删除',
74. iconCls :
'remove',
75. handler :
function() {
76. moduleObj.proAction("delete", dataPanel);
77. }
78. }, {
79. xtype :
'tbseparator'
80. }, {
81. xtype :
'button',
82. text :
'复制',
83. iconCls :
'copy',
84. handler :
function() {
85. moduleObj.proAction("copy", dataPanel, workerPanel);
86. }
87. }, {
88. xtype :
'button',
89. text :
'重置检索',
90. iconCls :
'reset',
91. handler :
function() {
92. dataPanel.resetSearch();
93. }
94. }]
95. });// 创建按钮bar组件结束
96.
97. // 临时创建的一个用来展示的store
98. var theStore = Ext.create('Ext.data.Store', {
99. fields :
[{
100. name :
'projectId',
101. type :
'String'
102. }, {
103. name :
'projectCode',
104. type :
'String'
105. }, {
106. name :
'projectName',
107. type :
'String'
108. }, {
109. name :
'startDate',
110. type :
'String'
111. }, {
112. name :
'endDate',
113. type :
'string'
114. }, {
115. name :
'qualityTarget',
116. type :
'string'
117. }, {
118. name :
'projectLeader',
119. type :
'string'
120. }, {
121. name :
'projectStatus',
122. type :
'string'
123. }, {
124. name :
'qualification',
125. type :
'string'
126. }, {
127. name :
'constructionUnit',
128. type :
'string'
129. }],
130. pageSize :
20,// 每页显示数量。
此处设置可以在向后台申请数据的时候“自动”传参一个
131. // limit和satrt,start不需要指定ExtJS会自动计算,然后传值。
132. proxy :
{
133. type :
'ajax',// 使用传输方式为ajax(ajax是异步执行的操作,即不需要刷新页面即可申请后台资源。
)
134. method :
'POST',// post和get是HTML中表单(form)提交两种方式,get会在地址栏显示参数,post不显示
135. url :
'/Training/myProjectInfoController/getAllProjectInfo.action?
deptId='
136. + 0,
137.
138. reader :
{// 设置读取方式属性
139. type :
'json',// 设置读取方式格式为:
json字符串
140. root :
'root',// 设置根元素,即读取上面fields种的name中对应值的元素,此处多为元素组,json字符串如:
{A:
a,B:
[{},{},{},………………]}
141. totalProperty :
'totalProperty'// 设置总页码
142. }
143. },
144. autoLoad :
true
145. // 自动读取,即显示绑定该store的组件的时候直接读取数据
146. });
147. // 创建临时Store结束
148.
149. // 创建分页bar组建
150. var pagebar = Ext.create('Ext.toolbar.Paging', {
151. pageSize :
20,
152. store :
theStore,
153. dock :
'bottom',
154. setActive :
false,
155. refresh :
false,
156. displayInfo :
true,
157. plugins :
Ext.create('Ext.ux.ProgressBarPager', {})
158. });
159. // 创建分页bar组建结束
160.
161. // 为theGirdPanel创建一个SelectionModel
162. var selectionModeltoGridPanel = Ext
163. .create('Ext.selection.CheckboxModel'); // 想要能进行选择或者多选,就需要设置selModel属性这是设置selection的模型,创建一个模型Ext.selection.CheckboxModel
164. // 初始化gridPanel
165. dataPanel = Ext.create('Ext.ux.LiveSearchGridPanel', {
166. title :
'工程详细信息',
167. region :
'center',
168. width :
'100%',
169. height :
'96%',
170. store :
theStore,
171. selModel :
selectionModeltoGridPanel,
172. // 一系列行,不解释,也可以var column=[`````````]然后columns:
column
173. iconCls :
'remove',
174. columns :
[{
175. dataIndex :
'projectId',
176. width :
80,
177. text :
'项目号'
178. }, {
179. dataIndex :
'projectCode',
180. width :
80,
181. text :
'项目序号'
182. }, {
183. dataIndex :
'projectName',
184. width :
100,
185. text :
'项目名称'
186. }, {
187. dataIndex :
'constructionUnit',
188. width :
100,
189. text :
'建设单位'
190. }, {
191. dataIndex :
'startDate',
192. width :
80,
193. text :
'开工日期'
194. }, {
195. dataIndex :
'endDate',
196. width :
80,
197. text :
'竣工日期'
198. }, {
199. dataIndex :
'qualityTarget',
200. width :
100,
201. text :
'质量目标'
202. }, {
203. dataIndex :
'projectLeader',
204. width :
100,
205. text :
'项目负责人'
206. }, {
207. dataIndex :
'projectStatus',
208. width :
80,
209. text :
'项目状态'
210. }, {
211.
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 个人 网上 ext 一些 资料
![提示](https://static.bingdoc.com/images/bang_tan.gif)