Ext如何动态添加一行组件
用的column布局,点击一个按钮能添加一行组件，如文本框，有下拉框等。
如：
效果：
实现方法如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
|
/*! * Ext JS Library 3.4.0 * Copyright(c) 2006-2011 Sencha Inc. * licensing@sencha.com */Ext.onReady(function(){ // 添加按钮 var newDept_action = new Ext.Action({ cls: 'x-btn-text-icon bmenu', icon: 'icon-add', text: '添加新的部门(新的一行)', handler: function(){ id = id + 1; //添加新的fieldSet var org_fieldSet = new Ext.Panel({ //column布局控件开始 id: 'org_fieldSet_' + id, layout: 'column', border: false, items: [//组件开始 { columnWidth: .2, layout: 'form', border: false, items: [{ //为空 blankText: '组织名称不能为空', emptyText: '', editable: false, triggerAction: 'all', allowBlank: false, //为空 xtype: 'textfield', fieldLabel: '组织名称', id: 'org_field_orgName_' + id, name: 'org_field_orgName_' + id, anchor: '90%' }] } //组件结束, //组件开始 { columnWidth: .2, layout: 'form', border: false, items: [{ //为空 blankText: '上级部门不能为空', emptyText: '', editable: false, triggerAction: 'all', allowBlank: false, //为空 xtype: 'textfield', fieldLabel: '上级部门', id: 'org_field_orgParent_' + id, anchor: '90%' }] } //组件结束, //按钮开始 { columnWidth: .2, layout: 'form', border: false, items: [{ xtype: 'button', text: '选择上级部门', scope: this, handler: function(){ } }] } //按钮结束, //组件开始 { columnWidth: .2, layout: 'form', border: false, items: [{ //为空 blankText: '上级部门不能为空', emptyText: '', editable: false, triggerAction: 'all', allowBlank: false, //为空 //xtype: 'hidden', xtype: 'textfield', fieldLabel: '本部门ID', value: 'org_field_orgId_' + id, anchor: '90%' }] } //组件结束, //按钮开始 { columnWidth: .2, layout: 'form', border: false, items: [{ xtype: 'button', text: '删除', value: id, scope: this, handler: function(obj){ var del_id = obj.value; //var field_1 = Ext.getCmp('org_field_orgName_' + del_id); var fieldSet_1 = Ext.getCmp('org_fieldSet_' + del_id); //删除一行 simple.remove(fieldSet_1, true); } }] } //按钮结束] //column布局控件结束 }); //添加fieldSet simple.add(org_fieldSet); //重新剧新 simple.doLayout(); }, iconCls: 'blist' }); var first_Org_fieldSet = new Ext.Panel({ //column布局控件开始 id: 'org_fieldSet_' + id, layout: 'column', border: false, items: [//组件开始 { columnWidth: .2, layout: 'form', border: false, items: [{ //为空 blankText: '组织名称不能为空', emptyText: '', editable: false, triggerAction: 'all', allowBlank: false, //为空 xtype: 'textfield', fieldLabel: '组织名称', id: 'org_field_orgName_' + id, name: 'org_field_orgName_' + id, anchor: '90%' }] } //组件结束, //组件开始 { columnWidth: .2, layout: 'form', border: false, items: [{ //为空 blankText: '上级部门不能为空', emptyText: '', editable: false, triggerAction: 'all', allowBlank: false, //为空 xtype: 'textfield', fieldLabel: '上级部门', id: 'org_field_orgParent_' + id, anchor: '90%' }] } //组件结束, //按钮开始 { columnWidth: .2, layout: 'form', border: false, items: [{ xtype: 'button', text: '选择上级部门', scope: this, handler: function(){ } }] } //按钮结束, //组件开始 { columnWidth: .2, layout: 'form', border: false, items: [{ //为空 blankText: '上级部门不能为空', emptyText: '', editable: false, triggerAction: 'all', allowBlank: false, //为空 //xtype: 'hidden', xtype: 'textfield', fieldLabel: '本部门ID', value: 'org_field_orgId_' + id, anchor: '90%' }] } //组件结束, //按钮开始 { columnWidth: .2, layout: 'form', border: false, items: [{ xtype: 'button', text: '删除', value: id, scope: this, handler: function(obj){ var del_id = obj.value; //var field_1 = Ext.getCmp('org_field_orgName_' + del_id); var fieldSet_1 = Ext.getCmp('org_fieldSet_' + del_id); simple.remove(fieldSet_1, true); } }] } //按钮结束] //column布局控件结束 }); //定义表单 var simple = new Ext.FormPanel({ labelAlign: 'left', title: '添加子部门', buttonAlign: 'right', bodyStyle: 'padding:5px', //width: 600, autoHeight: true, autoWidth: true, // frame: true, labelWidth: 80, // items: [ ] , buttons: [{ text: '保存', type: 'submit', //定义表单提交事件 handler: function(){ if (simple.form.isValid()) {//验证合法后使用加载进度条 Ext.MessageBox.show({ title: '请稍等', msg: '正在加载...', progressText: '', width: 300, progress: true, closable: false, animEl: 'loding' }); //控制进度速度 var f = function(v){ return function(){ var i = v / 11; Ext.MessageBox.updateProgress(i, ''); }; }; for (var i = 1; i < 13; i++) { setTimeout(f(i), i * 150); } //提交到服务器操作 simple.form.doAction('submit', { url: newSaveOrgFrameUrl,//文件路径 method: 'post',//提交方法post或get params: '', //提交成功的回调函数 success: function(form, action){ if (action.result.msg == 'ok') { Ext.MessageBox.show({ title: '系统提示信息', msg: '添加成功!', buttons: Ext.MessageBox.OK, icon: Ext.MessageBox.INFO, fn: function(btn, text){ } }); } else { Ext.Msg.alert('添加错误', action.result.msg); } }, //提交失败的回调函数 failure: function(){ Ext.Msg.alert('错误', '服务器出现错误请稍后再试！'); } }); } } }, { text: '重置', handler: function(){ simple.form.reset(); }//重置表单 }, { text: '取消', handler: function(){ win.close(); }//重置表单 }] }); //添加第一个fieldSet simple.add(first_Org_fieldSet); //菜单面板 var panel = new Ext.Panel({ bodyStyle: 'width:100%', autoWidth: true, autoHeight: true, //autoScroll: true, renderTo: Ext.getBody(), // title: '', bodyStyle: 'padding:10px;', tbar: [{ xtype: 'tbseparator' }, newDept_action, { // <-- Add the action directly to a toolbar xtype: 'tbseparator' }], items: [simple] }); // return panel; simple.render(document.body); }); |
最后要感谢熊熊之家的博客：http://hi.baidu.com/freshman0502/blog/item/dba3a1d3742d13d8a9ec9ae7.html
Ext如何动态添加一行组件的更多相关文章
- 为表格动态添加一行，miniui组件无效
想要使用miniui实现这样的功能,点击按钮,在一个<td>中动态添加一个miniui输入框和一个按钮,结果miniui的样式无法渲染,请问这种问题可以怎么解决代码如下: <tr&g ...
- 利用jquery给指定的table动态添加一行、删除一行
转自:http://www.cnblogs.com/linjiqin/p/3148181.html $("#mytable tr").find("td:nth-child ...
- 利用jquery给指定的table动态添加一行、删除一行，复制，值不重复等操作
$("#mytable tr").find("td:nth-child(1)") 1表示获取每行的第一列$("#mytable tr").f ...
- svg web拓扑更新了，支持动态添加svg组件
版本1.0请点此 预览地址 https://svg.yaolunmao.top 如何使用 # 克隆项目 git clone https://github.com/yaolunmao/vue-webto ...
- JQUERY动态绘制表格，实现动态添加一行，删除一行
HTML部分 <table style="width: 100%;" id="TABYESTERDAY11"></table> < ...
- Js实现Table动态添加一行的小例子
<form id="form1" runat="server"> <div> <table id=" style=&qu ...
- [Irving] Ext.Net动态添加GridPanel列绑定Checkbox值失败的解决办法
var grid = X.GetCmp<GridPanel>(vm.GRID_QUOTATIONS_FEEITEM_RANGE_SHOW); grid.AddColumn(Html.X() ...
- 如何在JTable中动态添加一行
JTable tbImage = new JTable(5,5);//create a dummy tableDefaultTableModel dtm=(DefaultTableModel)tbIm ...
- MiniUI动态添加table表格
本文将介绍一下,如何用Jquery MiniUi动态添加一行table表格 1.效果展示 ↓ 2.具体代码 <script type="text/javascript"> ...
随机推荐
- 45.Jump Game II---贪心---2018大疆笔试题
题目链接 题目大意:与55题类似,只是这里要求出跳数. 法一(借鉴):贪心.cur表示当前能到达的最远距离,pre表示上一次能到达的最远距离,每到一个位置更新一次最远距离cur,如果当前位置超过了上一 ...
- Ural Sport Programming Championship 2015
Ural Sport Programming Championship 2015 A - The First Day at School 题目描述:给出课程安排,打印一个课程表. solution 暴 ...
- WPF之模拟打开或关闭Windows功能
用WPF模拟打开或关闭Windows功能的实现方法其实很简单,主要用递归判断当前节点的子节点和父节点的选中状态就行了. 一.效果演示 先看看效果图: 二.部分代码 xaml代码: <TreeVi ...
- [How to] MapReduce on HBase ----- 简单二级索引的实现
1.简介 MapReduce计算框架是二代hadoop的YARN一部分,能够提供大数据量的平行批处理.MR只提供了基本的计算方法,之所以能够使用在不用的数据格式上包括HBase表上是因为特定格式上的数 ...
- 监控MYSQL主从同步配置中监控从库运行状态的脚本
代码如下: #!/bin/bash #Check MySQL Slave's Runnning Status #Crontab time 00:10 MYSQLPORT=`netstat -na|gr ...
- 记一次spring boot中MongoDB Prematurely reached end of stream的异常解决
在spring boot项目中使用了mongodb,当一段时间没有操作mongodb,下次操作mongodb时就会出现异常.异常如下: org.springframework.data.mongodb ...
- admin组件详解
admin组件详解 先根据admin组件启动流程复习下django项目启动至请求过来发生的事 1将admin组件注册进app 2django项目启动 3在运行到定制的admin时执行其下面的apps文 ...
- Linux 基础——文件搜索命令find
一.find命令的好处 有时会经常在目录下找文件或目录的具体存放在哪,但是该目录下的文件又很多不好找出.这时并不需要手动查看所有的文件,用find命令来帮助查找就行了.所以文件或目录一定归好类,存放有 ...
- C语言小程序之整除
看到有人要求用C语言写这样一个小程序,就拿来温习一下 需求:输出从1到2015这2015个自然数中,能被4或5整除,但不能被30整除的数,并计算有多少个数. #include<stdio.h ...
- go中操作json
package main import ( "encoding/json" "fmt" ) type Server struct { ServerName st ...