динамические поля в форме на 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();
}

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

[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/#!...-method-insert

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

[viperrr]

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

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