PDA

View Full Version : Ext.ux.TabReorderer not working



bobmanc
14 Nov 2013, 7:16 AM
I am trying to use the TabReorderer code in ExtJS 4.1 and it doesnt seem to work right. If I click on a tab I cant drag it left or right. Strangely if I drag down the tab will disappear down.
Here is the code I am trying.



<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css"/>
<script type="text/javascript" src="ext/ext-all.js"></script>
<script type="text/javascript" src="js/ux/Ext.ux.BoxReorderer.js"></script>
<script type="text/javascript" src="js/ux/Ext.ux.TabReorderer.js"></script>
<script>
Ext.onReady(function ()
{
var tabs = Ext.widget('tabpanel', {
renderTo: 'tabs1',
width: 450,
activeTab: 0,
defaults: {
bodyPadding: 10
},
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
}
]
});
});
</script>
</head>
<body>

<div id="tabs1">
</div>

</body>
</html>

tobiu
14 Nov 2013, 8:42 AM
It does work for me using Sencha Fiddle and 4.1.0, 4.1.1 and 4.2

https://fiddle.sencha.com



Ext.Loader.setConfig({
enabled: true
});

Ext.application({
name: 'Fiddle',

requires: ['Ext.ux.TabReorderer'],
launch: function() {
var tabs = Ext.widget('tabpanel', {
renderTo: Ext.getBody(),
width: 450,
activeTab: 0,
defaults: {
bodyPadding: 10
},
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
}]
});
}
});


I recommend to migrate to the latest framework version anyway.

bobmanc
14 Nov 2013, 10:47 AM
Upgraded and it works fine now