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
Related
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...
}
}]
}
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 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.
I have a SplitButton at the bottom of the page and is not visible initially(we need to scroll down to see the bottom). When I scroll to SplitButton, then press arrow button to expand splitbutton's menu, menu appears under SplitButton(just as planned), and then scroll up, the menu remains on screen, and it is positioned relative to window, not the containing div.
I tried to initialize menu by passing floating: false to it's config, but in this case menu doesn't expands at all.
How can I posision SplitButton's menu to have it always under SplitButton?
My ExtJS version is 4.07
I think you're doing something wrong. I've tried with:
Ext.create('Ext.Panel', {
renderTo: Ext.getBody(),
html: 'loooooong panel',
height: 1500,
dockedItems: [{
xtype: 'toolbar',
dock: 'bottom',
items: [{
xtype: 'splitbutton',
text: 'My button',
menu: [{
text: 'Menu1'
},{
text: 'Menu2'
}]
}]
}]
});
Live example on jsfiddle, everything works fine. If you still have problems you should modify menuAlign property to suit your needs:
menu: [{
text: 'Menu1'
},{
text: 'Menu2'
}],
menuAlign: 'tl-bl?' // Default
where 'tl-bl?' means top left corner (of the menu) should be aligned with bottom left corner (of the button) and the '?' means that if there's no space the menu should be automatically moved.
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);
});
});
}
}
}