Extjs 无法在表单面板中动态添加/删除字段

Posted 2023-02-26

【中文标题】Extjs 无法在表单面板中动态添加/删除字段

【英文标题】：Extjs can't dynamically add/remove fields in formpanel

【发布时间】：2011-09-20 08:02:44

【问题描述】：

我有一个表单面板，它使用表格布局来显示表单。我需要添加功能来添加/删除一组组件。

添加按钮应在现有元素下方添加新的一行组件，而删除按钮应删除最后添加的行。

表单面板可以添加一个新字段，但它显示在按钮下方，并且表单的宽度没有增加（参见下面的屏幕截图）。我已经尝试过插入和添加功能，但两者的效果相同。

有谁知道如何： 1）我可以在下一行添加一系列组件吗？ 2）我如何删除下一行。

部分表单面板代码&按钮代码：

![SearchForm = Ext.extend(Ext.FormPanel, 
     id: 'myForm'
     ,title: 'Search Form'
     ,frame:true     
     ,waitMessage: 'Please wait.'
     //,labelWidth:80    
     ,initComponent: function()     
         var config =                  
            items: [
                layout:
                    type:'table',
                    columns:5
                ,
                buttonAlign:'center',

                defaults:
                    //width:150,
                    //bodyStyle:'padding:100px'
                    style:'margin-left:20px;'
                ,               
                items:[//row 1
                                           
                            xtype: 'label',
                            name: 'dateLabel',
                            cls: 'f',
                            text: "Required:"                   
                        ,
                        
                            xtype: 'container',
                            layout: 'form',
                            items: 
                                xtype: 'datefield',
                                fieldLabel: "From Date",  
                                 value: yesterday,
                                width: 110,
                                id: 'date1'                                                   
                            
                        ][1]
buttons: [
                            text: 'Add More Criteria (max 10 items)',
                            id: "addBtn",                   
                            scope: this,
                            handler: function()
                                alert('hi');
                                /*this.items.add(
                                     xtype : 'textfield',
                                     fieldLabel : 'Extra Field',
                                     name : 'yourName',
                                     id : 'yourName'
                                 ); */
                                this.insert(4,
                                        xtype: 'textfield',
                                        id: 'input20',
                                        //hideLabel: true,
                                        width: 180,
                                        fieldLabel: 'hi'
                                    );
                                this.doLayout();
                            
                

【参考方案1】：

最简单的方法是在表单中使用fieldset 来保存所有“行”，然后使用fielset.add() 向该fieldset 添加一行

（您的“行”可以是包含所有字段的另一个字段集）

【讨论】：

我还看到了一些在 fieldSet 中保存 fieldContainer 的东西，这是正确的方法还是只添加另一个 fieldset 作为一行就足够了？

只需将另一个字段集添加为一行就足够了

【参考方案2】：

动态表单字段的生成似乎很明显，并且有很多示例和一些用于 mootools 等的博客，但是在 extjs 世界中我找不到工作示例（可能是因为大多数人使用强大的 Extjs 网格）。我不得不发明MedAlyser 项目一个人！并与你分享。她可能有错误和/或不完整，但我希望她能有所帮助。

function addressCounter(incr) 
    if (!this.no) 
        this.no = 0;
     else 
        this.no = this.no + 1;
    ;
;
var counter = new addressCounter();
console.log(counter.no);
//put below code inside your form  items       

    xtype: 'button',
    text: 'Add address ',
    id: 'addaddress',
    handler: function () 
        counter.no = counter.no + 1;
        console.log(counter.no);
        Ext.getCmp('patientaddress').add([
            xtype: 'combo',
            store: 'AddressType',
            displayField: 'name',
            valueField: 'name',
            fieldLabel: 'Address Type',
            id: 'addresstype' + counter.no,
            name: "Patientaddress[addresstype][]",
            value: 'Home'
        , 
            fieldLabel: 'zip',
            width: 160,
            maxLength: 10,
            enforceMaxLength: true,
            maskRe: /[\d\-]/,
            regex: /^\d5(\-\d4)?$/,
            regexText: 'Must be in the format xxxxx or xxxxx-xxxx',
            name: "Patientaddress[zip][]",
            id: 'zip' + counter.no
        , 
            fieldLabel: 'Address 1',
            name: "Patientaddress[address1][]",
            id: 'address1' + counter.no
        , 
            fieldLabel: 'Address 2',
            name: "Patientaddress[address2][]",
            id: 'address2' + counter.no
        , 
            fieldLabel: 'City',
            name: "Patientaddress[city][]",
            id: 'city' + counter.no
        , 
            fieldLabel: 'State',
            name: "Patientaddress[state][]",
            id: 'state' + counter.no
        , 
            xtype: 'combo',
            store: Ext.create('MA.store.Countries'),
            displayField: 'name',
            valueField: 'id',
            forceSelection: true,
            fieldLabel: 'Country',
            typeAhead: true,
            queryMode: 'local',
            name: "Patientaddress[country][]",
            id: 'country' + counter.no
         // eof
        // countries;
        ,
        Ext.getCmp('addaddress'), 
            xtype: 'button',
            text: 'Remove address',
            id: 'removeaddress' + counter.no,
            handler: function (
            thisButton, eventObject) 

                activeRemoveButtonId = thisButton.getId().split('removeaddress')[1];

                console.log('activeRemoveButtonID:' + activeRemoveButtonId);
                Ext.getCmp('patientaddress').remove('address1' + activeRemoveButtonId);
                Ext.getCmp('patientaddress').remove('address2' + activeRemoveButtonId);
                Ext.getCmp('patientaddress').remove('city' + activeRemoveButtonId);
                Ext.getCmp('patientaddress').remove('state' + activeRemoveButtonId);
                Ext.getCmp('patientaddress').remove('country' + activeRemoveButtonId);
                Ext.getCmp('patientaddress').remove('removeaddress' + activeRemoveButtonId);
                Ext.getCmp('patientaddress').remove('addresstype' + activeRemoveButtonId);
                Ext.getCmp('patientaddress').remove('zip' + activeRemoveButtonId);

                Ext.getCmp('patientaddress').doLayout();
            
        ]);
        Ext.getCmp('patientaddress').doLayout();

     // eof function
, // eof Add button

删除字段更加复杂，因为删除按钮需要确切知道必须删除哪个字段。此代码会根据您的要求创建新字段并正确删除它们。欢迎提出任何建议。