EXTJS中创建点击打开新窗口的链接按钮的技术实现问询

Hey there! I see you're trying to create a link in ExtJS that opens a popup window when clicked. Let's sort out your current code and show you a couple of solid ways to get this working right.

First, Let's Fix Your Current Component Approach #

Your existing code has syntax issues with nested quotes and conflicting href/onclick values. Here's the corrected version that works properly:

{
    xtype: 'component',
    autoEl: {
        tag: 'a',
        html: 'Rearrange Column',
        href: '#', // Use # to prevent default page jump
        onclick: "window.open('http://your-target-url.com','popup','width=600,height=600'); return false;"
    }
}

• We set href: '#' to avoid the browser's default link navigation behavior
• The onclick function uses properly escaped quotes (single quotes inside double quotes) to avoid syntax errors
• return false ensures the browser doesn't try to navigate to the href after opening the popup

A More ExtJS-Native Approach: Using a Button Component #

If you want to stay consistent with ExtJS's component model (instead of rendering raw HTML), using a button with a click handler is a better choice. It keeps your code more maintainable and matches the rest of your app's styling:

{
    xtype: 'button',
    text: 'Rearrange Column',
    handler: function() {
        // Open the popup with your desired settings
        window.open('http://your-target-url.com', 'popup', 'width=600,height=600,resizable=yes,scrollbars=yes');
    }
}

This way, you're leveraging ExtJS's built-in event system instead of relying on inline HTML event handlers. You can easily adjust popup options (like enabling resizing or scrollbars) directly in the handler function.

Bonus: Using ExtJS Window for App-Inside Popups #

If you need to open a popup that's part of your ExtJS app (instead of an external URL), consider using Ext.window.Window instead of the browser's native window.open:

{
    xtype: 'button',
    text: 'Rearrange Column',
    handler: function() {
        Ext.create('Ext.window.Window', {
            title: 'Rearrange Columns',
            width: 600,
            height: 600,
            layout: 'fit',
            items: [
                // Add your custom components here (e.g., a grid, form, etc.)
                { xtype: 'panel', html: 'Column rearrangement controls go here' }
            ]
        }).show();
    }
}

This gives you full control over the popup's appearance and behavior using ExtJS's component system.

内容的提问来源于stack exchange，提问作者sandy