динамические поля в форме на ExtJS

[viperrr]

Всем доброго вечера!
подскажите плзз как сделать, что бы при каждом нажатии на GO добавлялось еще 1 текстовое поле под то которое уже есть!
У еня сейчас получается что поле добавляется в конец формы!


add = function(){
myWIN.add({
items:[
{
xtype:'textfield',
fieldLabel:'Текстовое итое',
name:'text',
width: 300,
allowBlank: false
}
]
});
myWIN.doLayout();
}

var myWIN = new Ext.Window({
width:500,
title:'Наше окошко',
layout:'fit',
modal: true,
items:[
{
xtype: 'form',
items:[
{
xtype:'textfield',
fieldLabel:'Текстовое поле',
name:'text1'
},{
xtype: 'container',
layout:'hbox',
items:[{
xtype:'textfield',
fieldLabel:'Текстовое поле2',
name:'text2'
},{
xtype: 'button',
text: 'GO',
handler:function(){
add();
}
}]
},{
xtype: 'button',
text: 'Кнопка'
}
]
}
]
})

[nekto_O]

viperrr,
конечно в конец добавляется, раз myWIN.add();
Сейчас вы в окно добавляете. Если, например, нужно в форму, тогда
myWIN.find('xtype', 'form')[0].add();

[viperrr]

nekto_O - что то не работает..

add = function(){
myWIN.find('xtype', 'form')[0].add({
items:[
{
xtype:'textfield',
fieldLabel:'Текстовое итое',
name:'text',
width: 300,
allowBlank: false
}
]
});
myWIN.doLayout();
}

по разному уже извращался, не получается сделать нормальное добавление!
Да и в нэте нет похожих примеров :-E

[nekto_O]

Вот, немного видоизменил, лучше не объявлять глобальную функцию, а сделать ее методом формы, однако метод add() у класса есть и называть его также - значит переопределить его, чего делать не стоит=)
проверил в ExtJS 4.0.1 - работает.
var myWIN = new Ext.Window({
width: 500,
title: 'Наше окошко',
layout: 'fit',
addField: function(){
// Если версия ExtJS < 4, то
//var frm = this.find('xtype', 'form')[0];
// Если версия ExtJS >= 4, то
var frm = this.down('form');
frm.add({
xtype: 'textfield',
fieldLabel: 'Текстовое итое',
name: 'text',
width: 300,
allowBlank: false
});
this.doLayout();
},
modal: true,
items: [
{
xtype: 'form',
items:[
{
xtype:'textfield',
fieldLabel: 'Текстовое поле',
name: 'text1'
},{
xtype: 'container',
layout: 'hbox',
items: [
{
xtype:'textfield',
fieldLabel:'Текстовое поле2',
name:'text2'
},{
xtype: 'button',
text: 'GO',
handler: function(){
myWIN.addField();
}
}
]
},{
xtype: 'button',
text: 'Кнопка'
}
]
}
]
})

[viperrr]

Спасибо, работает правильно, добавляет к самой форме, а не к окну :)
вот только проблема осталось - новое поле появляется после всех элементов формы, а не после кнопки GO т.е поле появляется после элемента Кнопка. Может есть какой то метод next ?
или может, возможно создать блок там где надо и указать какой-то xtype или id, и туда добавлять?

{
xtype: 'xxx',
id: 'xxx'
}

[nekto_O]

viperrr,
сегодня вечером посмотрю, щаз на работе занят сильно...

[nekto_O]

кнопку в окно вынес, отступы добавил....
var myWIN = new Ext.Window({
width: 500,
title: 'Наше окошко',
layout: 'fit',
buttons: [
{
text: 'Кнопка',
handler: function(){
return Ext.Msg.alert('Привет!', 'я '+this.text);
}
}, {
text: 'Закрыть',
handler: function(){
myWIN.hide();
}
}
],
addField: function(){
// Если версия ExtJS < 4
//var frm = this.find('xtype', 'form')[0];
// Если версия ExtJS >= 4
var frm = this.down('form');
frm.add({
xtype: 'textfield',
fieldLabel: 'Текстовое итое',
name: 'text',
allowBlank: false
});
this.doLayout();
},
modal: true,
items: [
{
xtype: 'form',
defaults: {
labelWidth: 120,
labelAlign: 'right'
},
bodyStyle: 'padding: 3px;',
border: false,
items: [
{
xtype:'textfield',
fieldLabel: 'Текстовое поле',
name: 'text1'
}, {
xtype: 'container',
layout: 'hbox',
items: [
{
xtype:'textfield',
labelWidth: 120,
labelAlign: 'right',
fieldLabel:'Текстовое поле2',
name:'text2'
}, {
xtype: 'button',
text: 'GO',
margins: {left: 5},
handler: function(){
myWIN.addField();
}
}
]
}
]
}
]
})

[viperrr]

nekto_O - очень благодарен Вам за помощь и стремление помочь решить мои вопросы, но все же, по своей глупости я буду нудным.

Дело в том, что я наверное не совсем правильно сформулировал, то что я хочу получить.
То, что вы предложили работает корректно и правильно, но дело в том, что в моей форме после добавляемых (динамических) полей, идут еще разные поля, т.е форма не заканчивается на полях которые динамически мы добавили. Получается, что добавлять нужно не в конец формы, а так скажем в середину. К примеру после кнопки GO, но до тех элементов, которые идут далее.

[Pavel M.]

Получается, что добавлять нужно не в конец формы, а так скажем в середину.
используйте вместо .add() метод .insert() - он позволяет указывать место куда вставлять http://docs.sencha.com/ext-js/4-0/#!/api/Ext.container.Container-method-insert

пример здесь http://jsfiddle.net/dDUnN/ в примере вставляется новое поле после первого

[viperrr]

спасибо огромное вам, все сделал как и планировал!
что бы не создавать новую тему спрошу тут, как узнать количество элементов формы.
В документации нашел только для стрингов и т.п!
вообщем хочу узнать в моей функции.

addLine: function(){
var forma = this.down('form');
var num = forma.length; // так не работает
...

[nekto_O]

getCountField: function(){
var frm = this.down('form');
var fields_cnt = frm.getForm().getFields().length;
alert(fields_cnt);
}

[viperrr]

:thanks: