[extJs] Стилизовать xtype: 'modx-combo-browser'

Есть свой компонент и для загрузки файлов использовал modx-combo-browser. Сохранять значение в поле не нужно, нужно только функционал для загрузки файлов(диспетчер файлов), с чем modx-combo-browser отлично справляться. Но выглядит все как поле

Можно это как-то сделать в виде кнопки, вот таких например

Владимир

11 марта 2019, 13:32

2 270

Комментарии: 7

Володя

11 марта 2019, 15:55

можно:
— c помощью css убрать лишнее и стилизовать.
— переопределить modx-combo-browser и написать свою обертку для инпута.

Владимир

11 марта 2019, 16:13

спасибо )

буду благодарен, если по второму варианту скинете код на примере дефолтного кода

Володя

11 марта 2019, 17:01

Готовых примеров нет. Смотрите modx-combo-browser

MODx.combo.Browser = function(config) {
    config = config || {};
    Ext.applyIf(config,{
       width: 400
       ,triggerAction: 'all'
       ,triggerClass: 'x-form-file-trigger'
       ,source: config.source || MODx.config.default_media_source
    });
    MODx.combo.Browser.superclass.constructor.call(this,config);
    this.config = config;
};
Ext.extend(MODx.combo.Browser,Ext.form.TriggerField,{
    browser: null

    ,onTriggerClick : function(btn){
        if (this.disabled){
            return false;
        }

        //if (this.browser === null) {
            this.browser = MODx.load({
                xtype: 'modx-browser'
                ,closeAction: 'close'
                ,id: Ext.id()
                ,multiple: true
                ,source: this.config.source || MODx.config.default_media_source
                ,hideFiles: this.config.hideFiles || false
                ,rootVisible: this.config.rootVisible || false
                ,allowedFileTypes: this.config.allowedFileTypes || ''
                ,wctx: this.config.wctx || 'web'
                ,openTo: this.config.openTo || ''
                ,rootId: this.config.rootId || '/'
                ,hideSourceCombo: this.config.hideSourceCombo || false
                ,listeners: {
                    'select': {fn: function(data) {
                        this.setValue(data.relativeUrl);
                        this.fireEvent('select',data);
                    },scope:this}
                }
            });
        //}
        this.browser.show(btn);
        return true;
    }

    ,onDestroy: function(){
        MODx.combo.Browser.superclass.onDestroy.call(this);
    }
});
Ext.reg('modx-combo-browser',MODx.combo.Browser);

это xtype на основе Ext.form.TriggerField

создаете аналогичное свое. Далее можно определить в defaultAutoCreate создание поля и в onRender внести требуемые вам изменения. То есть либо создать скрытое поле, либо скрыть его…
Пробуйте. Готового решения у меня нет.

SEQUEL.ONE

11 марта 2019, 19:32

А как source ввести другой? У меня в одной форме есть выбор media-source. Я хочу привязать к форме тот путь, что я создал.

source: config.source || MODx.config.default_media_source
    });

Как я понимаю нужно что-то с этим делать.

Баха Волков

11 марта 2019, 17:20

По моему совсем не с той стороны зашли, ведь нужен всего лишь функционал загрузки файлов. Вот пример метода в modx.tree.directory.js:

,uploadFiles: function(btn,e) {
        if (!this.uploader) {
            this.uploader = new MODx.util.MultiUploadDialog.Dialog({
                url: MODx.config.connector_url
                ,base_params: {
                    action: 'browser/file/upload'
                    ,wctx: MODx.ctx || ''
                    ,source: this.getSource()
                }
                ,cls: 'ext-ux-uploaddialog-dialog modx-upload-window'
            });
            this.uploader.on('show',this.beforeUpload,this);
            this.uploader.on('uploadsuccess',this.uploadSuccess,this);
            this.uploader.on('uploaderror',this.uploadError,this);
            this.uploader.on('uploadfailed',this.uploadFailed,this);
        }
        this.uploader.base_params.source = this.getSource();
        this.uploader.show(btn);
    }

Нужно создать кнопку которая бы вызывала данный метод и ~~всё~~. Ну не совсем всё, а остальные методы ошибки, методы которые возвращают id нужного источника и т.д., но это куда лучше чем стилизовать combo

Володя

11 марта 2019, 17:30

ну вариантов то вообще тьма, но вопрос то был

Стилизовать xtype: 'modx-combo-browser'

так то создавай кнопку и на хандлер вешай хоть какую загрузку…

Баха Волков

11 марта 2019, 17:35

Тоже верно, тогда советую автору не стилизовать combo, а сделать как я посоветовал

Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.