Ext动态添加一行组件

用的column布局,点击一个按钮能添加一行组件,如文本框,有下拉框等。

Exmyth
  1 /*!
  2  * Ext JS Library 3.4.0
  3  * Copyright(c) 2006-2011 Sencha Inc.
  4  * [email protected]
  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.
 * [email protected]
 * 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);
});

 

 

转载于:https://www.cnblogs.com/exmyth/archive/2013/04/13/3017873.html

你可能感兴趣的:(Ext动态添加一行组件)