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

まず、表示されているエラーは、使用しているコードとは関係ありません。Webサーバーを使用していないスクリプトエラーのようですが、手がかりがありません。

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 に答える