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

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

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

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

Кто-нибудь знает, как: 1) Я могу добавить серию компонентов в следующем ряду? 2) Как я могу удалить следующий ряд.

Частичный код FORMPANEL и код кнопки:

![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();
                            }
                }

form

7
задан pm13 20 September 2011 в 08:02
поделиться