динамические поля в форме на 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: 'Кнопка' } ] } ] }) |
viperrr,
конечно в конец добавляется, раз myWIN.add(); Сейчас вы в окно добавляете. Если, например, нужно в форму, тогда myWIN.find('xtype', 'form')[0].add(); |
nekto_O - что то не работает..
add = function(){ myWIN.find('xtype', 'form')[0].add({ items:[ { xtype:'textfield', fieldLabel:'Текстовое итое', name:'text', width: 300, allowBlank: false } ] }); myWIN.doLayout(); } по разному уже извращался, не получается сделать нормальное добавление! Да и в нэте нет похожих примеров :-E |
Вот, немного видоизменил, лучше не объявлять глобальную функцию, а сделать ее методом формы, однако метод 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: 'Кнопка' } ] } ] }) |
Спасибо, работает правильно, добавляет к самой форме, а не к окну :)
вот только проблема осталось - новое поле появляется после всех элементов формы, а не после кнопки GO т.е поле появляется после элемента Кнопка. Может есть какой то метод next ? или может, возможно создать блок там где надо и указать какой-то xtype или id, и туда добавлять? { xtype: 'xxx', id: 'xxx' } |
viperrr,
сегодня вечером посмотрю, щаз на работе занят сильно... |
кнопку в окно вынес, отступы добавил....
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(); } } ] } ] } ] }) |
nekto_O - очень благодарен Вам за помощь и стремление помочь решить мои вопросы, но все же, по своей глупости я буду нудным.
Дело в том, что я наверное не совсем правильно сформулировал, то что я хочу получить. То, что вы предложили работает корректно и правильно, но дело в том, что в моей форме после добавляемых (динамических) полей, идут еще разные поля, т.е форма не заканчивается на полях которые динамически мы добавили. Получается, что добавлять нужно не в конец формы, а так скажем в середину. К примеру после кнопки GO, но до тех элементов, которые идут далее. |
Цитата:
пример здесь http://jsfiddle.net/dDUnN/ в примере вставляется новое поле после первого |
спасибо огромное вам, все сделал как и планировал!
что бы не создавать новую тему спрошу тут, как узнать количество элементов формы. В документации нашел только для стрингов и т.п! вообщем хочу узнать в моей функции. addLine: function(){ var forma = this.down('form'); var num = forma.length; // так не работает ... |
Часовой пояс GMT +3, время: 19:14. |