Is there a way to attach an OnClick event to a tab switch in EXTJS?
I make the grid like this:
var simple = new Ext.FormPanel({
labelWidth: '100%',
border:false,
width: '100%',
style:
{
height: '291px'
},
items: {
xtype: 'tabpanel',
activeTab: 0,
//labelWidth: 75, // label settings here cascade unless overridden
items:[{
url:'save-form.php',
title: 'Tab 1',
...
Thanks!
I added in a listener after the tabs were defined like this:
//define all tabs, and after the ] from the tab panel JSON:
listeners: {
'tabchange': function(tabPanel, tab) {
alert("tab changed");
}
}
This just alerts when the tab changed, which is sufficient for my purposes. I'm not sure though how to find out which tab is the current tab.
Hope this helps someone in the future.
There is a tabchange event that fires when the active tab changes: http://www.sencha.com/learn/Ext_FAQ_TabPanel
There is no event for tab click in TabPanel, however you can bind into click event on each tab. You can add custom event.
Following example help to you.
{
xtype : 'tabpanel',
items : [{
xtype : 'panel',
title: 'ABC'
},{
xtype : 'panel',
title : 'XYZ'
}],
listeners: {
render: function() {
this.items.each(function(panel){
// Added tabclick event for tabpanel
panel.tab.on('click', function(){
panel.addEvents('tabclick'); // addded event to panel
panel.fireEvent('tabclick', panel);
});
});
}
}
}
Related
Following code
Ext.define('Fiddle.Panel', {
extend: 'Ext.Container',
layout: 'card',
items: [{
html: 'Check the console. Panel 2.1 fires activate event desipte the panel 1 being active',
xtype: 'panel',
listeners: {
activate: function (){
console.log('1 active');
}
}
},{
xtype: 'panel',
layout: 'card',
items: [{
xtype: 'panel',
// items: [... fieldpanel, fields here]
listeners: {
activate: function (){
console.log('2.1 active');
}
}
},{
xtype: 'panel',
listeners: {
activate: function (){
console.log('2.2 active');
}
}
}
}],
listeners: {
activate: function (){
console.log('2 active');
}
}
}]
});
Will immediately output.
1 active
2.1 active
I would like to focus a text field in the panel 2.1 on activation, but the event is fired even the field respectively whole 2.1 panel is not rendered yet as it is a child of inactive panel 2. Is this a feature or bug ? Should I use different approach ? Thank you for help.
Sencha Fiddle
https://fiddle.sencha.com/fiddle/39vc
Your two card layout panels (containers) will have an active item. So that is why they are both firing the activate event.
I would do the focus on the activeitemchange event and init. Here is a fiddle:
Fiddle
I had to do a defer in the init to be sure the field was rendered. there may be a better way to do this. See the buttons at the bottom to switch between the two panels.
I want to remove the active tab from sencha ext.
Assume that am into controller file of the view.
Note: I have used remove() as well as destroy().
destroy() function works fine but tab header is not getting removed.
coseResultTab() {
this.getView().destroy();
}
Before Clicking on Cancel button:
After Clicking on Cancel button
You should destroy the active tab in your tabpanel, eg:
Controller
Ext.define('MyViewController', {
extend: 'Ext.app.ViewController',
alias: 'controller.myview',
destroyTab: function() {
this.getView().down('tabpanel').getActiveTab().destroy();
}
});
View
Ext.create('Ext.Panel', {
width: 400,
height: 400,
renderTo: document.body,
title: 'Panel',
id: 'myPanel',
controller: 'myview',
items: [{
xtype: 'tabpanel',
items: [{
title: 'Foo',
items: [{
xtype: 'button',
text: 'Destroy!',
handler(btn) {
Ext.getCmp('myPanel').getController().destroyTab();
}
}]
}, {
title: 'Bar',
items: [{
xtype: 'button',
text: 'Destroy!',
handler(btn) {
Ext.getCmp('myPanel').getController().destroyTab();
}
}]
}]
}]
});
Fiddle
I enhanced the answer from Matheus to meet the requirement a bit more:
not destroying the entire tab, but only the content
setting the button handler without the use of getController (please try not to use this, as it is considered bad practice by Sencha)
removed the outer panel which only added a title
Fiddle
You can also remove it using the tab bar using closeTab() which pretty much just runs a tabs.remove(tabRefOrObj);
https://docs.sencha.com/extjs/6.5.3/modern/Ext.tab.Bar.html#method-closeTab
I have a Ext.Tab,Panel where I have multiple tabs created dynamically.
Each of this tabs contains a Ext.panel.panel. What I need to do is to add a tooltip the the tab. I was trying to do something like this:
Ext.define('XXX.XXX.XXX.MyCustomPanel', {
extend: 'Ext.panel.Panel',
setTabTitle: function() {
title = 'some title';
try {
this.setTitle(title);
this.getHeader().getEl().set({
'data-qtip': title
});
} catch (e) {
}
}
Nevertheless, the tab is not the header so it is not applying the tooltip to the tab
Any idea
Edit:
Also found another way to do this:
this.tab.setTooltip('tool tip');
Thanks,
Each tab button is instance of Ext.tab.Tab class. When you creating new panel in tab panel, you can specify configuration for tab button by tabConfig option.
So in tabConfig option you easily specify tab tooltip by:
tabConfig: {
tooltip: 'Tooltip text'
}
This code create new Ext.Tab.Panel with two tabs which have defined tooltip and dynamicly create third one which also have tooltip:
var tabPanel = Ext.create('Ext.tab.Panel', {
width: 400,
height: 400,
renderTo: Ext.getBody(),
items: [{
title: 'Foo',
tabConfig: {
tooltip: 'A Foo tab tooltip'
}
}, {
title: 'Bar',
tabConfig: {
tooltip: 'A Bar tab tooltip'
}
}]
});
var dynamiclyCreatedTab = Ext.create('Ext.panel.Panel',{
tabConfig: {
title: 'Dynamicly created tab',
tooltip: 'A Dynamicly created tab tooltip'
}
});
tabPanel.add(dynamiclyCreatedTab);
See fiddle: https://fiddle.sencha.com/#fiddle/1q8
i define a treeGrid with plugin CellEditing like
Ext.define('MyExample', {
extend: 'Ext.tree.Panel',
id: 'example',
alias: 'example',
....
plugins: [
Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 1,
listeners: {
beforeedit: function(plugin, edit){
alert('don't run second time');
}
}
})
],
...
And i have a button when i click this button will call below window (this window has treeGrid above)
Ext.create('Ext.window.Window', {
title: 'Phân xử lý',
modal:true,
height: 500
width: 500
layout: 'border',
...
item[
{
title: 'example',
region: 'center',
xtype: 'example', // that here
layout: 'fit'
}
]
Everything working at first time but when i close the window at first time and click button to call window again then CellEditting still working but listeners not working ?
How to fix that thanks
EDIT
Please see my example code in http://jsfiddle.net/E6Uss/
In first time when i click button. Everything working well like
But when i close Example window and open it again I try click to blocked cell again i get a bug like
How to fix this bug? thanks
The problem here is that you are using Ext.create inside the plugins array for the tree grid. This have the effect of creating it once and attaching the result adhoc to your defined class.
If you close the window, all the resources within the window are destroyed. The second time you instantiate the tree panel, the plugin is not there. Take a look at this fiddle : I see what your issue is. Take a look at http://jsfiddle.net/jdflores/E6Uss/1/
{
ptype : 'cellediting',
clicksToEdit: 1,
listeners: {
beforeedit: function(plugin, edit){
console.log('EDITOR');
if (edit.record.get('block')) {
alert('this cell have been blocked');
return false;
}
}
}
}
You're recreating the window on every click of the button. This recreation may be messing with your configuration objects or destroying associations or references within them, or something similar. Try to reuse the window everytime by replacing your button code with something like:
Ext.create('Ext.Button', {
text: 'Click me',
visible: false,
renderTo: Ext.getBody(),
handler: function(button) {
if(!button.myWindow)
{
button.myWindow = Ext.create('Ext.window.Window', {
title: 'Example',
height : 300,
width : 500,
layout: 'border',
closeAction: 'hide',
items: [{
region: 'center',
floatable:false,
layout:'fit',
xtype: 'example',
margins:'1 1 1 1'
}
]
});
}
button.myWindow.show();
}
});
Maybe it needed complete the editing cell, try finish it:
...
beforeedit: function(plugin, edit){
alert('don't run second time');
plugin.completeEdit();
}
Sencha: CompleteEdit
I put together a working example here: http://jsfiddle.net/jdflores/6vJZf/1/
I think the problem with your column is that it's dataIndex is expecting that the editor value be a boolean type (because 'block' was set as datIndex instead of 'date'). I assume you are using the 'block' field just to identify which are blocked to be edited. I modified the fidle provided here: http://jsfiddle.net/jdflores/6vJZf/1/
{
text: 'Block Date',
dataIndex: 'date',
xtype: 'datecolumn',
format: 'd/m/Y',
editor: {
xtype: 'datefield',
allowBlank: true,
format: 'd/m/Y'
}
}
I have a little problem here with Sencha Touch 2:
My App has 2 views/lists: news and events. Both have detail views.
On the news list Iam showing an filter and sort button and on the events list Iam want to show only the filter button.
When I click on an item, the nav controller automatically adds an back button.
What I do atm is:
- when the user clicks an item in the list: hide all buttons
- when the user clicks the back button: show all buttons
And thats the problem... I cannot see if it was the back button on the news detail view or the events detail view.
In my controller I have:
"mainnav[id=mainNav]": {
back: 'showButtons',
},
when I try:
"panel[id=newsDetail]": {
back: 'showButtons',
},
the event gets not triggered.
So how can I know is it was the news or events back button?
Thanks!
Edit: Its not easy to explain... here is some more information:
The "mainNav" is a navigation view and the back button gets added to its toolbar.
Ext.define('MyApp.view.MainNav', {
extend: 'Ext.navigation.View',
alias: 'widget.mainnav',
config: {
id: 'mainNav',
maxWidth: '350px',
items: [
{
xtype: 'tabpanel',
layout : {
type : 'card'
},
...
items: [
{
xtype: 'list',
title: 'News',
id: 'newsList',
store: 'newsStore',
grouped: true,
onItemDisclosure: true,
...
{
xtype: 'list',
title: 'Events',
iconCls: 'team',
id: 'eventList',
store: 'eventStore',
onItemDisclosure: true,
...
tabBar: {
docked: 'bottom'
}
...
and the navigation bar with its buttons:
navigationBar: {
minWidth: '',
width: '',
id: 'navBar',
layout: {
align: 'center',
type: 'hbox'
},
items: [
{
xtype: 'button',
id: 'settingsButton',
align: 'left',
iconCls: 'settings6',
iconMask: true
},
{
xtype: 'button',
id: 'filterbutton',
align: 'right',
iconCls: 'list',
iconMask: true
}
]
},
What iam trying to do now:
"mainnav[id=mainNav]": {
back: 'showButtons',
},
get triggered when the user hits the back button (doesnt matter if he id in newsDetail or eventsDetail) but I want to know which view the user sees after he taps the back button.
If he sees the news list then I want to show both buttons (filter and seetings) but is he sees the events list I only want to show one button.
I need something like:
showButtons: function(component, options) {
if(Ext.getCmp(backButton).down().getId() == 'newsList'){
//show 2 buttons
}else{
//show one button
}
}
Sorry if the answer is confusing... I dont know how I could explain it better.
Anyway, I would appreciate any help/idea!
A panel doesn't have a back event. So it will never get fired.
mainnav is a custom xtype you defined right? Else that selector is wrong as well.
Got a solution:
var activePanel = Ext.getCmp('MainTabPanel').getActiveItem();
var activeItem = activePanel.getItemId();
if(activeItem == 'newsList'){
this.filterNewsStore();
Ext.getCmp('showSettingsButton').show();
Ext.getCmp('filterButton').show();
}
if(activeItem == 'eventList'){
this.filterEventsStore();
Ext.getCmp('showSettingsButton').hide();
Ext.getCmp('filterButton').show();
}
I call this code when the back button gets fired.