Динамическое добавление новых полей в существующую панель форм

Я хочу динамически добавлять новые поля, размещенные внутри контейнера ( layout:hbox ), в FormPanel путем перетаскивания.

При переходе на панель формы я могу динамически добавлять поля. Но я хочу добавить в положение, где они упали.

var dynamicField = Ext.create('Ext.container.Container',{
                            layout : 'hbox',

                             items: [{
                                                                xtype:'textfield',
                                                                fieldLable:'Test'

                                                           }, {
                                     xtype : 'image',
                                     src : 'images/cancel.png',
                                     hidden : true

                                  }]
                                      });


                          formPanel.add(dynamicField);

                               //   tried    dynamicField.showAt(e.getXY());

с dynamicField.showAt(e.getXY()) не повезло //e является объектом события

Может ли кто-нибудь предложить мне, как я могу достичь?

С уважением URL


extjs4.1
person url    schedule 16.04.2013    source источник
comment
Одна из идей для решения этой проблемы заключается в том, что вам нужно разместить несколько заполнителей (выпадающих контейнеров) внутри панели формы, чтобы вы могли заменить контейнер вновь размещенным элементом управления.   -  person Rency    schedule 16.04.2013
comment
Как я могу получить контроль над ним и его положение? @Ренси   -  person url    schedule 19.04.2013

Ответы (1)


arrow_upward
0
arrow_downward

Для этого есть пример, предоставленный sencha, http://docs.sencha.com/extjs/4.1.3/#!/example/dd/dragdropzones.html. В этом мы создаем пользовательскую область, которую можно перетаскивать, и мы можем добавить к ней что угодно. проверьте код этого образца.

 onNodeDrop : function(target, dd, e, data){
        var rowBody = Ext.fly(target).findParent('.x-grid-rowbody-tr', null, false),
            mainRow = rowBody.previousSibling,
            h = gridView.getRecord(mainRow),
            targetEl = Ext.get(target);

        targetEl.insert(<your control>); // here we can add control directly into it.
        return true;
    }

Для понимания перетаскивания есть хорошее руководство: http://docs.sencha.com/extjs/4.1.3/#!/guide/drag_and_drop

person Rency    schedule 22.04.2013