PDA

View Full Version : Tab Context Menu



muceli
16 Jan 2013, 8:54 AM
41318

How to set context menu like the one here? Ptype document: tabclosemenu found it but I do not understand how to use it. The menu will be the same. Close Tab, Close Other Tabs, Close All Tabs ...

droessner
16 Jan 2013, 9:12 AM
This is a plugin. You just need to specify Ext.ux.TabCloseMenu as one of the plugins of your tab panel for this to show up.

See http://docs.sencha.com/ext-js/4-1/#!/api/Ext.ux.TabCloseMenu

muceli
16 Jan 2013, 9:23 AM
Can you have an example of creating plugins and how to add the TabPanel?

droessner
16 Jan 2013, 10:06 AM
Here's a simple example:



<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="../ext/resources/css/ext-all.css">
<script type="text/javascript" src="../ext/ext-all-dev.js"></script>
<script type="text/javascript">
Ext.Loader.setConfig({
enabled: true,
paths: {
'Ext.ux': '../js/ux'
}
});


Ext.require(['Ext.ux.TabCloseMenu']);
Ext.onReady(function() {
Ext.create('Ext.tab.Panel', {
width: 500,
height: 300,
renderTo: Ext.getBody(),
layout: 'fit',
plugins: {
ptype: 'tabclosemenu'
},
items: [{
xtype: 'panel',
closable: true,
title: 'Tab 1'
}, {
xtype: 'panel',
closable: true,
title: 'Tab 2'
}, {
xtype: 'panel',
closable: true,
title: 'Tab 3'
}]
});
});
</script>
</head>
<body></body>
</html>

muceli
16 Jan 2013, 10:32 AM
Thank you for your help