Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 10.11.2011, 01:03
Новичок на форуме
Отправить личное сообщение для viperrr Посмотреть профиль Найти все сообщения от viperrr
 
Регистрация: 10.11.2011
Сообщений: 9

динамические поля в форме на ExtJS
Всем доброго вечера!
подскажите плзз как сделать, что бы при каждом нажатии на 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: 'Кнопка'
					}
				]
			}
		]
	})
Ответить с цитированием
  #2 (permalink)  
Старый 10.11.2011, 08:16
С++/C# modest developer
Отправить личное сообщение для nekto_O Посмотреть профиль Найти все сообщения от nekto_O
 
Регистрация: 07.11.2011
Сообщений: 244

viperrr,
конечно в конец добавляется, раз myWIN.add();
Сейчас вы в окно добавляете. Если, например, нужно в форму, тогда
myWIN.find('xtype', 'form')[0].add();
Ответить с цитированием
  #3 (permalink)  
Старый 10.11.2011, 14:44
Новичок на форуме
Отправить личное сообщение для viperrr Посмотреть профиль Найти все сообщения от viperrr
 
Регистрация: 10.11.2011
Сообщений: 9

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

по разному уже извращался, не получается сделать нормальное добавление!
Да и в нэте нет похожих примеров
Ответить с цитированием
  #4 (permalink)  
Старый 10.11.2011, 20:40
С++/C# modest developer
Отправить личное сообщение для nekto_O Посмотреть профиль Найти все сообщения от nekto_O
 
Регистрация: 07.11.2011
Сообщений: 244

Вот, немного видоизменил, лучше не объявлять глобальную функцию, а сделать ее методом формы, однако метод 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: 'Кнопка'
					}
				]
			}
		]
	})
Ответить с цитированием
  #5 (permalink)  
Старый 10.11.2011, 22:55
Новичок на форуме
Отправить личное сообщение для viperrr Посмотреть профиль Найти все сообщения от viperrr
 
Регистрация: 10.11.2011
Сообщений: 9

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

Последний раз редактировалось viperrr, 10.11.2011 в 23:07.
Ответить с цитированием
  #6 (permalink)  
Старый 11.11.2011, 07:42
С++/C# modest developer
Отправить личное сообщение для nekto_O Посмотреть профиль Найти все сообщения от nekto_O
 
Регистрация: 07.11.2011
Сообщений: 244

viperrr,
сегодня вечером посмотрю, щаз на работе занят сильно...
Ответить с цитированием
  #7 (permalink)  
Старый 12.11.2011, 10:53
С++/C# modest developer
Отправить личное сообщение для nekto_O Посмотреть профиль Найти все сообщения от nekto_O
 
Регистрация: 07.11.2011
Сообщений: 244

кнопку в окно вынес, отступы добавил....
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();
								}
							}
						]
					}
				]
			}
		]
	})
Ответить с цитированием
  #8 (permalink)  
Старый 12.11.2011, 14:11
Новичок на форуме
Отправить личное сообщение для viperrr Посмотреть профиль Найти все сообщения от viperrr
 
Регистрация: 10.11.2011
Сообщений: 9

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

Дело в том, что я наверное не совсем правильно сформулировал, то что я хочу получить.
То, что вы предложили работает корректно и правильно, но дело в том, что в моей форме после добавляемых (динамических) полей, идут еще разные поля, т.е форма не заканчивается на полях которые динамически мы добавили. Получается, что добавлять нужно не в конец формы, а так скажем в середину. К примеру после кнопки GO, но до тех элементов, которые идут далее.
Ответить с цитированием
  #9 (permalink)  
Старый 12.11.2011, 15:23
Лаборант :-)
Отправить личное сообщение для Pavel M. Посмотреть профиль Найти все сообщения от Pavel M.
 
Регистрация: 08.11.2011
Сообщений: 806

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

пример здесь http://jsfiddle.net/dDUnN/ в примере вставляется новое поле после первого
Ответить с цитированием
  #10 (permalink)  
Старый 12.11.2011, 16:02
Новичок на форуме
Отправить личное сообщение для viperrr Посмотреть профиль Найти все сообщения от viperrr
 
Регистрация: 10.11.2011
Сообщений: 9

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

addLine: function(){
	var forma = this.down('form');
	var num = forma.length; // так не работает
...
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
ExtJs - Перевод книги "Lerning ExtJs" MaXyC ExtJS 17 22.06.2012 17:41
[Книги] Learn ExtJS, ExtJS in Action mycoding Учебные материалы 0 23.10.2010 15:07
Москва, ищу JavaScript программиста отлично знающего ExtJS, от 10 USD / час. maximgb Работа 3 03.08.2010 14:34
создание формы в extjs underW ExtJS 4 16.03.2010 12:22
Динамические поля формы kupnet Общие вопросы Javascript 5 12.08.2009 14:54