0

我正在尝试使用“ux”文件夹中提供的 Ext.ux.TabReorderer 插件，但无法让它在命名空间中工作。

当我正常执行此操作时（未定义命名空间），它工作得很好。（如下所示。）

var tabPanel = Ext.create('Ext.tab.Panel', {
renderTo: Ext.Element.get('tabs1'),
        bodyStyle: 'padding: 5px',
        plugins: Ext.create('Ext.ux.TabReorderer'),
        items: [{
            xtype: 'panel',
            title: 'Tab 1',
            html : 'Test 1',
            closable: true
        }, {
            xtype: 'panel',
            title: 'Tab 2',
            html : 'Test 2',
            closable: true
        },{
            xtype: 'panel',
            title: 'Tab 3',
            html : 'Test 3',
            closable: true
        },{
            xtype: 'panel',
            title: 'Tab 4',
            html : 'Test 4',
            closable: true
        }]
    });

但是当我把它放在命名空间中时它不起作用。

Ext.define('MyApp.Layout.CenterTabs', {        extend: 'Ext.tab.Panel',
        bodyStyle: 'padding: 5px',
        plugins: Ext.create('Ext.ux.TabReorderer'),
        items: [{
            xtype: 'panel',
            title: 'Tab 1',
            html : 'Test 1',
            closable: true
        }, {
            xtype: 'panel',
            title: 'Tab 2',
            html : 'Test 2',
            closable: true
        },{
            xtype: 'panel',
            title: 'Tab 3',
            html : 'Test 3',
            closable: true
        },{
            xtype: 'panel',
            title: 'Tab 4',
            html : 'Test 4',
            closable: true
        }]
    });

在 Chrome 中我得到错误：

XMLHttpRequest 无法加载 [省略此部分]/extjs-4.1.0/examples/ux/TabReorderer.js?_dc=1338489585629。仅 HTTP 支持跨源请求。

为什么会这样，我该如何解决？

4

1 回答 1

0

首先，您看到的错误与您使用的代码无关。看起来可能是某种不使用网络服务器的脚本错误，我不知道。

话虽如此，您正在使用 Ext.define 错误http://docs.sencha.com/ext-js/4-1/#!/api/Ext-method-define。您在示例中所做的是将共享对象放在原型上，这通常不应该做。

相反，你想要类似的东西：

Ext.define('MyApp.Layout.CenterTabs', {
    extend : 'Ext.tab.Panel',
    //Strings can be put on the prototype and is good practice too
    //because it allows for easy configing  
    bodyStyle : 'padding: 5px',
    initComponent : function() {
        Ext.apply(this, {
            plugins : Ext.create('Ext.ux.TabReorderer'),
            items : [{
                xtype : 'panel',
                title : 'Tab 1',
                html : 'Test 1',
                closable : true
            }, {
                xtype : 'panel',
                title : 'Tab 2',
                html : 'Test 2',
                closable : true
            }, {
                xtype : 'panel',
                title : 'Tab 3',
                html : 'Test 3',
                closable : true
            }, {
                xtype : 'panel',
                title : 'Tab 4',
                html : 'Test 4',
                closable : true
            }]
        })

        this.callParent()
    }
});

var tabPanel1 = Ext.create('MyApp.Layout.CenterTabs', { renderTo: Ext.Element.get('tabs1') }),
    tabPanel2 = Ext.create('MyApp.Layout.CenterTabs', { renderTo: Ext.Element.get('tabs2') })
//Now the plugin instances will not be shared between the two variables.
于 2012-06-01T02:47:19.530 回答