Ext how to dynamically add a line of components

Column layout, click a button to add a line of components, such as a text box, a drop-down box, and so on.

Such as:

Effect:

The implementation method is as follows:

/*!
 * EXT JS Library 3.4.0 * Copyright (c) 2006-2011 Sencha Inc. * licensing@sencha.com * http://www.sencha.com/license * */Ext.onready (function () {//Add button var newdept_action = new Ext.action ({cls: ' X-btn-text-icon bmenu ', Icon: ' Icon-add ', Text: ' Add new Department (new Line) ', h
            
            Andler:function () {id = id + 1;                
                Add a new fieldset var org_fieldset = new Ext.panel ({//column layout control starts
                ID: ' org_fieldset_ ' + ID, layout: ' column ', Border:false,
                    Items: [//Component Start {columnWidth:. 2, layout: ' Form ', Border:false, items: [{//Is empty Blanktext: ' Organization name cannot be empty ', Emptytext: ', Editable:false, TriggerAction:
  ' All ',                      Allowblank:false,//Empty Xtyp
                        E: ' TextField ', Fieldlabel: ' Organization name ', ID: ' org_field_orgname_ ' + ID,
                    
                    Name: ' org_field_orgname_ ' + ID, Anchor: ' 90% ' }]}//Component end,//component Start {columnWidth:. 2, Lay
                        Out: ' form ', Border:false, items: [{//Is empty
                        
                        
                        Blanktext: ' Superior department cannot be empty ', Emptytext: ', Editable:false, TriggerAction: ' All ', Allowblank:
                        False,//empty xtype: ' TextField ', Fieldlabel: ' Superior department', ID: ' ORG_FIELD_ORGPARENT_ ' + ID, Anchor: ' 90% '
                    }]}//Component end,//button start {
                    ColumnWidth:. 2, layout: ' Form ', Border:false,
                        Items: [{xtype: ' button ', Text: ' Select parent Department ',
                        
                        
                        
                        
                        Scope:this, Handler:function () { }}]}//Press
                    button end,//component Start {columnWidth:. 2,
                        Layout: ' Form ', Border:false, items: [{//Is empty Blanktext: 'The superior department cannot be empty ', Emptytext: ',
                        Editable:false, TriggerAction: ' All ', Allowblank:false,
                        Empty//xtype: ' Hidden ', xtype: ' TextField ',
                        Fieldlabel: ' Department id ', Value: ' org_field_orgid_ ' + ID,
                Anchor: ' 90% '}]}//Component end,//button start {columnWidth:. 2, layout: ' Form ', border:fals E, items: [{xtype: ' button ', Tex
                        
                        
               T: ' Delete ', 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);
                            
                        Deletes a row of Simple.remove (fieldset_1, true);
            }}]}//button end]//column layout control end});
            Add fieldset simple.add (Org_fieldset);
            
        Re-play New Simple.dolayout ();
  }, Iconcls: ' blist '}); var first_org_fieldset = new Ext.panel ({//column layout control start ID: ' org_fieldset_ ' + ID, LA Yout: ' column ', Border:false, items: [//Component Start {columnWidth:. 2, Layout: '
            Form ', Border:false, items: [{    Empty Blanktext: ' Organization name cannot be empty ', Emptytext: ',
                
                Editable:false, TriggerAction: ' All ', allowblank:false,//Empty Xtype: ' TextField ', Fieldlabel: ' Organization name ', ID: ' Org_field_orgnam
        E_ ' + ID, Name: ' org_field_orgname_ ' + ID, Anchor: ' 90% '}
            }//Component end,//component Start {columnWidth:. 2, layout: ' Form ', Border:false,
                
                
                Items: [{//Is empty Blanktext: ' Superior department cannot be empty ', Emptytext: ', Editable:false, TriggerAction: ' All ', allowblank:false
                ,//Empty xtype: ' TextField ', Fieldlabel: ' Superior Department ', ID: ' org_field_orgParent_ ' + ID, Anchor: ' 90% '}]}//Component end, 
            
                Button Start {columnWidth:. 2, layout: ' Form ', Border:false, items: [{
                Xtype: ' button ', Text: ' Select Superior Department ', Scope:this, Handler:function () {}}
            ]}//button end,//component Start {columnWidth:. 2, layout: ' Form ', Border:false, items: [{//Is empty Blanktext: ' parent department cannot be empty ', emptyt
                Ext: ", Editable:false, TriggerAction: ' All ',
                Allowblank:false,//Empty//xtype: ' Hidden ', xtype: ' TextField ', Fieldlabel: ' Department ID ', Value: ' org_field_orgid_ ' + ID, Anchor: ' 90% '
            }]}//Component end,//button start {columnWidth:. 2, layout: ' Form ',
                Border:false, items: [{xtype: ' button ', text: ' Delete ', Value:id, Scope:this, Handler:function (ob
                    j) {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);
  }}]}//button end]//column layout control end}); Define form var simple = new Ext.formpanel({labelalign: ' Left ', Title: ' Add sub-department ', Buttonalign: ' Right ', bodystyle: ' padding:5px ', width:600, Autoheight:true, autowidth:true,//Frame:true, Labelwidth: //items: [], buttons: [{text: ' Save ', type: ' Submit ',//Set Semantic form submission Event Handler:function () {if (Simple.form.isValid ()) {///validation valid after use load Progress bar Ext.MessageBox.show ({title: ' Please wait ', msg: ' Loading ... ')
                        , Progresstext: ", width:300, Progress:true,
                    Closable:false, Animel: ' loding '});
                            Control progress speed var F = function (v) {return function () {
       var i = V/11;                     Ext.MessageBox.updateProgress (i, ");
                    };
                    
                    };
                    for (var i = 1; i < i++) {setTimeout (f (i), I * 150);
                        }//Submit to Server Operation Simple.form.doAction (' Submit ', { url:newsaveorgframeurl,//file path method: ' Post ',//Submit method post or get Para
                            MS: ',//Submit a successful callback function success:function (form, action) {
                            
                            
                            
                                if (action.result.msg = = ' OK ') {
                                    Ext.MessageBox.show ({title: ' System prompt information ',
                               Msg: ' Add success! ', Buttons:Ext.MessageBox.OK,     Icon:Ext.MessageBox.INFO, Fn:function (btn, text) {
                                }
                            });
                            } else {Ext.Msg.alert (' Add error ', action.result.msg); }},//Submit failed callback function failure:functi On () {Ext.Msg.alert (' error ', ' server error ' please try again later.
                        ');
                }
                    }); 
            }}}, {text: ' Reset ', Handler:function () {simple.form.reset ();
            }//Reset Form}, {text: ' Cancel ', Handler:function () {win.close ();
    }//reset Form}]}); Add a first fieldset simple.aDD (first_org_fieldset); 
        Menu panels var panel = new Ext.panel ({bodystyle: ' width:100% ', Autowidth:true, Autoheight:true, Autoscroll:true, RenderTo:Ext.getBody (),//title: ", Bodystyle: ' P adding:10px; ', Tbar: [{xtype: ' Tbseparator '}, Newdept_action, {//<--Add the action dir 
    
   ectly to a toolbar xtype: ' Tbseparator '}], items: [Simple]});
     return panel;
 
Simple.render (document.body);
 });

Last thanks to the Bear House blog: http://hi.baidu.com/freshman0502/blog/item/dba3a1d3742d13d8a9ec9ae7.html