Упорядочить выбранные изображения бок о бок - EXTJS - PullRequest
Новая
       39

Упорядочить выбранные изображения бок о бок - EXTJS

0 голосов
/ 01 июля 2019

Я должен выбрать одно или несколько изображений по нажатию кнопки, которые должны отображаться рядом. Проблема в том, что изображения только упорядочены между собой.

Когда я нажимаю на кнопку, я получаю selectInstuctionIcon. Когда я выбираю одно или несколько изображений, мне нужно отображать их в поле рядом друг с другом.

Это основной код: 

{
                        xtype: 'fieldset',
                        layout: 'form',
                        title: dict.hazardAssessment.hazardIcon,
                        width: 400,
                        height: 400,
                        items: [{
                            xtype: 'button',
                            iconCls: 'iconAdd',
                            scale: 'small',
                            text: dict.hazardAssessment.selectHazardIcon,
                            handler: function () {
                                MyDesktop.getModule('selectInstructionIcon').createWindow('hazardIconId' + formId);
                            }
                        }, {
                            id: 'hazardIconId' + formId,
                            hidden: true,
                            xtype: 'textfield',
                            name: 'hazardIconId',
                            fieldLabel: 'icon1',
                            listeners: {
                                'valid': function () {
                                    var iconId = this.getValue();

                                    if (iconId > 0) {
                                        Ext.Ajax.request({
                                            url: config.httpbase + '/hazardIcons/' + iconId,
                                            success: function (data) {
                                                var response = Ext.decode(data.responseText);
                                                var iconHtml = Ext.getCmp('hazardIconPanel' + formId).el.dom.innerHTML;

                                                iconHtml += getIconDiv(response.id, response.type + '/' + response.filename);

                                                console.log(iconHtml);

                                                Ext.getCmp('hazardIconPanel' + formId).update(iconHtml);
                                            }
                                        });
                                    } else {
                                        iconHtml = getIconDiv(0, 'no_icon.png');
                                        Ext.getCmp('hazardIconPanel' + formId).update(iconHtml);
                                    }
                                }
                            }
                        }, {
                            id: 'hazardIconPanel' + formId,
                            xtype: 'panel',
                            border: true,
                            // region: 'center',
                            width: 350,
                            layout: 'fit',
                            autoScroll: true,
                            bodyStyle: 'padding: 5px;',
                            html: getIconDiv(0, 'no_icon.png'),
                        }]
                    }]

А это моя функция getIconDiv: 

var getIconDiv = function(iconId, filename) {
             var html = '<div id="hazardIcon_' + iconId + '" style="text-align:left;width:100%;float:left;">';
             html += '<img width="128px" src="'+ config.httpbase + '/uploads/hazardIcons/' + filename +'"/></div>';

             return html;
        };

Я получаю изображения, но они упорядочены следующим образом:

Вот что я получаю

И это журнал консоли. Я знаю, что деления не правы друг в друге, но я не знаю, как я решаю его. Журнал консоли

...