Правильное расположение динамических элементов c внутреннего делителя в новой кнопке () Ext JS 3 - PullRequest
Новая
       10

Правильное расположение динамических элементов c внутреннего делителя в новой кнопке () Ext JS 3

0 голосов
/ 23 января 2020

В моем существующем ext js DynamicGridPanel была кнопка с именем «Удалить», которая была активирована, когда пользователь нажимал на строку, значит, создание и рендеринг кнопки обрабатывался rowclick config в Ext Js. сетка.

Требование клиента

До сих пор столбец действий остается пустым, что приводит к путанице для пользователя, пока пользователь не выберет строку, мой клиент попросит меня показать Удалите кнопку при загрузке страницы, чтобы у пользователя не возникало путаницы.

Мне как-то удалось заполнить кнопку в столбце действий, но при нажатии кнопки появляется внутренний элемент div со стилем, показывающим еще две кнопки confim и cancel.

enter image description here

при проверке Я обнаружил встроенный стиль для innerDiv, как показано на изображении ниже

enter image description here

фактическая проблема заключается в том, что стилизация применяется только для первой строки, но для следующих строк стили не добавляются.

при нажатии второй или третьей строки кнопки, появляющиеся в конце документа, как показано на изображении ниже

enter image description here

При проверке того же самого я обнаружил, что не было стилей, добавленного к последующие кнопки enter image description here

КОД: 

render : function(grid){            
                                        this.store.on('load', function(store, record, options){
                                             if(store.getTotalCount() == 0){
                                                document.getElementById("noRecordMsguserContent").style.display = 'block';
                                            }else{
                                                document.getElementById("noRecordMsguserContent").style.display = 'none';
                                            }


                                        var models = store.getRange();
                                        var currentPageCount=store.getCount();
                                        console.log("currentPageCount--- "+currentPageCount);
                                        if(document.getElementById('popDiv') != null)
                                        document.getElementById('popDiv').style.display = 'none';

                                        var num=0;
                                        for(num=0;num<=currentPageCount-1;num++){
                                        if(typeof models[num] != 'undefined'){
                                        models[num].set("tbl-fld-Buyer-Action", "");
                                        }
                                        }                                       
                                        //num = 1;
                                        for(num=0;num<=currentPageCount-1;num++){   
                                        models[num].set("tbl-fld-Buyer-Action", renderBuyerRemoveBtn(Ext.id(),""));
                                        }
                                        });
                                    },
                                    rowclick: function(trustedBuyergrid,selModel,rowIndex,record) {
                                        // OM-136


                                        // OM-136
                                    },

КОД ДЛЯ КНОПКИ УДАЛЕНИЯ РЕНДЕРА 

function renderBuyerRemoveBtn(val, p) {       
        var contentIdBuyer = val;       
        //createBuyerGridButton.defer(1, this, [val, contentIdBuyer]);
        createBuyerGridButton.defer(1, this, [val, contentIdBuyer]);
        return('<div id="' + contentIdBuyer + '"></div>');
    }

function createBuyerGridButton(value, createBuyerGridButton) {
    var selectedRowId=value;
    var outerBuyerDiv = document.createElement("div");  
        outerBuyerDiv.id = "popDiv-"+selectedRowId;
        outerBuyerDiv.className = "myontop";
        document.body.appendChild(outerBuyerDiv);
        var innerDiv = document.createElement("div");   
        innerDiv.id = "mypopup";
        innerDiv.className = "myclasspop";
        outerBuyerDiv.appendChild(innerDiv);
        innerDiv.innerHTML="";
        innerDiv.innerHTML = "<input id="+'leftButton'+" type="+'button'+" value="+getConfirmStaticText()+" onclick="+'confirmBuyerRemove('+"'"+selectedRowId+"'"+');'+">";
        innerDiv.innerHTML = innerDiv.innerHTML+"<input id="+'rightButton'+" type="+'button'+" value="+getCancelStaticText()+" onclick="+'cancelBuyerRemove('+"'"+selectedRowId+"'"+');'+">";
        new Ext.Button({text: '<s:property value="#session.StaticTranslation.getStaticText('ST920')"/>',id: 'txt', hidden: false, width: 50, handler : function(btn,e) {
        var remove = document.getElementById("txt");
        var x =  remove.getBoundingClientRect();                        
        var innerDiv = document.getElementById("mypopup");
        var scrollTop = document.documentElement.scrollTop?document.documentElement.scrollTop:document.body.scrollTop;
        console.log(scrollTop);
        var scrollLeft = document.documentElement.scrollLeft?document.documentElement.scrollLeft:document.body.scrollLeft;
        console.log(scrollLeft);
        innerDiv.style.top = x.top+20+scrollTop+'px';
        innerDiv.style.left = x.left+scrollLeft+'px';  
        innerDiv.innerHTML = "<input id="+'leftButton'+" type="+'button'+" value="+getConfirmStaticText()+" onclick="+'confirmBuyerRemove('+"'"+selectedRowId+"'"+');'+">";
        innerDiv.innerHTML = innerDiv.innerHTML+"<input id="+'rightButton'+" type="+'button'+" value="+getCancelStaticText()+" onclick="+'cancelBuyerRemove('+"'"+selectedRowId+"'"+');'+">";
        document.getElementById('popDiv-'+selectedRowId).style.display = 'block';   
    }}).render(document.body, createBuyerGridButton);    
}

Пожалуйста, помогите мне исправить то же самое

...