I have a tab panel with multiple tabs. Now I want to add a button which will redirect me to a new window on clicking the button in tab Panel. Can someone tell how to do this.
You can add custom button to tabBar:
tabBar: {
width: '100%',
items: [{
xtype: 'button',
text: "Redirect",
handler: function () {
window.redirect...
}
}]
}
Related
I have created two buttons in a panel :
{
xtype: 'button',
width: 196,
height: 29,
hidden: false,
text: "button1",
glyph: 'ab123#FontAwesome',
handler: 'onClick1',
reference: 'button1Click',
cls: 'buttons1Cls'
}, {
xtype: 'button',
width: 196,
height: 29,
hidden: false,
text: "button2",
glyph: 'ab123#FontAwesome',
handler: 'onClick2',
reference: 'button2Ref',
cls: 'buttons2Cls'
}
Each binded like shown to a different handler displaying different views like so :
onClick1: function () {
Ext.create('Mine.view.BaseWindow1', {
title: "panel1",
items: {
xtype: 'view1'
}
}).show();
}
And
onClick2: function () {
Ext.create('Mine.view.BaseWindow2', {
title: "panel2",
items: {
xtype: 'view2'
}
}).show();
}
My questions are how to make the panel1 and panel2 display exclusively :
if one panel is open and a user clicks on the second button the first panel closes first for the second to open (toggling panels)
one panel opens once (even in the case of a double click on the same button)
What i want is not a card layout solution but rather a solution where i can open centered windows individually on button click.
This is a card layout or tab panel. The tab panel uses the card layout and gives you tabs.
These examples are the modern toolkit but also available in the classic going back to at least version 3.
Kitchen sink example of card layout.
Kitchen sink example of tab layout
I want to add Ext.button.Split into panel's header instead of title. It must be something like switcher of a panel's content and title of the same panel together.
Is there any option in extjs 4 to do that? Or is there better solution instead of Split button? Unfortunately, switcher in panel header is the key requirement, so it must be placed there.
Below works for me ExtJs 4.2.2
{
xtype: 'panel',
......
header: {
titlePosition: 0,
items: [
{
xtype: 'splitbutton',
}
]
}
}
Add the header object to your panel with your tools and add items for buttons.
Ext.create('Ext.panel.Panel', {
width: 300,
height: 200,
renderTo: Ext.getBody(),
header: {
// if you want your button positioned on the right hand side add
// titlePosition: 0,
items: [{
xtype: 'splitbutton',
text: 'test'
}]
}
});
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 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.
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);
});
});
}
}
}