Ext动态添加一行组件
用的column布局,点击一个按钮能添加一行组件，如文本框，有下拉框等。
Exmyth
1 /*! 2 * Ext JS Library 3.4.0 3 * Copyright(c) 2006-2011 Sencha Inc. 4 * licensing@sencha.com 5 * http://www.sencha.com/license 6 */ 7 Ext.onReady(function(){ 8 // 添加按钮 9 var newDept_action = new Ext.Action({ 10 cls: 'x-btn-text-icon bmenu', 11 icon: 'icon-add', 12 text: '添加新的部门(新的一行)', 13 handler: function(){ 14 id = id + 1; 15 16 //添加新的fieldSet 17 var org_fieldSet = new Ext.Panel({ 18 //column布局控件开始 19 id: 'org_fieldSet_' + id, 20 layout: 'column', 21 border: false, 22 items: [//组件开始 23 { 24 columnWidth: .2, 25 layout: 'form', 26 border: false, 27 items: [{ 28 //为空 29 blankText: '组织名称不能为空', 30 emptyText: '', 31 editable: false, 32 triggerAction: 'all', 33 allowBlank: false, 34 //为空 35 xtype: 'textfield', 36 fieldLabel: '组织名称', 37 id: 'org_field_orgName_' + id, 38 name: 'org_field_orgName_' + id, 39 anchor: '90%' 40 }] 41 } //组件结束 42 , //组件开始 43 { 44 columnWidth: .2, 45 layout: 'form', 46 border: false, 47 items: [{ 48 //为空 49 blankText: '上级部门不能为空', 50 emptyText: '', 51 editable: false, 52 triggerAction: 'all', 53 allowBlank: false, 54 //为空 55 56 xtype: 'textfield', 57 fieldLabel: '上级部门', 58 id: 'org_field_orgParent_' + id, 59 60 anchor: '90%' 61 }] 62 } //组件结束 63 , //按钮开始 64 { 65 columnWidth: .2, 66 layout: 'form', 67 border: false, 68 items: [{ 69 70 xtype: 'button', 71 text: '选择上级部门', 72 scope: this, 73 handler: function(){ 74 } 75 }] 76 } //按钮结束 77 , //组件开始 78 { 79 columnWidth: .2, 80 layout: 'form', 81 border: false, 82 items: [{ 83 //为空 84 blankText: '上级部门不能为空', 85 emptyText: '', 86 editable: false, 87 triggerAction: 'all', 88 allowBlank: false, 89 //为空 90 //xtype: 'hidden', 91 xtype: 'textfield', 92 fieldLabel: '本部门ID', 93 94 value: 'org_field_orgId_' + id, 95 anchor: '90%' 96 }] 97 } //组件结束 98 , //按钮开始 99 { 100 columnWidth: .2, 101 layout: 'form', 102 border: false, 103 items: [{ 104 105 xtype: 'button', 106 text: '删除', 107 value: id, 108 scope: this, 109 handler: function(obj){ 110 var del_id = obj.value; 111 //var field_1 = Ext.getCmp('org_field_orgName_' + del_id); 112 var fieldSet_1 = Ext.getCmp('org_fieldSet_' + del_id); 113 //删除一行 114 simple.remove(fieldSet_1, true); 115 116 } 117 }] 118 } //按钮结束 119 ] 120 121 //column布局控件结束 122 }); 123 //添加fieldSet 124 simple.add(org_fieldSet); 125 //重新剧新 126 simple.doLayout(); 127 }, 128 iconCls: 'blist' 129 }); 130 var first_Org_fieldSet = new Ext.Panel({ 131 132 //column布局控件开始 133 134 id: 'org_fieldSet_' + id, 135 layout: 'column', 136 border: false, 137 items: [//组件开始 138 { 139 columnWidth: .2, 140 layout: 'form', 141 border: false, 142 items: [{ 143 //为空 144 blankText: '组织名称不能为空', 145 emptyText: '', 146 147 editable: false, 148 triggerAction: 'all', 149 allowBlank: false, 150 //为空 151 152 xtype: 'textfield', 153 fieldLabel: '组织名称', 154 id: 'org_field_orgName_' + id, 155 name: 'org_field_orgName_' + id, 156 anchor: '90%' 157 158 }] 159 } //组件结束 160 , //组件开始 161 { 162 columnWidth: .2, 163 layout: 'form', 164 border: false, 165 items: [{ 166 //为空 167 blankText: '上级部门不能为空', 168 emptyText: '', 169 170 editable: false, 171 triggerAction: 'all', 172 allowBlank: false, 173 //为空 174 175 xtype: 'textfield', 176 fieldLabel: '上级部门', 177 id: 'org_field_orgParent_' + id, 178 179 anchor: '90%' 180 }] 181 } //组件结束 182 , //按钮开始 183 { 184 columnWidth: .2, 185 layout: 'form', 186 border: false, 187 items: [{ 188 xtype: 'button', 189 text: '选择上级部门', 190 scope: this, 191 handler: function(){ 192 } 193 }] 194 } //按钮结束 195 , //组件开始 196 { 197 columnWidth: .2, 198 layout: 'form', 199 border: false, 200 items: [{ 201 //为空 202 blankText: '上级部门不能为空', 203 emptyText: '', 204 205 editable: false, 206 triggerAction: 'all', 207 allowBlank: false, 208 //为空 209 //xtype: 'hidden', 210 xtype: 'textfield', 211 fieldLabel: '本部门ID', 212 213 value: 'org_field_orgId_' + id, 214 anchor: '90%' 215 }] 216 } //组件结束 217 , //按钮开始 218 { 219 columnWidth: .2, 220 layout: 'form', 221 border: false, 222 items: [{ 223 224 xtype: 'button', 225 text: '删除', 226 value: id, 227 scope: this, 228 229 handler: function(obj){ 230 var del_id = obj.value; 231 //var field_1 = Ext.getCmp('org_field_orgName_' + del_id); 232 var fieldSet_1 = Ext.getCmp('org_fieldSet_' + del_id); 233 234 simple.remove(fieldSet_1, true); 235 } 236 }] 237 } //按钮结束 238 ] 239 240 //column布局控件结束 241 }); 242 //定义表单 243 var simple = new Ext.FormPanel({ 244 labelAlign: 'left', 245 title: '添加子部门', 246 buttonAlign: 'right', 247 bodyStyle: 'padding:5px', 248 //width: 600, 249 autoHeight: true, 250 autoWidth: true, 251 // 252 frame: true, 253 labelWidth: 80, 254 // items: [ ] , 255 buttons: [{ 256 text: '保存', 257 type: 'submit', 258 //定义表单提交事件 259 handler: function(){ 260 if (simple.form.isValid()) {//验证合法后使用加载进度条 261 Ext.MessageBox.show({ 262 title: '请稍等', 263 msg: '正在加载...', 264 progressText: '', 265 width: 300, 266 progress: true, 267 closable: false, 268 animEl: 'loding' 269 }); 270 //控制进度速度 271 var f = function(v){ 272 return function(){ 273 var i = v / 11; 274 Ext.MessageBox.updateProgress(i, ''); 275 }; 276 }; 277 278 for (var i = 1; i < 13; i++) { 279 setTimeout(f(i), i * 150); 280 } 281 282 //提交到服务器操作 283 simple.form.doAction('submit', { 284 url: newSaveOrgFrameUrl,//文件路径 285 method: 'post',//提交方法post或get 286 params: '', 287 //提交成功的回调函数 288 success: function(form, action){ 289 if (action.result.msg == 'ok') { 290 291 Ext.MessageBox.show({ 292 title: '系统提示信息', 293 msg: '添加成功!', 294 buttons: Ext.MessageBox.OK, 295 icon: Ext.MessageBox.INFO, 296 fn: function(btn, text){ 297 298 } 299 }); 300 } 301 else { 302 Ext.Msg.alert('添加错误', action.result.msg); 303 } 304 }, 305 //提交失败的回调函数 306 failure: function(){ 307 Ext.Msg.alert('错误', '服务器出现错误请稍后再试！'); 308 } 309 }); 310 } 311 } 312 }, { 313 text: '重置', 314 handler: function(){ 315 simple.form.reset(); 316 }//重置表单 317 }, { 318 text: '取消', 319 handler: function(){ 320 win.close(); 321 }//重置表单 322 }] 323 }); 324 //添加第一个fieldSet 325 simple.add(first_Org_fieldSet); 326 //菜单面板 327 var panel = new Ext.Panel({ 328 bodyStyle: 'width:100%', 329 autoWidth: true, 330 autoHeight: true, 331 //autoScroll: true, 332 renderTo: Ext.getBody(), 333 // 334 335 title: '', 336 bodyStyle: 'padding:10px;', 337 tbar: [{ 338 xtype: 'tbseparator' 339 }, newDept_action, { // <-- Add the action directly to a toolbar 340 xtype: 'tbseparator' 341 }], 342 items: [simple] 343 344 }); 345 346 // return panel; 347 simple.render(document.body); 348 349 });
另一种编程风格
/*! * Ext JS Library 3.4.0 * Copyright(c) 2006-2011 Sencha Inc. * licensing@sencha.com * http://www.sencha.com/license */ 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); });
