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.
Related
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 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'
}
]
}
i had made a panel with number of buttons in it like this,
Ext.define('BeLocal.view.Test', {
extend: 'Ext.Panel',
config: {
fullScreen: true,
height: 482,
width: 324,
scrollable: 'vertical',
items: [
{
xtype: 'button',
text: 'MyButton1'
},
{
xtype: 'button',
top: '30%',
text: 'MyButton2'
},
{
xtype: 'button',
top: '50%',
text: 'MyButton3'
},
{
xtype: 'button',
top: '96%',
text: 'MyButton4'
},
{
xtype: 'button',
top: '110%',
text: 'MyButton5'
}
]
}
});
i can show only 3 buttons now.
i want this panel scrollable so that i can show all the buttons by scrolling it down, i had set property scrollable: 'vertical' , but it doesn't work.
When i remove position of all buttons like top:50% scroll works properly, but i want all the buttons on proper position.
how can i fix this problem ?
As per the documentation:
http://docs.sencha.com/touch/2-1/#!/api/Ext.Button-cfg-top
top : Number/String
The absolute top position of this Component; must be a valid CSS length value, e.g: 300, 100px, 30%, etc. Explicitly setting this value will make this Component become 'floating', which means its layout will no longer be affected by the Container that it resides in.
Try setting style config:
items: [{
xtype: 'button',
text: 'MyButton1'
},{
xtype: 'button',
style:'margin-top: 10%;',
text: 'MyButton2'
},{
xtype: 'button',
style:'margin-top: 50%;',
text: 'MyButton3'
},{
xtype: 'button',
style:'margin-top: 96%;',
text: 'MyButton4'
},{
xtype: 'button',
style:'margin-top: 110%;',
text: 'MyButton5'
}]
Seems to works for me.
I want to add some buttons in 'window' header, instead of 'X'.
Draggable property must be saved!
It should look like this:
You can specify the tools(Ext.Panel.Tool) config for the window!
tools:[{
type:'refresh',
tooltip: 'Refresh form Data',
handler: function(event, toolEl, panel){
// refresh logic
}
},
{
type:'help',
tooltip: 'Get Help',
handler: function(event, toolEl, panel){
// show help here
}
}]
There are 25 predefined buttons but you can customize your own.
It's also possible to define xtype: 'header' element and customize header of window/panel more precisely:
header: {
xtype: 'header',
titlePosition: 0,
defaults: {
margin: '0 10px'
},
items: [
{
xtype: 'textfield',
value: "Test Search",
tooltip: "Search something",
width: 300
},
{
xtype: 'container',
flex: 1
},
{
xtype: 'button',
text: "Test Button",
tooltip: "Add something",
iconCls: 'add',
handler: Ext.bind(function() {
console.log('does something');
}, this)
}
]
}
The only limitation I could see for now is inability to use '->' elements as items, but it's still possible to use their full class names (ie Ext.toolbar.Fill) or config by xtype: 'tbfill'.