Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 11.11.2010, 10:12
Аспирант
Отправить личное сообщение для DenQ Посмотреть профиль Найти все сообщения от DenQ
 
Регистрация: 28.08.2010
Сообщений: 57

Динамическое добавление полей в форме
В очередной раз всех приветствую. У меня проблемка. Мне нужно что б в моей формочке, поля для ввода появлялись динамически, при нажатии на кнопочку рядом, в этой же форме. Форму я сделал, кнопочку тоже, поля тоже. Поля для ввода я передаю как массив объектов. Нужно чтобы по нажатию на кнопочку появлялись новые поля... Но они не появляются, и в дереве ДОМа тоже... что посоветуете?

Идея была такая, что бы по нажатию, в массив, вносился очередной объект, содержащий сведения о полях и прочем.
В общем вот код, handler кнопочки начинается со 108 строки. Сорри за большой размер...
function formDisk() {
//    var NUM = 1;
//    function num(n){
//        n = n + 0;
        var el_form = new Array();
//        for(var i=0;i<n;i++){
            el_form[0] =                 {
                    xtype       : 'fieldset',
                    title       : 'Файл',
                    collapsible : true,
                    autoHeight  :true,
                    defaults    : {width: 210},
                    defaultType : 'textfield',
                    items :[
                            {
                                fieldLabel      : 'Имя',
                                allowBlank      : false,
                                name            : 'NAME'
                            },
                            {
                                xtype           : 'combo',
                                store           : getStore('type_file'),
                                mode            : 'local',
                                valueField      : 'name',
                                displayField    : 'name',
                                triggerAction   : 'all',
                //                allowBlank      : true,
                                fieldLabel      : 'Тип диска',
                                allowBlank      : false,
                                name            : 'TYPE'
                            },
                            {
                                fieldLabel      : 'Примечение',
                                name            : 'ABOUT'
                            }
                    ]
                }
//        }
//                return el_form;
//    }

    var form = new Ext.FormPanel({
            url : 'index.php?ajax=yes&query=insert&action=disk',
        header      : false,
        title       : 'Диск(добавить)',
//        width       : 500,
        labelWidth  : 120,
        frame       : true,
        defaults    : { width: 360 },
        defaultType : 'textfield',
        items:[
            {
                xtype       : 'fieldset',
                title       : 'Характеристики диска',
                collapsible : true,
                autoHeight  :true,
                defaults    : {width: 210},
                defaultType : 'textfield',
                items :[
                        {
                            fieldLabel      : 'Имя',
                            allowBlank      : false,
                            name            : 'NAME'
                        },
                        {
                            xtype           : 'combo',
                            store           : getStore('type_disk'),
                            mode            : 'local',
                            valueField      : 'name',
                            displayField    : 'name',
                            triggerAction   : 'all',
            //                allowBlank      : true,
                            fieldLabel      : 'Тип диска',
                            allowBlank      : false,
                            name            : 'TYPE'
                        },
                        {
                            border          : true,
                            xtype           : 'combo',
                            store           : getStore('group_disk'),
                            mode            : 'local',
                            valueField      : 'name_group',
                            displayField    : 'name_group',
                            triggerAction   : 'all',
                            fieldLabel      : 'Группа диска',
                            allowBlank      : false,
                            name            : 'GROUP'
                        },
                        {
                            fieldLabel      : 'Примечение',
                            name            : 'ABOUT'
                        }
//                        ,
//                        {
//                            id              : 'num_files',
//                            fieldLabel      : 'Количество файлов',
//                            name            : 'NUM_FILES',
//                            value           : 3
//                        }
                ]
            },
            el_form,
//            num(NUM),
            {
              xtype     : 'button',
              text      : 'Еще файл',
              width     : 100,
              handler : function(){
                                el_form[el_form.length] = {
                                xtype       : 'fieldset',
                                title       : 'Файл' + el_form.length,
                                collapsible : true,
                                autoHeight  : true,
                                defaults    : {width: 210},
                                defaultType : 'textfield',
                                items :[
                                        {
                                            fieldLabel      : 'Имя',
                                            allowBlank      : false,
                                            name            : 'NAME' + el_form.length
                                        },
                                        {
                                            xtype           : 'combo',
                                            store           : getStore('type_file'),
                                            mode            : 'local',
                                            valueField      : 'name',
                                            displayField    : 'name',
                                            triggerAction   : 'all',
                            //                allowBlank      : true,
                                            fieldLabel      : 'Тип диска',
                                            allowBlank      : false,
                                            name            : 'TYPE' + el_form.length
                                        },
                                        {
                                            fieldLabel      : 'Примечение',
                                            name            : 'ABOUT' + el_form.length
                                        }
                                ]
                            }
                     form.show();

              }
            }
        ],
        buttons: [
            {
                text: 'Reset',
                handler: function(){
                   form.getForm().reset();
                }
            },{
                text    : 'Добавить',
                handler: function() {
                    form.getForm().submit({
                        success: function(f,a){
//                            url:    'index.php?ajax=yes&action=adduser',
                            Ext.Msg.alert('Success', 'It worked');
                        },
                        failure: function(f,a){
    //                        Ext.Msg.alert('Warning', 'Error');
                            if (a.failureType === Ext.form.Action.CONNECT_FAILURE){
                                   Ext.Msg.alert('Failure', 'Server reported:'+a.response.status+' '+a.response.statusText);
                            }
                            if (a.failureType === Ext.form.Action.SERVER_INVALID){
                               Ext.Msg.alert('Warning', a.result.errormsg);
                            }
                        }
                    })
                }
            }]
    });
//    Ext.Msg.alert('info', Number(Ext.getCmp('num_files').value));
    return form;
}
Ответить с цитированием
  #2 (permalink)  
Старый 11.11.2010, 10:33
VKS VKS вне форума
Профессор
Отправить личное сообщение для VKS Посмотреть профиль Найти все сообщения от VKS
 
Регистрация: 24.09.2010
Сообщений: 178

буду краток,

var valField = new Ext.form.NumberField({
		    fieldLabel: attribute.name,
		    name: 'val',
		    id: 'attribute-val'
		});
form.add(valField);
, где form это Ext.form.FormPanel
Ответить с цитированием
  #3 (permalink)  
Старый 11.11.2010, 15:50
Аспирант
Отправить личное сообщение для Yazla Посмотреть профиль Найти все сообщения от Yazla
 
Регистрация: 01.11.2009
Сообщений: 31

И если добавляете после того как форма отрендерина, не за будьте doLayout() вызвать.
Ответить с цитированием
  #4 (permalink)  
Старый 11.11.2010, 17:15
Аватар для mycoding
NodeJS developer - ушел
Отправить личное сообщение для mycoding Посмотреть профиль Найти все сообщения от mycoding
 
Регистрация: 06.01.2010
Сообщений: 1,022

А если надо вставить перед каким то компонентом то как добавлять?
Ответить с цитированием
  #5 (permalink)  
Старый 11.11.2010, 18:14
Ламер
Отправить личное сообщение для DooMer Посмотреть профиль Найти все сообщения от DooMer
 
Регистрация: 19.02.2010
Сообщений: 295

Сообщение от mycoding Посмотреть сообщение
А если надо вставить перед каким то компонентом то как добавлять?
form.insert( Number index, Ext.Component component )
Ответить с цитированием
  #6 (permalink)  
Старый 12.11.2010, 08:33
Аспирант
Отправить личное сообщение для DenQ Посмотреть профиль Найти все сообщения от DenQ
 
Регистрация: 28.08.2010
Сообщений: 57

Ребят. Спасибо вам большое. В очередной раз мне помогаете.
Ответить с цитированием
  #7 (permalink)  
Старый 12.11.2010, 09:36
Аватар для cmygeHm
Профессор
Отправить личное сообщение для cmygeHm Посмотреть профиль Найти все сообщения от cmygeHm
 
Регистрация: 12.10.2010
Сообщений: 196

А если на форме есть сварачивающиеся компоненты, и при сворачивании остается окно с формой уменьшается, остается тень, пока не передвинешь окно, то как перерисовать окно? или что можно еще сделать?
Ответить с цитированием
  #8 (permalink)  
Старый 12.11.2010, 10:16
Ламер
Отправить личное сообщение для DooMer Посмотреть профиль Найти все сообщения от DooMer
 
Регистрация: 19.02.2010
Сообщений: 295

cmygeHm,
doLayout() должно помочь, но проблема мне не извесна
Ответить с цитированием
  #9 (permalink)  
Старый 12.11.2010, 10:36
Аватар для cmygeHm
Профессор
Отправить личное сообщение для cmygeHm Посмотреть профиль Найти все сообщения от cmygeHm
 
Регистрация: 12.10.2010
Сообщений: 196

я пробывал doLayout(), не помогогло.
Вот нашел http://shitmores.blogspot.com/2008/0...to-resize.html

Помогло

Последний раз редактировалось cmygeHm, 18.11.2010 в 15:37.
Ответить с цитированием
  #10 (permalink)  
Старый 14.04.2011, 12:13
Новичок на форуме
Отправить личное сообщение для daly Посмотреть профиль Найти все сообщения от daly
 
Регистрация: 13.04.2011
Сообщений: 1

Запустил пример автора топика. Все работает, поля добавляются. А как отсабмитить такую форму? Ведь в JsonReader жестко прописываются поля. И массив задать там вроде как нельзя.
Хотелось бы получить примерно такой json, (на примере автора темы)
files:[{name:"фото.jpg",type:"jpg",about:"bla bla bla"},
{name:"фото2.jpg",type:"jpg",about:"bla bla bla"},
{name:"фото3.jpg",type:"jpg",about:"bla bla bla"}]
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Проблема с проверкой полей в форме Eth Общие вопросы Javascript 7 19.08.2010 17:41
Добавление и удаление полей в форму anoth3r Events/DOM/Window 1 11.09.2009 15:10
Динамическое добавление нового option в form artwalek Элементы интерфейса 19 24.04.2009 17:42
Добавление полей к форме deliro Общие вопросы Javascript 7 22.03.2009 15:20
Добавление новых полей к форме. EZh Элементы интерфейса 7 14.06.2008 04:05