Question

我的目标很简单，对于某些需求，我必须通过widget.window测试ExtJS中的“弹出功能”。

我在HTML中创建了一个按钮，在JS文件中创建了一个pop-u，当我点击它时，一切正常，弹出窗口显示良好。

HTML按钮以这种方式编码：

<input type="button" id="popup-map" value="Pop Up"/>

JS以这种方式引用按钮：

Ext.application({
name: 'popup',
launch: function() {
    var popup,
    button = Ext.get('popup-map');
    button.on('click', function(){
    if (!popup) {
        popup = Ext.create('widget.window', {
            title: 'Pop-Up',
            header: {
                titlePosition: 2,
                titleAlign: 'center'
            },
            border: false,
            closable: true,
            closeAction: 'hide',
            width: 800,
            minWidth: 400,
            maxWidth: 1200,
            height: 500,
            minHeight: 550,
            maxHeight: 800,
            tools: [{type: 'help'}],
            layout: {
                type: 'border',
                padding: 2
            },
            items: [

                {
                region: 'center',
                xtype: 'tabpanel',
                items: [
                    mappanel, 
                    {
                    title: 'Description',
                    html: 'Attributs de l\'objet sous forme de tableau'
                    }
                ]
                }
            ]
        });
    }
    button.dom.disabled = true;
    if (popup.isVisible()) {
        popup.hide(this, function() {
            button.dom.disabled = false;
        });
    } else {
        popup.show(this, function() {
            button.dom.disabled = false;
        });
    }
});

问题是，如果我有两个包含id“popup-map”的按钮，则只有声明的第一个按钮正在工作。我想这是我编码的方式很正常。如何通过单击HTML中的几个按钮来调用JS文件中的弹出窗口包含？

谢谢： - ）

Answer 1

使用CSS类而不是重复的ID。重复的ID很糟糕，你知道......然后使用Ext.query代替Ext.get。您的代码应如下所示：

Ext.onReady(function() {

    var popup;

    function handler(button) {
         if (!popup) {
            // ...
         }

        // you've got button and popup, do your things
    }

    // adds the handler to every button with class 'popup-map' on the page
    Ext.query('button.popup-map', function(button) {
        button.on('click', handler);
    });
});

在搜索页面上的按钮之前，我正在使用Ext.onReady等待DOM准备就绪。这也为我们的局部变量popup和handler提供了一个闭包。

Answer 2

感谢@ rixo，这里的代码正常运行。我创建了一个名为customizer的空css类。

Ext.onReady(function() {
var popup, popup_visible;
function popup_constructor() {
//alert(this.getAttribute('pwet'));
    if (!popup) {
        popup = Ext.create('widget.window', {
            title: 'Pop-Up',
            id: 'popup',
            header: {
                titlePosition: 2,
                titleAlign: 'center',
                height: 30
            },
            border: false,
            closable: true,
            closeAction: 'hide',
            width: 800,
            minWidth: 400,
            maxWidth: 1200,
            height: 500,
            minHeight: 550,
            maxHeight: 800,
            tools: [{type: 'help'}],
            layout: {
                type: 'border',
                padding: 10
            },
            items: [
                {
                region: 'center',
                xtype: 'tabpanel',
                plain: true,
                items: [
                    {
                    title: 'Carte',
                    html: 'On mettra la carte ici',
                    border: false,
                    },
                    {
                    title: 'Description',
                    html: 'Attributs de l\'objet sous forme de tableau',
                    border: false,
                    }
                ]   
                }
            ]
        });
    }
    popup_visible = true;
    if (popup.isVisible()) 
        {
            popup.hide(this, function() {
                popup_visible = false;
        });
        } 
    else 
        {
            popup.show(this, function() {
                popup_visible = false;
            });
        }       
}
var popup_show = Ext.query('.customizer');
Ext.each(popup_show, function (item) {
    item = Ext.get(item);
    item.on('click', popup_constructor);
}, this); 
});

一个独特的弹出窗口，从不同的按钮调用 - ExtJS

2 个答案: