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'
}
]
}
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 need to add a button to the column header besides the filters menu (like the blue mark on the photo)
A little hack like this could work. Just get the layout aligned to show content in left and right most parts of Container.
Ext.create('Ext.container.Viewport', {
layout: 'fit',
items: [{
xtype: 'container',
items: [{
xtype: 'grid',
sortable: true,
columns: [{
flex: 1
}, {
text: "Age",
flex: 1
}],
listeners: {
afterrender: function (grid) {
var columns = grid.columnManager.getColumns();
var nameCol = columns[0];
var targetDom = nameCol.textInnerEl.dom;
var newPanel = Ext.create('Ext.container.Container', {
items: [{
xtype: 'label',
text: "Name"
}, {
xtype: 'button',
text: "DO IT"
}],
renderTo: targetDom
});
}
}
}]
}]
});
Fiddle: https://fiddle.sencha.com/#view/editor&fiddle/29o8
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'm trying to build a FormPanel in my application, made by a field and two buttons.
The problem is that, while textfield is shown, Buttons are not shown on the view!
This is the Login.js view:
Ext.define('appTrial.view.Login',{
extend: 'Ext.form.Panel',
xtype: 'Login',
alias: 'widget.Login',
config : {
id : 'LoginId',
title : 'Welcome',
resizable : false,
collapsible : true,
bodyPadding : '5',
buttonAlign : 'center',
border : false,
trackResetOnLoad : true,
items : [{
docked: 'top',
xtype: 'titlebar',
title: 'Welcome to My New App!!!'
},
{
xtype: 'container',
name: 'mainContainer',
layout: {
type: 'vbox',
align: 'center',
pack: 'center'
},
//width : '100%',
items : [{
layout: {
pack: 'center'
},
html :'Associa attivita',
margin: '80 0 0 0'
},{
xtype: 'fieldset',
items: [{
xtype: 'textfield',
name: 'codAttivita'
}]
}],
buttons :[{
text : 'Associa',
itemId : 'btnAssocia',
formBind : true,
ui: 'confirm'
},{
text : 'Reset',
itemId : 'btnReset',
formBind : true,
ui: 'decline'
}]
}]
}
});
Does anyone have any idea?
Thanks in advance
Containers doesn't have the button config. You must define the button config into the formpanel object.
I'm new in extjs.
Currently a panel have been created and set to north region.
Ext.create('Ext.panel.Panel', {
layout: {
type: 'border'
},
bodyStyle: 'background: yellow;',
height : 700,
width : '100%',
renderTo: Ext.get("example"),
items : [{
title: 'navigationBar',
header: false,
region: 'north',
xtype: 'panel',
//margins: '5,5,5,5',
items: [
MenuBar
]
}
And I also create a toolbar in my child class, which ready to call from my parent class and place to the north region panel.
Ext.define('adminInterface', {
extend: 'Ext.toolbar.Toolbar',
items: [{
xtype: 'tbbutton',
text: 'Button',
},{
xtype: 'tbbutton',
text: 'Button1',
menu: [{
text: 'Good',
},{
text: 'Better',
},{
text: 'Best',
}]}]
});
Once I execute the code, the toolbar variable from child class was call, but it not show out the interface.
Thanks for anyone share their information.
Hi refer my sample example
Ext.create('Ext.panel.Panel', {
title: 'Hello',
width: 200,
html: '<p>World!</p>',
renderTo: Ext.getBody(),
tbar: new Ext.Toolbar({
//your Toolbar config options
})
});
Still we can able to see more sample from existing post as shown below
How do i add a toolbar to my layout in extjs?
Extjs 4 add toolbar to panel dockeditems run-time
var myBtnHandler = function(btn) {
Ext.MessageBox.alert('You Clicked', btn.text);
},
fileBtn = Ext.create('Ext.button.Button', {
text : 'File',
handler : myBtnHandler
}),
editBtn = Ext.create('Ext.button.Button', {
text : 'Edit',
handler : myBtnHandler
}),
tbFill = new Ext.toolbar.Fill();
var myTopToolbar = Ext.create('Ext.toolbar.Toolbar', {
items : [
fileBtn,
tbFill,
editBtn
]
});
var myBottomToolbar = [
{
text : 'Save',
handler : myBtnHandler
},
'-',
{
text : 'Cancel',
handler : myBtnHandler
},
'->',
'<b>Items open: 1</b>'
];
var myPanel = Ext.create('Ext.panel.Panel', {
width : 200,
height : 150,
title : 'Ext Panels rock!',
collapsible : true,
renderTo : Ext.getBody(),
tbar : myTopToolbar,
bbar : myBottomToolbar,
html : 'My first Toolbar Panel!'
});