Adding tabs to an existing toolbar in ExtJS - javascript

I have an existing toolbar and would like to add tabs to it that would flip between two panels that use a card layout. What would be my best option and are there any examples of doing so?
Is it possible to add the tabs to my existing toolbar? Changing the xtype on my existing buttons didn't provide me with the tabs I was hoping to see.
Create a tab panel which would contain my two cards, mapping each tab to its panel. With this option, can I add additional buttons and menus to the tab panel?
Here's a sample of my existing toolbar code, can message_button and attachments_button simply have an xtype of tab and then somehow emulate the tab functionality?
Ext.define('MyArchive.Toolbar', {
alias: 'myarchive.toolbar',
extend: 'Ext.toolbar.Toolbar',
dock: 'top',
width: '100%',
items: [
// Pretty straight forward buttons with a listener, nothing fancy
messages_button,
attachments_button,
'->',
{ xtype: 'button', id: 'forward-button', text: 'Forward' },
'-',
{ xtype: 'button', id: 'recover-button', text: 'Recover' },
'-',
{
text: 'Download',
menu: {
xtype: 'menu',
id: 'download-menu',
items: [
{xtype: 'menuitem', id: 'download-original', text: 'Original', iconCls: 'download-icon'},
{xtype: 'menuitem', id: 'download-pdf', text: 'PDF', iconCls: 'pdf-icon'}
]
}
}
]

Is it possible to add the tabs to my existing toolbar? Changing the
xtype on my existing buttons didn't provide me with the tabs I was
hoping to see.
I've tried it. But no luck.
Create a tab panel which would contain my two cards, mapping each tab
to its panel. With this option, can I add additional buttons and menus
to the tab panel?
It is possible. But result looks ugly (you can decorate it with CSS).
Use tabpanel.tabBar.add() to add buttons and menus (Here is demo):
tabpanel.tabBar.add({
xtype: 'button',
text: 'hallo, I\'m a button'
});
tabpanel.tabBar.add({
xtype: 'splitbutton',
text: 'Download',
menu: {
xtype: 'menu',
id: 'download-menu',
// ans so on ...

Related

Better understanding Ext.tab.Panel and explicitly setting the html

I want to use a third party image library that needs to be instantiated with a string value that was used for a corresponding div id.
With that, I would like to use Ext.tab.Panel to be able to switch between each instantiated instance of the third party image library.
I’m struggling with being able to set the div's id on the containers of each tab.
For example:
Ext.define('MYAPP.view.MainView', {
extend: 'Ext.panel.Panel',
xtype: 'mainview',
controller: 'mainviewcontroller',
layout: 'fit',
tbar: [{
xtype: 'somebuttons',
}],
items: [{
xtype: 'imagetab',
title: 'tab1',
items: [{
xtype: 'container',
html: '<div id="instance1"></div>'
}]
}, {
xtype: 'imagetab',
title: 'tab2',
items: [{
xtype: 'container',
html: '<div id="instance2"></div>'
}]
}]
});
Then in the MainView controller, I listen to onBoxReady event and instantiate each instance of the third-party image library with the names instance1 and instance2 (same as the tab containers div id’s).
The third-party image library is instantiated fine, but the images don't show. When I inspect each tab's corresponding containers, there div ids aren’t what I set them to be above.
i.e.:
html: '<div id="instance1"></div>' or id="instance2"></div>'
Does anyone have any thoughts in how to set the div's id of each tab's containers?
Thanks for the help!
Try this:
Ext.create('Ext.TabPanel', {
renderTo: Ext.getBody(),
items: [{
xtype: 'container',
id: 'instance1',
autoEl: {
id: 'instance1', // must be same as container id
......
}
}]
});
It will create div with an id.

How to apply style for Ext js xtype tabpanel using style property?

I want to change style for Ext.tab.Panle element by writing inline css structure as like the following xtype : button element
{
xtype: "button",
itemId: "imageUploadButton1",
text: "Uploader",
style: {
background : '#C81820'
}
}
I want to change the style of tab-panel's header by writing css like this in a Json format. Is it possible?
Following is my tabpanel elemental structure:
{
xtype:"tabpanel",
activeTab:0,
items:[{
xtype:"panel",
title:"SHOPABLE IMAGES",
},{
xtype:"panel",
title:"LAYOUT SETTINGS"
},{
xtype:"panel",
title:"HOTSPOT SETTINGS"
}]
}
Thanks.
The tab headers are instances of Ext.tab.Tab, which are created dynamically by the tab panel. You can provide a tabConfig configuration on the tab panel's items to customize them, and since they're subclasses of Ext.Component, of course you can also set the style config:
items:[{
xtype: "panel",
title: "SHOPABLE IMAGES",
tabConfig: {
style: {
background: '#C81820'
}
}
},{
xtype: "panel",
title: "LAYOUT SETTINGS"
},{
xtype: "panel",
title: "HOTSPOT SETTINGS"
}]
Fiddle: https://fiddle.sencha.com/#fiddle/o7c

How to add Columns in Ext.js within ext.panel.Panel

Im designing a screen in which the header has a button with certain functionality. To acheive this I used
Ext.panel.Panel
Now I want to add columns within this screen below the header.
This is my code:
var screen = Ext.create('Ext.panel.Panel', {
title: 'Search',
tools: [{
xtype: 'button',
text: 'Click',
//code here for button functionality
}],
layout: 'column',
items: [{
text: "column1",
width: .5
}, {
text: "column2",
width: .5
}]
})
The error Im getting is that I can get the button to work on the header, but cannot see the columns. Is there a solution to fix this?
I have also included the image. The black rectangle shows how my columns are appearing.
In both Ext 4.1.1 and Ext 4.2.0 the following changes are required in your code:
Rename property text to title in the columns config
In the same config, rename property width to columnWidth
Add renderTo: Ext.getBody() attribute
jsfiddle seems to impose some limitations on how extjs panel is rendered. While I am not sure what's the issue with jsfiddle, here is a Plunker link that displays panel as expected.
IMO, ExtJs GridPanel is a better way to add tool bar to your panel and display tabular data. Read more about it in Sencha docs
I finally worked out the solution for my question. I needed a button functionality in the header and also columns which could have functionality like arranging the items in ascending/descending order etc (basically the grid.column)
var screen = Ext.create('Ext.panel.Panel', {
renderTo: Ext.getBody(),
title: 'Search',
tools: [{
xtype: 'button',
text: 'Click',
//code here for button functionality
}],
items:
[{xtype: 'gridpanel',
columns: [
{
header : "Column 1",
width: .5
},
{
header : "column2",
width: .5
}],
}],
});

Extjs Scroll to position inside tabPanel

I have a window, containing a tabPanel, this tabPanel has 4 tabs.
I wanted to write down something like user manual so I created several panels as blocks, each panel contains some text and pics.
from another button, I want to scroll to a particular postiton in that tab. How can I do it? here is my structure, and let's say I want the button to open the first tab, scrolling to the third panel (id:here).
tabPanel:
var tabs = Ext.createWidget('tabpanel', {
id: 'myTabs',
header: false,
activeTab: 3,
closable: true,
defaults:{ autoScroll:true },
items: [
{
title: 'first',
itemId: 'firstTab',
items: [
{
xtype: 'panel',
html: text39,
cls: 'layout_text1'
},
{
xtype: 'panel',
html: text40,
cls:'layout_subtitle'
},{
xtype: 'panel',
id: 'here',
html: text41,
cls: 'layout_text2'
}]
});
window:
var UMwindow = new Ext.Window({
id: 'myWindow',
name: 'userManual',
closable: true,
floating: true,
width: 900,
height: 600,
items : myTabs,
}).show();
I managed to open the window then activating the first tab using: Ext.getCmp('tabs').setActiveTab('firstTab'); but then I couldn't figure out how to scroll down to the position i need "third panel in my example". do I have to add property to the panel such as position or something?
I would gladly help but I'm unable to get a working jsfiddle demo out of this. I imagine that what you are trying to do requires firing setActiveTab for the tab panel then jumping to the item you would like to show, using that item's offset.

How to get panel within vbox layout to fill container?

I'm having trouble getting a panel to fill the space within its container panel. The container is a panel with a vbox layout having two child panels. I looked at Extjs how to set 100% height for vbox panel
and have something similar but it doesn't seem to work.
Screenshots:-
http://i.imgur.com/nAbCr.png
The screenshot is from when i use a 'fit' layout or dont even have the combobox or optionsview in a containing panel. So, what i want is for the 'options' panel to extend all the way down till the 'results' panel.
with the present vbox layout this is what i get - http://i.imgur.com/cB0k1.png
Ext.define('PA.view.CreateReportView', {
extend: 'Ext.panel.Panel',
alias: 'widget.createreportview',
id: 'createreport-panel',
requires: [
'PA.view.OptionsView', // options panel
'PA.common.Connection'],
title: 'Create Report',
items: [{
xtype: 'panel',
layout: {
type: 'vbox',
align: 'stretch'
},
items: [{
xtype: 'panel',
border: false,
height: '50px',
items: [{
xtype: 'combobox',
....
}]
}, {
xtype: 'panel',
border: false,
flex: 1,
items: [{
xtype: 'optionsview', // options panel
style: {
paddingTop: '10px'
}
}]
}]
}]
});
The value of height: should be a number, not a string. So use height: 50 instead.
I think you have it close to what you need. Couple of observations:
1. Heights need to be set as integers (no px suffix)
2. Each container that will have children should have a layout defined for them, even though there is default - it might not be what you want.
Here is your layout working reasonably well http://jsfiddle.net/dbrin/NJjhB/
One other suggestion I would add is to use a tool like Illuminations for Developers - a firebug plugin that knows about ExtJS framework.

Categories