EXT JS форма панели из нескольких частей - PullRequest
Новая
       17

EXT JS форма панели из нескольких частей

4 голосов
/ 26 мая 2011

Как создать панель формы с более мелкими деталями. Меньшие части должны быть многоразовыми в панели формы.

1 Ответ

4 голосов
/ 26 мая 2011

Я использую помощника для этого. Вот пример, который должен показать вам хитрость. 

/// limitForm : array with all ellemts that should be taken from the inner form. can be null or empty to take all
FormContent.loginForm = function (limitForm) {
    var defaults = [
    {/* this has the ID 0 */
        xtype: 'Fieldset',
        title: 'Username',
        layout: 'form',
        items: [
            {
                xtype: 'panel',
                layout: 'form',
                header: false,
                hideBorders: true,
                bodyBorder: false,
                border: false,
                height: 40,
                items: [
                    {
                        xtype: 'textfield',
                        fieldLabel: 'Username',
                        regex: /^[\w\s\.]*$/,
                        regexText: 'No special chars allowed in this field',
                        anchor: '100%',
                        name: 'LoginName'
                    }
                ]
            }
        ]
    }
    ,
    {/* this has the ID 1 */
        xtype: 'Fieldset',
        title: 'Additional data',
        layout: 'form',
        items: [
        {   
            xtype: 'panel',
            layout: 'column',
            header: false,
            border: false,
            bodyBorder: false,
            height: 40,
            items: [
                {
                    xtype: 'panel',
                    layout: 'form',
                    header: false,
                    columnWidth: 0.5,
                    hideBorders: true,
                    bodyBorder: false,
                    border: false,
                    items: [
                        {
                            xtype: 'textfield',
                            fieldLabel: 'Title',
                            anchor: '100%',                                             
                            name: 'Title'
                        }
                    ]
                },
                {
                    xtype: 'panel',
                    layout: 'form',
                    header: false,
                    columnWidth: 0.5,
                    style: 'margin-left: 18px',
                    hideBorders: false,
                    border: false,
                    bodyBorder: false,
                    labelWidth: 65,
                    items: [
                        {
                            xtype: 'textfield',
                            fieldLabel: 'Title',
                            anchor: '100%',                                             
                            name: 'Title'
                        }
                    ]
                }
            ]
        }
    }
    ];

    if (limitForm) {
        var ds = [];
        for (var i = 0, len = limitForm.length; i < len; i++) {
            ds.push(defaults[limitForm[i]]);
        }
        defaults = ds;
    }

    return defaults;
}

Если вы хотите использовать его повторно, вы можете изменить параметры функции с помощью массивов конфигурации или имен полей (имена должны измениться, иначе будет отправлено только одно поле). Но я думаю, что это должно показать вам фокус.

Конечно, это должно быть загружено в mainform!

...