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

Question

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

我在 HTML 中创建了一个按钮，在 JS 文件中创建了一个弹出窗口，当我单击它时，一切正常，弹出窗口显示得很好。

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 提供了一个闭包。