Javascript-форум (https://javascript.ru/forum/)
-   ExtJS (https://javascript.ru/forum/extjs/)
-   -   Форма upload-а: поправить расположение кнопок (https://javascript.ru/forum/extjs/46873-forma-upload-popravit-raspolozhenie-knopok.html)

WalterScott 27.04.2014 20:07

Форма upload-а: поправить расположение кнопок
 
Следующим образом вставляю на страницу форму загрузки файлов:
var uploadForm = Ext.create('Ext.form.Panel',{
        title: 'Добавить изображение',
        bodyStyle:'padding:5px 5px 0',
        height:100,
        items: [{
            xtype: 'filefield',
            name: 'document',
            fieldLabel: 'Выберите файл',
            msgTarget: 'side',
            allowBlank: false
        }],
        buttons: [{
            text: 'Загрузить',
            handler: function(){
                var form = this.up('form').getForm();
                if (form.isValid()) {
                        form.submit({
                        url: 'http://localhost/upload.php',
                        waitMsg: 'Загрузка...',
                        success: function(fp, o){
						if (o.result)
                            Ext.Msg.alert('Загрузка прошла успешно', 'Файл ' +o.result.file +" загружен");
                        }
                    });
                }
            }
        }]
    });

Ext.application({
    name: '',
    launch: function() {
        Ext.create('Ext.container.Viewport', {
            layout: {
				type: 'vbox',
				align: 'stretch'
			},
            items: [
				uploadForm
            ]
        });
    }
});


вот как это выглядит


Как бы позиционировать кнопку "Загрузить" так, чтобы она располагалась в ряд с кнопкой Brows сразу после неё?

Makarov 27.04.2014 23:10

Так что мешает кнопку описать в массиве items? Потом при необходимости, добавить контейнеру layout: 'column'.
Конфиг buttons приделывает кнопку к низу панели автоматически, а вам надо просто в саму панель ее положить и поиграться с layout
items: [{
            xtype: 'filefield',
            name: 'document',
            fieldLabel: 'Выберите файл',
            msgTarget: 'side',
            allowBlank: false
        },
        {
            xtype: 'button',
            text: 'Загрузить',
            handler: function(){
                var form = this.up('form').getForm();
                if (form.isValid()) {
                        form.submit({
                        url: 'http://localhost/upload.php',
                        waitMsg: 'Загрузка...',
                        success: function(fp, o){
						if (o.result)
                            Ext.Msg.alert('Загрузка прошла успешно', 'Файл ' +o.result.file +" загружен");
                        }
                    });
                }
            }
        }]

WalterScott 28.04.2014 21:06

Ой, оказывается всё очень просто. В сочетании с column layout получилось то, что хотел.


Часовой пояс GMT +3, время: 02:50.