The problem i am having is that i cannot get my tabs on an extjs tab panel to fill the entire width of the panel. I have tried calling resizeTabs but have not found an answer to this probelem thanks in advance.
In your tabpanel config, add the following tabBar config:
tabBar: {
defaults: {
flex: 1
},
dock: 'top',
layout: {
pack: 'center'
}
}
Add a "layout:fit" to the config of your individual panels.
var tabs = new Ext.TabPanel({
items: [{
title: 'Tab 1',
html: 'A simple tab',
layout: 'fit'
},{
title: 'Tab 2',
html: 'Another one',
layout: 'fit'
}]
});
Or for a DRYer approach, use the TabPanel's "defaults" config option if you want all the panels to have a "fit" layout:
var tabs = new Ext.TabPanel({
defaults: {
layout: 'fit'
},
items: [{
title: 'Tab 1',
html: 'A simple tab'
},{
title: 'Tab 2',
html: 'Another one'
}]
});
Related
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'
}],
});
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'
}]
});
I am trying to make a little proof of concept in ExtJS. I would like to add a panel with a tree into one of my tabs, but I can't seem to find the answer in the API.
The examples look like this
var tabs = Ext.create('Ext.tab.Panel', {
items: [
{
title: 'Tab 1',
html : 'A simple tab'
},
{
title: 'Tab 2',
html : 'Another one'
}
],
renderTo : Ext.getBody()
});
However I would like something like this :
var treegrid = Ext.create('KitchenSink.view.tree.TreeGrid', {....});
var tabs = Ext.create('Ext.tab.Panel', {
items: [
{
title: 'Tab 1',
html : 'A simple tab'
},
{
title: 'Tab 2',
myComponent : treegrid
}
],
renderTo : Ext.getBody()
});
I would like to know what i should put at myComponent. Obviously myComponent is not correct.
Sorry if this question seems really naive. I am VERY new to ExtJS.
The grid is a subclass of panel, so it just goes in directly under the tabs:
new Ext.tab.Panel({
items: [{
title: 'My Grid',
xtype: 'gridpanel',
columns: [],
// Other grid stuff
}]
});
Panel with accordion layout is contained in vbox with another one item.
I have a 2 troubles:
When i'm trying to set flex to panel with accordion layout it causes the error "[E] Layout run failed"
When height is fixed by constand it not working as expected: first panel does not collapse.
Here is example of code:
Ext.create('Ext.panel.Panel', {
title: 'Accordion Layout',
width: 300,
height: 500,
layout: 'vbox',
items: [{
xtype: 'datefield'
}, {
defaults: {
// applied to each contained panel
bodyStyle: 'padding:15px'
},
layout: {
// layout-specific configs go here
type: 'accordion',
titleCollapse: true,
animate: true
},
items: [{
title: 'Panel 1',
html: 'Panel content 1!'
}, {
title: 'Panel 2',
html: 'Panel content 2!'
}, {
title: 'Panel 3',
html: 'Panel content 3!'
}],
}],
renderTo: Ext.getBody()
});
http://jsfiddle.net/6DHM4/1/
I couldn't reproduce your error, but things look good for me with flex: 1 if I change the layout: 'vbox' to
layout: {
type: 'vbox',
align: 'stretch'
}
(see this fiddle)
may be the right way is to use layout 'anchor' against 'vbox'?
try that way?
Ext.create('Ext.panel.Panel', {
title: 'Accordion Layout',
width: 300,
height: 500,
layout: 'anchor',
items: [
{xtype: 'datefield'},
{
defaults: {
// applied to each contained panel
bodyStyle: 'padding:15px'
,anchor: '100%'
},
...
I don't know why, but when i test it on jsfiddle.net it shows bug: 'first panel does not collapse'. But if i test it here http://try.sencha.com/ for example, it works fine.
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);
}
}
});