Extjs命名空间和TabReorderer

我想使用“ux”文件夹中提供的Ext.ux.TabReorderer插件，但无法使其在命名空间中工作。Extjs命名空间和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 cannot load [OMMITTED THIS PART]/extjs-4.1.0/examples/ux/TabReorderer.js?_dc=1338489585629. Cross origin requests are only supported for HTTP.

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

来源

2012-05-31 Flipper

首先，您看到的错误与您使用的代码无关。它看起来像某种脚本错误不使用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-01 02:47:19 pllee

Extjs命名空间和TabReorderer

回答

相关问题