I'm trying to have a subtabpanel in a tab panel. I did red some answers but not quite understood :(
Here for example, how can I heva tab 3, 4 and 5 appears with a back button on top when I click on tab 3 ? (everything I did : Tab 1, 2 and 3 stays there...)
Thanks :)
Main.js :
Ext.define('MyApp.view.MyNavigationView', {
extend: 'Ext.navigation.View',
config: {
ui: 'light',
items: [
{
xtype: 'tabpanel',
title: 'MyTabPanel1',
layout: {
animation: 'fade',
type: 'card'
},
items: [
{
xtype: 'container',
title: 'Tab 1',
iconCls: 'info'
},
{
xtype: 'container',
title: 'Tab 2',
iconCls: 'info'
},
{
xtype: 'container',
title: 'Tab 3',
iconCls: 'info'
}
],
tabBar: {
docked: 'bottom'
}
},
{
xtype: 'tabpanel',
title: 'MyTabPanel',
items: [
{
xtype: 'container',
title: 'Tab 3',
iconCls: 'info'
},
{
xtype: 'container',
title: 'Tab 4',
iconCls: 'info'
},
{
xtype: 'container',
title: 'Tab 5',
iconCls: 'info'
}
],
tabBar: {
docked: 'bottom'
}
}
]
}
});
In your case you push at once two tab panel into navigation view. But for first time you need only show first panel. For this you need add into navigation view only first panel. The second panel you need add to navigation view only when user choose third tab on first tabPanel. For this you should listen 'acitveitemchange' event and determine than 3 tab became active. Then push second tab pane.
Look this example
Ext.define('MyApp.view.MyNavigationView', {
extend: 'Ext.navigation.View',
config: {
ui: 'light',
autoDestroy: false
},
constructor : function(){
this.callParent(arguments);
this.firstTabPanel = Ext.create('Ext.tab.Panel',{
title: 'MyTabPanel1',
layout: {
animation: 'fade',
type: 'card'
},
items: [
{
xtype: 'container',
title: 'Tab 1',
iconCls: 'info',
html : 'TAB 1'
},
{
xtype: 'container',
title: 'Tab 2',
iconCls: 'info',
html : 'TAB 2'
},
{
xtype: 'container',
title: 'Tab 3',
iconCls: 'info',
html : 'TAB 3'
}
],
tabBar: {
docked: 'bottom'
}
});
this.secondTabPanel = Ext.create('Ext.tab.Panel',{
title: 'MyTabPanel',
items: [
{
xtype: 'container',
title: 'Tab 3',
iconCls: 'info',
html : 'TAB 3'
},
{
xtype: 'container',
title: 'Tab 4',
iconCls: 'info',
html : 'TAB 4'
},
{
xtype: 'container',
title: 'Tab 5',
iconCls: 'info',
html : 'TAB 5'
}
],
tabBar: {
docked: 'bottom'
}
});
this.firstTabPanel.on('activeitemchange', this.tabPanel1ActiveItemChange, this);
//show first tab panel
this.push(this.firstTabPanel);
},
tabPanel1ActiveItemChange : function(tabpanel, newtab){
//if newtab is third tab than show second tab panel
if(this.firstTabPanel.getInnerItems().indexOf(newtab)=== 2){
this.push(this.secondTabPanel);
}
}
});
Related
I need to implement a drop-down list from a tab panel similar to this
Did someone face something similar?
I tried to use treelist, but it doesn't really fit in this case, in my opinion.
Please take a look at the Ext.menu.Menu in the sencha docs :
You can do something like this
{
xtype: 'button',
text: 'MyButton',
menu: {
xtype: 'menu',
width: 120,
items: [
{
xtype: 'menuitem',
text: 'Menu Item',
menu: {
xtype: 'menu',
width: 120,
items: [
{
xtype: 'menuitem',
text: 'Menu Item'
},
{
xtype: 'menuitem',
text: 'Menu Item'
},
{
xtype: 'menuitem',
text: 'Menu Item',
menu: {
xtype: 'menu',
width: 120,
items: [
{
xtype: 'menuitem',
text: 'Menu Item'
},
{
xtype: 'menuitem',
text: 'Menu Item'
},
{
xtype: 'menuitem',
text: 'Menu Item'
}
]
}
}
]
}
},
{
xtype: 'menuitem',
text: 'Menu Item'
},
{
xtype: 'menuitem',
text: 'Menu Item'
}
]
}
}
var radioGroup = {
xtype: 'radiogroup',
itemId: 'radioButton',
layout: 'hbox',
width: 700,
defaults: {
flex: 1
},
items: [{
boxLabel: option1
name: 'timeInterval',
inputValue:0
checked: true
}, {
boxLabel: option2
name: 'timeInterval',
inputValue:1,
checked: false
}, {
boxLabel: option1
name: 'timeInterval',
inputValue:2,
checked: false
}],
listeners: {
change: function (radio, newValue, oldValue) {
if (radio.getValue().timeInterval == 2) {
cardPanel.layout.setActiveItem(0);
//getting error cardPanel.layout.setActiveItem is not a function
} else if (radio.getValue().timeInterval == 0) {
cardPanel.layout.setActiveItem(1);
} else if (radio.getValue().timeInterval == O1) {
cardPanel.layout.setActiveItem(2);
}
}
}
};
var cardPanel = {
layout: 'card',
itemId: 'PanelID',
activeItem: 0,
items: [{
itemId: 'timeIntervalPanel',
name: 'timeInterval',
xtype: 'timeintervalpanel',
selection: this.defaultData,
dateFormat: this.dateFormat,
timeFormat: this.timeFormat
}, {
id: 'specificIntervalPanel',
name: 'timeInterval',
xtype: 'specificinterval',
selection: this.defaultData
}, {
itemId: 'emptyPanel',
name: 'emptyCard',
xtype: 'panel'
}]
};
You need to use following steps :-
First you need to get component which you have provided layout:"card" in change event of RadioGroup.
Now, you need to get getLayout() of your component.
Now need to use setActiveItem(newItem) method of card layout component.
In this FIDDLE, I have created a demo using your code and put some modification. I hope this will help you.
Code Snippet
//Timeinterval panel
Ext.define('Timeintervalpanel', {
extend: 'Ext.panel.Panel',
xtype: 'timeintervalpanel',
html: 'This is timeintervalpanel'
});
//Specific Interval panel
Ext.define('SpecificInterval', {
extend: 'Ext.panel.Panel',
xtype: 'specificinterval',
html: 'This is specificinterval'
});
//Empty Panel
Ext.define('EmptyPanel', {
extend: 'Ext.panel.Panel',
xtype: 'emptyPanel',
html: 'This is emptyPanel'
});
//Panel with radio button and card item.
Ext.create('Ext.panel.Panel', {
title: 'Card Layout Example with radio buttons',
renderTo: Ext.getBody(),
height: window.innerHeight,
layout: 'vbox',
tbar: [{
xtype: 'radiogroup',
itemId: 'radioButton',
layout: 'hbox',
defaults: {
flex: 1,
margin: 5,
name: 'timeInterval'
},
items: [{
boxLabel: 'Timeinterval panel',
inputValue: 0,
checked: true
}, {
boxLabel: 'Specific Interval',
inputValue: 1
}, {
boxLabel: 'Empty Panel',
inputValue: 2
}],
listeners: {
change: function (radio, newValue, oldValue) {
var cardPanel = radio.up('panel').down('#PanelID').getLayout();
cardPanel.setActiveItem(newValue.timeInterval);
//Only just for animation
//activeItem.getEl().slideIn('r');
}
}
}],
items: [{
//This panel have provided card layout.
xtype: 'panel',
flex: 1,
width: '100%',
layout: 'card',
itemId: 'PanelID',
defaults: {
bodyPadding: 20
},
items: [{
xtype: 'timeintervalpanel'
}, {
xtype: 'specificinterval'
}, {
xtype: 'emptyPanel'
}]
}]
});
How to implement close , close all and close other tabs features on right click of tab-header in Extjs?
{
xtype: 'tabpanel',
region: 'center',
reference: 'tabPanelRef',
items: [{
tab-1
},{
tab-2
},{
tab-3
}],
}
Here is an example fiddle using the TabCloseMenu plugin. By including the plugin in your tabpanel, the close, close all and close other functions appear by right-clicking on the tab header.
Ext.define('ExampleTabs', {
extend: 'Ext.tab.Panel',
xtype: 'reorderable-tabs',
requires: [
'Ext.ux.TabCloseMenu',
'Ext.ux.TabReorderer'
],
plugins: [
'tabreorderer',
'tabclosemenu'
],
defaults: {
closable: true
},
items: [{
title: 'Tab 0 - fixed',
html: "Cannot reorder or close this",
reorderable: false,
closable: false
}, {
title: 'Tab 1',
html: 'Tab 1'
}, {
title: 'Tab 2',
html: 'Tab 2'
}, {
title: 'Tab 3',
html: 'Tab 3'
}, {
title: 'Tab 4',
html: 'Tab 4'
}],
});
I declared a Navigation view:
Ext.define('MyApp.view.Main', {
extend: 'Ext.navigation.View',
alias: 'widget.mainNavigationView',
requires: [
'Ext.TitleBar',
'MyApp.view.Home'
],
config: {
tabBarPosition: 'top',
navigationBar: {
id: 'mainNavBar',
ui: 'dark',
items: [{
xtype: 'button',
id: 'logoutUser',
text: 'Logout',
align: 'right',
hideAnimation: Ext.os.is.Android ? false : {
type: 'fadeOut',
duration: 200
},
showAnimation: Ext.os.is.Android ? false : {
type: 'fadeIn',
duration: 200
}
}]
},
items: [
{
xtype: 'homePage'
},
]
}
});
And the home page panel:
Ext.define('MyApp.view.Home', {
extend: 'Ext.Panel',
alias: 'widget.homePage',
config: {
title: 'Menu Principal',
},
items: [
{
store: {
fields: ['listItem'],
data: [
{listItem: 'Item 1'},
{listItem: 'Item 2'},
{listItem: 'Item 3'},
{listItem: 'Item 4'}
]
},
itemTpl: '{listItem}'
}
],
});
My problem is that the list (homePage Ext.Panel's item) is not rendering, I don't know exactly why. Any thoughts from guru guys? I'm just starting with sencha-touch and Ext.
You have a few problems with your home page panel:
The 'items' section is outside the 'config'
The xtype of the list is not set to 'list'
The panel is missing a layout
Ext.define('MyApp.view.Home', {
extend: 'Ext.Panel',
alias: 'widget.homePage',
config: {
title: 'Menu Principal',
layout: 'fit',
items: [
{
xtype: 'list',
store: {
fields: ['listItem'],
data: [
{listItem: 'Item 1'},
{listItem: 'Item 2'},
{listItem: 'Item 3'},
{listItem: 'Item 4'}
]
},
itemTpl: '{listItem}'
}
]
}
});
When I create a new extjs panel with a Card layout inside an other panel I will got the following error:
"Uncaught TypeError: Cannot read property 'addClsOnOver' of null"
What is this error mean and how can I fix this?
Panel inside the: this is the page where I want to show a tabbed panel inside the item of this panel.
Ext.define('app.view.dashboard.DashboardLeft', {
extend: 'Ext.panel.Panel',
xtype: 'dashboardLeft',
requires: [
'Ext.layout.container.VBox',
'OPENhrm.view.dashboard.widget.*'
],
controller: 'dashboard-dashboardLeft',
viewModel: {
type: 'dashboard-dashboardLeft'
},
layout: {
type: 'vbox',
pack: 'start',
align: 'stretch'
},
defaults: {
frame: false
},
items: [{
flex: 1,
xtype: 'taskboard' // show tabbed panel
}]
});
The tabbed panel:
Ext.define("app.view.dashboard.widget.Taskboard", {
extend: 'Ext.tab.Panel',
requires: [
'Ext.layout.container.Card'
],
xtype: 'taskboard',
controller: 'taskboard',
viewModel: {
type: 'taskboard'
},
id: 'taskboard',
// tabs
items:[{
title: 'tab 1',
html: 'test 1'
}, {
title: 'tab 2',
html: 'test 2'
}, {
title: 'tab 3',
html: 'test 3'
}]
});