Extjs не может динамически добавлять / удалять поля в formpanel

Question

У меня есть панель форм, которая использует макет таблицы для отображения формы.Мне нужно добавить в функциональность, чтобы добавить / удалить набор компонентов.

Кнопка добавления должна добавить новую строку компонентов под существующими элементами, а кнопка удаления должна удалить эту последнюю добавленную строку.

Formpanel может добавить новое поле, но оно появляется под кнопкамии форма не увеличивается по ширине (см. снимок экрана ниже).Я пробовал это с обеими функциями вставки и добавления, но оба имеют одинаковый эффект.

Кто-нибудь знает, как: 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();
                            }
                }

Answer 1

Простейшим способом было бы иметь fieldset в форме для хранения всех «строк», а затем добавить строку к этому fieldset, используя fielset.add()

(Ваш 'row 'может быть другим набором полей, который имеет все поля)

Answer 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: /^\d{5}(\-\d{4})?$/,
            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

Удаление полей было более сложным, поскольку кнопка удаления должна точно знать, какое поле должноудалить.Этот код создает новые поля и удаляет их правильно, как вы просили. Любые предложения приветствуются.