ExtJs Tabpanel Close Event with Closable tabs - javascript

The listener I set up with doesn't seem to trigger. Here is my code:
new Ext.TabPanel({
id:'content-tab-panel',
renderTo: 'trx_tabs_ext',
activeTab: 0,
minTabWidth: 150,
tabWidth:180,
enableTabScroll: true,
autoScroll: true,
resizeTabs:true,
defaults: {
autoScroll:true
},
items: [{
title: 'No Active Chat',
id: 'no_chat',
closable: true,
autoScroll: false,
margins: '0 0 0 0',
html: "<div id=\"chat_window_viewer\" style=\"width:900px;height:440px;text-align:left; \"> </div>"
}],
width: '100%',
height: '400px',
listeners: {
tabchange: function(tabPanel, newTab, oldTab, index)
{
console.log('change tab');
},
beforeadd : function (tabpane, component, index) {
console.log('Adding new tab');
},
beforeclose: function(element) {
console.log('closing');
}
}
});
The beforeadd an tabchange triggers and do so by writing a log at the console. But, the beforeclose does not.
I also tried putting it inside the item of the Tabpanel, does not work either.
What is the correct way to adding a close event in the TabPanel?

To get items close event, add listener to that item.
Fiddle here: https://fiddle.sencha.com/#fiddle/59f

Which version of library you are using? Note that beforclose event available since 2.3.0.
It works for me when i listening event for item, not for whole panel
new Ext.TabPanel({
id:'content-tab-panel',
renderTo: 'trx_tabs_ext',
activeTab: 0,
minTabWidth: 150,
tabWidth:180,
enableTabScroll: true,
autoScroll: true,
resizeTabs:true,
defaults: {
autoScroll:true
},
items: [{
title: 'No Active Chat',
id: 'no_chat',
closable: true,
autoScroll: false,
margins: '0 0 0 0',
html: "<div id=\"chat_window_viewer\" style=\"width:900px;height:440px;text-align:left; \"> </div>",
listeners:{
'beforeclose': function(){console.log('closed')}
}
}],
width: '100%',
height: '400px',
listeners: {
tabchange: function(tabPanel, newTab, oldTab, index)
{
console.log('change tab');
},
beforeadd : function (tabpane, component, index) {
console.log('Adding new tab');
}
}
});

Since Extjs 2.3.0, tabpanels have a beforeclose event:
beforeremove( this, component, eOpts )
Fires before any Ext.Component is removed from the container. A handler can return false to cancel
the remove.
Available since: 2.3.0
Parameters
this : Ext.container.Container
component : Ext.Component
The component being removed
eOpts : Object The options object passed
to Ext.util.Observable.addListener.
so just add a listener in your tabpanel:
listeners: {
beforeremove: function (panel, item, eOpts) {
console.log(item); // the tab to be removed
}
. . . .
}

Related

Why elemen didn't create when it is drugguble EXTJS

I! buttons from my toolbar have to create panel.
And I have some problems, and questions.
1) when created panel is set druggable: true, panel didn't rents after click. And Chrome console throwns it: o such config "translationMethod" for class Ext.util.translatable.CssPosition. How to make it works (draggable)?
2)which the best way to create panel on the Main? like I do or another method? I use extjs 6.2 modern.
3)when centered is false, panel created anomalously (without header and title). how to fix it?
Toolbar is one from items of Main. 'mycuts' button is one from toolbar's items.
I hope somebody can help me
There is code:
{
text:'mycuts',
cls: 'grbuttons',
ui:'action',
height: 35,
width: 205,
margin:2,
handler: function() {
Ext.create('Ext.panel.Panel',{
height: 300,
id:'mycutareagrid',
header:{
title:'cuts',
draggable: true,
},
//draggable:true,
header: {
cls : 'hdr2'
},
width: 850,
renderTo:'bighBox',
centered:true,
margin: '98 0 0 215',
autoDestroy: true,
items:[{
xtype:'contlistII'
}],
collapsible:true,
clossable: true,
scope: this,
tools: [{
type:'help'
},{
type:'search'
},{
type:'close',
handler: function(e) {
e.hide()
}
}],
listeners:{
afterrender: function(e){
var d = e.getHeaderContainer();
e.setHeight(10);
}
}
})
}
}

How to open a modal on button click in ExtJS

I have tried below code its working fine for first time, but when I close popup and click on button again it stops working.
var myForm = new Ext.form.Panel({
width: 500,
height: 400,
title: 'Foo',
floating: true,
closable : true
});
//myForm.show();
Ext.create('Ext.Button', {
text: 'Click Me',
renderTo: Ext.getBody(),
listeners: {
click: function() {
myForm.show();
}
}
});
Because by default closeAction is equal to 'destroy', which means component will be destroyed on clicking the close button. After you destroy your myForm object, it won't be available on the second try.
solution:
1) You can change closeAction to 'hide' and after clicking the close button component will just hide in dom.
var myForm = new Ext.form.Panel({
width: 500,
height: 400,
title: 'Foo',
floating: true,
closable: true,
closeAction: 'hide'//<-------------
});
2) You can create new object on every click on the button.
Ext.create('Ext.Button', {
text: 'Click Me',
renderTo: Ext.getBody(),
listeners: {
click: function () {
new Ext.form.Panel({
width: 500,
height: 400,
title: 'Foo',
floating: true,
closable: true
}).show();
}
}
});
You can add the following to your panel. That would hide it after you close it
closeAction: 'hide'
If you were building a big screen though you'd be better off leaving it as is (it keeps the dom tidy) but you'll need to recreate the component then when you click the button again

Put a slider on each record from a tree panel extjs 5.1

I have a tree panel with data, and i want to add a slider with a rigthclick by a event, but the slider doesn't appear.
This is the code:
Tree:
var tree = Ext.create('Ext.tree.Panel', {
title: '',
width: 500,
height: 400,
//renderTo: Ext.getBody(),
reserveScrollbar: true,
loadMask: true,
useArrows: true,
rootVisible: false,
store: treeStore,
allowDeselect : true,
border : true,
animate: true,
listeners: {
checkchange: function(node, checked, eOpts) {
console.log('selected node:', node, checked, eOpts);
},
select: function( record, index, eOpts ){
console.log('Selected element:', record, index, eOpts);
},
beforedeselect: function( record, index, eOpts ){
console.log("", record);
}
});
Event:
tree.on('itemcontextmenu', function(view, record, item, index, event){
if(record.data.leaf != false){
Ext.create('Ext.slider.Single', {
id: 'sliderTable',
renderTo: document.body,
hideLabel: true,
width: 214,
minValue: 0,
maxValue: 100
});
}
event.stopEvent();
},this);
I'm using ExtJs 5.1
Here is a working fiddle for you - https://fiddle.sencha.com/#fiddle/mpg
Below is the changed code and comments to highlight the changes -
treepanel.on('itemcontextmenu', function(view, record, item, index, event, eOpts) {
event.stopEvent(); // this should be called before to stop browser default menu
if (record.data.leaf != false) {
slider = Ext.create('Ext.slider.Single', {
hideLabel: true,
floating: true, // set floating to true, check this for reason: [http://docs.sencha.com/extjs/5.1/5.1.0-apidocs/#!/api/Ext.slider.Single-cfg-floating][1]
width: 214,
minValue: 0,
maxValue: 100,
listeners: {
blur: function() {
slider.hide(); // Added a blur listener to hide slider on blur
}
}
});
slider.showBy(item, 'tl-tl', [event.getX() - view.getX(), 11]); // fix to display the slider right below the selected item
}
}, this);

How to temporary expand collapsed panel on mouse over title bar in extjs?

I have a border layout with two panels inside center and west regions. By default, west panel is collapsed and if you click on any part of the title bar while is collapsed, the panel is temporary expanded until you move the mouse pointer out of its boundaries.
What I want to do is to have this same "temporary expand" not by clicking on the panel's title bar, but just hovering over it. How can I make that possible?
Here is my code:
Ext.onReady(function() {
Ext.create('Ext.window.Window', {
width: 500,
height: 300,
layout: 'border',
items: [{
xtype: 'panel',
title: 'Center Panel',
region: 'center',
flex: 1
},{
xtype: 'panel',
title: 'West Panel',
region: 'west',
flex: 1,
collapsible: true,
collapsed: true,
animCollapse: false,
collapseDirection: Ext.Component.DIRECTION_BOTTOM,
titleCollapse: true
}]
}).show();
});
Please refer to the following fiddle for your convenience: http://jsfiddle.net/3FJ58/3/
Thanks in advance!
Yes, this is possible but you have to extend from Ext.panel.Panel to override the getPlaceholder method that is used by the borderlayout
getPlaceholder: function(direction) {
var me = this,
collapseDir = direction || me.collapseDirection,
listeners = null,
placeholder = me.placeholder,
floatable = me.floatable,
titleCollapse = me.titleCollapse;
if (!placeholder) {
if (floatable || (me.collapsible && titleCollapse)) {
listeners = {
mouseenter: {
// titleCollapse needs to take precedence over floatable
fn: (!titleCollapse && floatable) ? me.floatCollapsedPanel : me.toggleCollapse,
element: 'el',
scope: me
}
};
}
me.placeholder = placeholder = Ext.widget(me.createReExpander(collapseDir, {
id: me.id + '-placeholder',
listeners: listeners
}));
}
// User created placeholder was passed in
if (!placeholder.placeholderFor) {
// Handle the case of a placeholder config
if (!placeholder.isComponent) {
me.placeholder = placeholder = me.lookupComponent(placeholder);
}
Ext.applyIf(placeholder, {
margins: me.margins,
placeholderFor: me
});
placeholder.addCls([Ext.baseCSSPrefix + 'region-collapsed-placeholder', Ext.baseCSSPrefix + 'region-collapsed-' + collapseDir + '-placeholder', me.collapsedCls]);
}
return placeholder;
}
See the updated JSFiddle
Overriding is at least the cleanest way IMO. But it would also be possible to manipulate the placeholder created by the borderlayout.
#JoseRivas already posted something like this but with some issues I will add the snipped how this can be done in a cleaner way
listeners: {
afterrender: function(p){
p.placeholder.getEl().on('mouseenter', function(){ p.floatCollapsedPanel() })
}
}
See the updated JSFiddle
jacoviza. Can you try to capture focus event of panel. this link helps you. Extjs panel. Keyboard events
add a listener to the el of the placeholder for mouseover and then call the floatCollapsedPanel()
Ext.onReady(function () {
Ext.create('Ext.window.Window', {
width: 500,
height: 300,
layout: 'border',
items: [{
xtype: 'panel',
title: 'panel1',
region: 'center',
flex: 1
}, {
xtype: 'panel',
title: 'panel2',
region: 'west',
flex: 1,
id: 'mypanel2',
collapsible: true,
collapsed: true,
animCollapse: false,
collapseDirection: Ext.Component.DIRECTION_BOTTOM,
titleCollapse: true,
listeners: {
afterrender: {
fn: function (self) {
self.placeholder.getEl().on('mouseover', function () {
var panel = Ext.getCmp('mypanel2');
panel.floatCollapsedPanel()
})
}
}
}
}]
}).show();
});

Extjs accordion items how can i make an open item not to close again when clicking on it

I was wondering if it's possible to not to allow the user to close the item again when it's open, meaning to let it close only when i click on another item in the accordion.
hope it's clear enough.
I'm adding the code:
Ext.define('application.view.SystemHealth', {
extend: 'Ext.Container',
alias: 'widget.globalSynchronization',
requires: ['infra.view.views.BoxHeader',
'application.view.SystemStatusHeader',
'application.model.SystemHealth',
'application.store.SystemHealth',
'infra.utils.pvs.SyncJobRunningStep',
'application.view.CostCalculation',
'application.view.SystemStatusHeader',
'application.view.DataCollector',
'application.view.PublicCloudConnection',
'Ext.layout.container.Accordion'
],
layout:{
type:'vbox',
align:'stretch'
},
header: false,
cls: ['global-synchronization'],
syncJobStatus: null,
initComponent: function() {
var me = this;
me.store = Ext.create('itfm.application.store.SystemHealth');
me.store.load({scope: me, callback: me.onLoadDone});
Ext.apply(me, {
items: [
{
xtype: 'boxHeader',
width: '100%',
title: itfm.application.T.GlobalSynchronizationTitle
},
{
xtype: 'label',
width: '90%',
html: itfm.application.T.GlobalSynchronizationDescription,
margin: "0 0 30 10"
}
]
});
me.callParent(arguments);
},
onLoadDone: function(records, operation, success){
var me =this;
var accordionItemsMargin = '0 0 30 0';
me.accordion = Ext.create('Ext.panel.Panel', {
margin: "0 0 30 10",
defaults:[{
layout:'fit',
height:'100%',
width:'100%'
}] ,
layout: {
type: 'accordion',
titleCollapse: false,
animate: true,
activeOnTop: true,
fill : true,
collapseFirst :true
},
items: [
{
height: 180,
xtype: 'dataCollector',
autoScroll:true,
margins: accordionItemsMargin,
store: records[0].dcModule()
}
,
{
xtype: 'costCalculation',
margins: accordionItemsMargin,
store: records[0].ccModule()
},
{
xtype: 'publicCloudConnection',
margins: accordionItemsMargin,
store: records[0].pcModule()
}
]
});
me.add( me.accordion);
}
});
thanks for the help
What you want is that nothing happens when the user click on the currently expanded panel, instead of collapsing and expanding the next one, is that right?
Unfortunately, there's no built-in option for that... If you really want it, you'll have to override Ext.layout.container.Accordion and implement it yourself.
Edit
In fact most of the collapsing/expanding code lies in the Ext.panel.Panel class.
This simple override seems to be enough to do what you want. Apparently this method is used only for collapse listeners, so it shouldn't have any adverse effect (unless the method is also used somewhere in your code...).
Ext.define('Ext.ux.Panel.JQueryStyleAccordion', {
override: 'Ext.panel.Panel'
,toggleCollapse: function() {
if (this.collapsed || this.floatedFromCollapse) {
this.callParent();
}
}
});
See this fiddle.
I was able to override the accordion with the following
Ext.define('itfm.application.view.SystemHealthAccordion', {
extend: 'Ext.layout.container.Accordion',
alias: ['layout.systemHealthAccordion'] ,
constructor: function() {
var me = this;
me.callParent(arguments);
},
onComponentExpand: function(comp) {
var me = this;
me.callParent(arguments);
var button = comp.down('tool');
button.setDisabled(true);
},
onComponentCollapse: function(comp) {
var me = this;
me.callParent(arguments);
var button = comp.down('tool');
button.setDisabled(false);
}
});
inside the class of the first item of the accordion, there is a need to do the following:
me.on('boxready', me.disableTools);
},
// disable the click on the item in case it's open
disableTools: function(){
var me = this;
var button = me.getHeader().down('tool');
button.setDisabled(true);
}
so when the first item is open it will have the same behaviour

Categories

Resources