I'm teaching myself extjs and I am working with tabs. I can't figure out how to resize the whole container, not just the tabs, but where the data for each tab will show...I tried width: 400 but that made no change
Here's my code so far:
Ext.application({
name: 'HelloExt',
launch: function() {
Ext.require('Ext.container.Viewport');
Ext.create('Ext.container.Viewport', {
layout: 'fit',
items: [{
xtype: 'tabpanel',
width: 400,
activeTab: 0, // index or id
items:[{
title: 'Tab 1',
html: 'This is tab 1 content.'
},{
title: 'Tab 2',
html: 'This is tab 2 content.'
},{
title: 'Tab 3',
html: 'This is tab 3 content.'
}]
}]//end of viewport
});
}
});
Can someone give me a snippet for this? Thanks.
You use layout : 'fit' so the tabpanel can't get width property try layout : 'form'
Related
See fiddle here:
https://fiddle.sencha.com/#view/editor&fiddle/1u71
How to align "test" button to left on Extjs header?
When we delete the 'title' it renders as div tag with   content.
Please update solution because i have used "floating: true" which is moving the test button to left but complete header is in middle of page!
Ext.application({
name: 'Fiddle',
launch: function () {
Ext.onReady(function () {
Ext.create('Ext.panel.Panel', {
width: 500,
height: 500,
collapsible: true,
renderTo: Ext.getBody(),
header: {
titlePosition: 0,
title: "title",
items: [{
xtype: 'button',
text: 'test',
cls: 'lefty'
}]
}
});
});
}
});
Set titlePosition: 1 on your header. That will mean the button will go first, then the title, then the tools.
Added tbspacer block after the button xtype block to move button position to left. width is % value for responsive design.(You can keep title or remove)
header: {
items: [
{
xtype: 'button',
text: 'test ONE',
cls: 'lefty'
},
{
xtype:'tbspacer',
width: '80%' //change percentage to desired button position
},
{
xtype: 'button',
text: 'test TWO',
cls: 'lefty'
},
],
}
You can use config titlePosition to order items in header panel.
I am currently working on ExtJs and I am stuck at a place where I want to iterate through all components and find the parent tab of each component.
Ext.application({
name : 'Fiddle',
launch : function() {
Ext.create('Ext.tab.Panel', {
width: 300,
height: 200,
activeTab: 0,
items: [
{
title: 'Tab 1',
bodyPadding: 10,
items : [{
xtype: 'fieldset',
itemId: 'fieldsetId',
items: [{
xtype: 'checkbox',
fieldLabel: 'Check 1'
},{
xtype: 'checkbox',
fieldLabel: 'Check 2'
},{
fieldLabel: 'Combo 1',
xtype: 'combobox',
store: ['value1','value2','value3']
}]
},
{
xtype: 'button',
text: 'Reset',
}]
},
{
title: 'Tab 2',
html : 'Another one',
items: [{
xtype: 'button',
text: 'Test',
}]
}
],
renderTo : Ext.getBody()
});
}
});
In above code, when I iterate through all components and log name of the parent tab whether it is Tab 1 or Tab 2
Whenever you are iterating through all the components, just do
field.up().up()
where field is the component of your tab and above statement will return you the parent tabpanel and so with
field.up().up().title
will return you "Tab 1"
In the same way for tab 2 components it will be
field.up() only.
If you have only one loop or something to go through all components then you can put a condition that
if(field.up()) returns you the panel then read it\'s title
else do field.up().up() and then read the title.
I hope this solves you issue.
You can use , field.up('tabPanel') to get the reference of the tabPanel, and then from the reference you can get name,title for the tabPanel
I have a toolbar with buttons that are hidden by default, and then shown based on the user's privileges. They appear and function after I call .show(), but do not appear in the overflow menu when the window is resized. The items that are initially shown appear in the overflow menu correctly.
Any advice on how I can fix this problem?
Thanks
Edit: Here's the simplest example I could come up with that works with fiddle for the problem. https://fiddle.sencha.com/#fiddle/877
Ext.onReady(function(){
var toolbar1 = Ext.create('Ext.toolbar.Toolbar', {
region: 'north',
layout: {
overflowHandler: 'Menu'
},
items: [{
xtype: 'textfield',
emptyText: 'FIX ME'
},{
xtype: 'button',
text: 'Test Lists',
id: 'testListsButton',
hidden: true
},{
xtype: 'button',
text: 'All Lists',
id: 'allListsButton',
},{
xtype: 'button',
text: 'Other Lists',
id: 'otherListsButton',
hidden: true
},{
xtype: 'button',
text: 'Email Lists',
id: 'emailListsButton',
hidden: true
}]
});
Ext.getCmp('emailListsButton').show();
Ext.getCmp('otherListsButton').show();
Ext.getCmp('testListsButton').show();
var viewPort = Ext.create('Ext.container.Viewport', {
layout: 'border',
autoRender: true,
items: [
toolbar1
]
});
})
I found a work-around.
I set the items to be visible initially, hide them before they're rendered, and then show them again when checking the user's privileges. This properly displays the items in the overflow menu.
It looks like this is a bug, all be it a minor one.
I am using ExtJS 4 and trying to add button on a tab panel header. Please have a look at this jsfiddle:
http://jsfiddle.net/ramarajuv/Sadnj/7/ . You can see it working fine with just the two tabs. Now, modify the same code by adding a tabBar as below:
Ext.create('Ext.panel.Panel',{
renderTo : Ext.getBody(),
id : 'testPanel',
height : 200,
width : 300,
items: [{
xtype : 'tabpanel',
activeTab : 1,
tabBar:[{
dockedItems:[{
xtype: 'button',
text : 'Test Button'
}]
}],
items: [{
title: 'tab1'
},{
title: 'tab2'
}]
}]
});
No Javascript error is thrown, but the button that I want to see to the right of the tab panel header is not coming up. Could you please help how I can bring up a button on the tab panel?
If I understand your question it seems you want the button to be in the tabBar itself and not in its own toobar? If that's the case then you can use the following code available in this fiddle.
http://jsfiddle.net/Sadnj/15/
Ext.create('Ext.panel.Panel', {
renderTo: Ext.getBody(),
id: 'testPanel',
height: 200,
width: 200,
items: [{
xtype: 'tabpanel',
activeTab: 1,
tabBar: {
items: [{
xtype: 'tbfill'
}, {
xtype: 'button',
text: 'Test Button'
}]
},
items: [{
title: 'tab1',
}, {
title: 'tab2',
}]
}]
});
you can use this:
Ext.create('Ext.panel.Panel',{
renderTo : Ext.getBody(),
id : 'testPanel',
height : 200,
width : 200,
items: [{
xtype : 'tabpanel',
activeTab : 1,
tbar:[{
text : 'txtButton'
}],
items: [{
title: 'tab1'
},{
title: 'tab2'
}]
}]
});
this will make buttons for your tabpanel.
Add button to tabpanel header simply with this:
tabBar: {
items: [
{ xtype: 'tbfill' },//fill the empty space between left and right
{
xtype: 'button',
text: 'Button 1'
}
]
}
Background: I am developing an application using the senchatouch 2 MVC framework.
I am working on a screen which uses a tabpanel with two tabs.
Issue: In first tab, I want to display a titleBar and a List. I am able to display the titleBar but not the list inside the tab. When I inspected the element using Google Chrome, the list is shown as empty. I am using a sample List code from the sencha website. I am able to display list in another panel but it is not displayed when I am placing it as an item in tabPanel.
This is the code I am using:
Ext.define('POC.view.WUHomePage', {
extend: 'Ext.TabPanel',
requires: ['Ext.TitleBar', 'Ext.dataview.List', 'Ext.data.proxy.JsonP'],
alias: 'widget.wuHomePageView',
config: {
fullscreen: true,
tabBarPosition: 'bottom',
cardSwitchAnimation: 'slide',
defaults: {
styleHtmlContent: true
},
items: [{
// This is first tab
title: 'Home',
iconCls: 'home',
items: [{
xtype: 'titlebar',
title: 'Hello',
docked: 'top',
items: [{
xtype: 'button',
text: 'LogOut',
ui: 'action',
itemId: 'newButton',
align: 'right'
}]
}, {
xtype: 'list',
title: 'Sample',
fullscreen: true,
itemTpl: '{title}',
data: [{
title: 'Item 1'
}, {
title: 'Item 2'
}, {
title: 'Item 3'
}, {
title: 'Item 4'
}]
}]
},
// This is second tab
{
title: 'Contact',
iconCls: 'user',
html: 'Contact Screen'
}]
},
});
Do not set the list to fullscreen. Only one component should be set to fullscreen, in your case it is the TabPanel. Instead set the list to height 100% and the parent component with a fit layout.