Extjs 네임 스페이스 및 TabReorderer

Question

"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 
     }] 
    }); 

. (아래처럼)하지만 네임 스페이스에 넣을 때 작동하지 않습니다.

XMLHttpRequest cannot load [OMMITTED THIS PART]/extjs-4.1.0/examples/ux/TabReorderer.js?_dc=1338489585629. Cross origin requests are only supported for HTTP.

왜이 내가 그것을 어떻게 해결할 수 : 크롬에서

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 
     }] 
    }); 

나는 오류를 얻을?

Answer 1

첫 번째 오류는 사용중인 코드와 관련이 없습니다. 어쩌면 웹 서버를 사용하지 않는 스크립트 오류 일 수 있습니다. 단서가 없습니다.

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. 

:

대신 당신이 뭔가를하려는