extjs удалить / прочитать текстовое поле, чтобы сформировать ошибку?

Question

У меня есть форма, где у меня есть радиогруппа «да», «нет».

Когда я нажимаю «да», я получаю текстовое поле, добавленное к набору полей в форме с параметром конфигурации: allowBlank: ложный.Так что есть проверка на поле.Когда я нажимаю «нет», все поля удаляются из набора полей, который присутствует в форме.

Проблема в том, что проверка активна, поэтому, когда вы входите в текстовое поле и щелкаете по нему, не вводя в него никаких символов, и я нажимаю на кнопку радио «Нет», текстовое поле исчезает и дает мнеследующая ошибка, когда я ловлю его:

Element.alignToXY с элементом, который не существует

Когда я нажимаю впоследствии на кнопку радио «да», текстовое поле снова отображается, НО я получаюошибка:

TypeError: dom не определена

Я мог бы отловить эти ошибки и ничего с этим не делать, потому что на самом деле форма работает, текстовые поля добавляются и удаляются, как и должно быть, тамприсутствуют только ошибки, и мне не нравится их концепция.Кто-нибудь знает, почему эта ошибка возникает и как от нее избавиться, чтобы она работала на 100% правильно?

Вот пример кода:

var radiogroup = new Ext.form.RadioGroup({
    fieldLabel: 'Radio group test',
    allowBlank: false,
    anchor: '85%',
    items: [{
        boxLabel: 'Yes',
        name: 'radio',
        inputValue: 1
    }, {
        boxLabel: 'No',
        name: 'radio',
        inputValue: 2
    }],
    listeners: {
        change: function (rg, radio) {

            if (radio.inputValue == 1) {
                var textfield_test = new Ext.form.TextField({
                    fieldLabel: 'Test',
                    allowBlank: false,
                    id: 'test',
                    name: 'test',
                    anchor: '85%',
                    width: 320,
                    helpText: 'test'
                });
                textfield_fieldset.insert(textfield_fieldset.items.length, textfield_test);
            } else {
                try {
                    txt_test = Ext.getCmp('test');
                    if (txt_test) {
                        textfield_fieldset.remove(txt_test);
                    }
                    textfield_fieldset.doLayout();
                } catch (err) {
                    alert(err);
                }
            }
        }
    }
});

Answer 1

Я сделал это успешно не только для одного textbox, но и для всего panel, и это работает довольно хорошо. В моем случае любое количество panel может быть добавлено и удалено динамически, и это работает довольно хорошо. Соответствующий код, который я использовал, был:

panel.insert(medIndex,getNewPanel());
panel.doLayout();

А для удаления я использовал,

var cmp = Ext.getCmp('Panel-' + Id);
   if (cmp) {
     treatment.remove(cmp, true); // True is the autoDestroy option.
   }

Эти два в сочетании работают для меня. Хотя я бы посоветовал сделать это только для одного textbox, а затем преобразовать его в поле hidden и disable. Когда вы disable поле, оно не будет отправлено в post или ajax post request.

Надеюсь, это поможет.

Answer 2

сначала, почему вы повторно добавили / повторно удалили такой компонент? .. ..
если бы я был вами ... я буду использовать метод скрытия / показа класса текстового поля ..

после прочтения вашего кода, я предполагаю, что вы делаете formPanel с 2 пунктами (radiogroup и fieldset), где в наборе полей есть textfield ... так что, гостеприимно .. mybe likeэто ??

var radiogroup = new Ext.form.RadioGroup({
    fieldLabel: 'Radio group test',
    allowBlank: false,
    anchor: '85%',
    items: [
        {
        boxLabel: 'Yes',
        name: 'radio',
        inputValue: 1},
    {
        boxLabel: 'No',
        name: 'radio',
        inputValue: 2}
    ],
    listeners: {
        change : function(a,b){
            if (b.inputValue==1){
                Ext.getCmp("textfield").enable();
                Ext.getCmp("textfield").show();
            }else{
                Ext.getCmp("textfield").disable(); // set disable to prevent send empty data
                Ext.getCmp("textfield").hide();
            }                
        }
    }
});

var formPanel = new Ext.form.FormPanel({
    url : 'www.google.com',
    method : "GET",
    layout:'column',
    frame :true,
    border : false,
    items : [
                radiogroup,
                {
                xtype:'fieldset',
                id : 'test',
                title: 'Fieldset',
                collapsible: true,
                height : 200,
                width : 350,
                items :[{
                        xtype : "textfield",
                        id : 'textfield',
                        fieldLabel : "input data",
                        name : "text",
                        hidden:true,
                        disabled:true
                       }]
                }
            ]
});

var win = new Ext.Window({
    title : "holla",
    width : 400,
    height: 300,
    border : false,
    layout:'fit',
    items  : [formPanel]
});
win.show();

Answer 3

Я создал jsfiddle, чтобы ответить на этот вопрос.Кажется, что текстовое поле добавлено / удалено правильно: http://jsfiddle.net/jaycode/PGSb7/4/

Приветствия.

Редактировать: для полноты, я думаю, я просто выложу здесь код также

---

HTML

<div id="radios"></div>
<div id="textfield_fieldset"></div>

---

JS

var textfield_fieldset = new Ext.form.FieldSet({
    renderTo: 'textfield_fieldset',
});

var radiogroup = new Ext.form.RadioGroup({
    renderTo: 'radios',
    width: 200,
    height: 60,
    fieldLabel: 'Radio group test',
    allowBlank: false,
    layout: {
        type: 'vbox'
    },
    items: [
        {
            boxLabel: 'Yes',
            name: 'radio',
            inputValue: 1
        },
        {
            boxLabel: 'No',
            name: 'radio',
            inputValue: 2
        }
    ],
    listeners: {
        change: function(rg, radio) {
            if (rg.lastValue.radio == 1) {
                var textfield_test = new Ext.form.TextField({
                    fieldLabel: 'Test',
                    allowBlank: false,
                    id: 'test',
                    name: 'test',
                    anchor: '85%',
                    width: 320,
                    helpText: 'test'
                });
                textfield_fieldset.insert(textfield_fieldset.items.length, textfield_test);
            } else {
                    txt_test = Ext.getCmp('test');
                    if (txt_test) {
                        textfield_fieldset.remove(txt_test);
                    }
                    textfield_fieldset.doLayout();

            }
        }
    }
});