PDA

View Full Version : Using TabReorderer as a plugin



Flipper
31 May 2012, 10:43 AM
I am trying to use the Ext.ux.TabReorderer plugin, but am having trouble getting it to work in a namespace.


When I do it normally (without a namespace defined), it works just fine. (Like below.)



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




But when I put it in a namespace it does not work.



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




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


Why is this and how can I fix it?

scottmartin
31 May 2012, 12:16 PM
[OMMITTED THIS PART]/extjs-4.1.0/examples/ux/TabReorderer.js

Where is the file located? You are getting a cross domain error as if you are accessing the file from another domain?

Scott.

Flipper
31 May 2012, 9:31 PM
file:///C:/Users/-----/----/----/extjs-4.1.0/examples/ux/TabReorderer.js?_dc=1338528587135

The error does not appear for the first bit of code, but does for the second. So it cannot be a cross browser request issue since it works for the first code.

I am assuming it has to do with namespaces, but I do not understand that too well.

vietits
1 Jun 2012, 12:36 AM
Try to do the following:

1. Set path for Ext.ux namespace:


Ext.Loader.setConfig({
enabled: true,
paths: {
'Ext.ux': 'Path to Ext.ux folder',
...
}
});

2. Force to load Ext.ux.TabReorderer before using it with Ext.require():


Ext.require(['Ext.ux.TabReorderer', ...]);


Using example:


Ext.Loader.setConfig({
enabled: true,
paths: {
'Ext.ux': 'path to ext.ux folder'
}
});
Ext.require([
'Ext.*',
'Ext.ux.TabReorderer'
]);
Ext.onReady(function(){
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
}]
});


var tab = Ext.create('MyApp.Layout.CenterTabs', {
renderTo: Ext.getBody()
});
});