I can add my own button to the built-in tools "Help" etc on the panel header:
tools:[
{
type:'help',
tooltip: 'Get Help',
handler: function(event, toolEl, panel){
// show help here
}
}],
header: {
layout: {
type: 'hbox',
align: 'right'
},
items: [{
xtype: 'button',
text: 'test'
}]
} ...
but button 'test' appears far left before the panel title ... header layout hbox right obviously not the way to do it :-). Button 'test' just a placeholder - I want to eventually add a menu button - so another css tool would not work - is there a simple way of doing this or do I need to use dom element positiong etc? tia.
If you're using ExtJS 4.2, you can use the titlePosition property to accomplish this. See http://jsfiddle.net/U8MSd/
tools: [{
type: 'help',
tooltip: 'Get Help',
handler: function (event, toolEl, panel) {
// show help here
}
}],
header: {
titlePosition: 0,
items: [{
xtype: 'button',
text: 'test'
}]
}
Related
I want to remove the active tab from sencha ext.
Assume that am into controller file of the view.
Note: I have used remove() as well as destroy().
destroy() function works fine but tab header is not getting removed.
coseResultTab() {
this.getView().destroy();
}
Before Clicking on Cancel button:
After Clicking on Cancel button
You should destroy the active tab in your tabpanel, eg:
Controller
Ext.define('MyViewController', {
extend: 'Ext.app.ViewController',
alias: 'controller.myview',
destroyTab: function() {
this.getView().down('tabpanel').getActiveTab().destroy();
}
});
View
Ext.create('Ext.Panel', {
width: 400,
height: 400,
renderTo: document.body,
title: 'Panel',
id: 'myPanel',
controller: 'myview',
items: [{
xtype: 'tabpanel',
items: [{
title: 'Foo',
items: [{
xtype: 'button',
text: 'Destroy!',
handler(btn) {
Ext.getCmp('myPanel').getController().destroyTab();
}
}]
}, {
title: 'Bar',
items: [{
xtype: 'button',
text: 'Destroy!',
handler(btn) {
Ext.getCmp('myPanel').getController().destroyTab();
}
}]
}]
}]
});
Fiddle
I enhanced the answer from Matheus to meet the requirement a bit more:
not destroying the entire tab, but only the content
setting the button handler without the use of getController (please try not to use this, as it is considered bad practice by Sencha)
removed the outer panel which only added a title
Fiddle
You can also remove it using the tab bar using closeTab() which pretty much just runs a tabs.remove(tabRefOrObj);
https://docs.sencha.com/extjs/6.5.3/modern/Ext.tab.Bar.html#method-closeTab
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 use navigationviev with some buttons in navigationBar. I set navigationBar's property scrollable to 'horizontal'. I can grab and move scrollbar line but the buttons still stay on same positions. How to fix this bug?
source:
Ext.define('Example.view.Main', {
extend: 'Ext.NavigationView',
config: {
fullscreen: true,
styleHtmlContent: true,
navigationBar: {
scrollable: 'horizontal',
items: [
{
xtype: 'button',
text: 'btn1'
},
{
xtype: 'button',
text: 'btn2'
},
{
xtype: 'button',
text: 'btn3'
},
{
xtype: 'button',
text: 'btn4'
},
{
xtype: 'button',
text: 'btn5'
},
{
xtype: 'button',
text: 'btn6'
}
]
},
items: [
{
xtype: 'panel',
styleHtmlContent: true,
html: '<h1>Hello!</h1>'
}
]
}
});
I don't think adding too much button on navigation bar is good idea and Also I am not sure it's possible to make navigation bar scrollable.
Instead i suggest you to try following style
Slide navigation with Sencha Touch
OR
Facebook Style Navigation for Sencha Touch 2.1.1
OR
This one
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'.
For making a toolbox, I want to know how to make a radiogroup with regular buttons and not radiobuttons in latest extJS
Like this with jQueryUI: http://jqueryui.com/demos/button/#radio
Thanks in advance,
Chielus
I think you should look at using a set standard ExtJS buttons. A button can be assigned to a group so that they act as the elements shown in your link.
See this example:
{
xtype: 'button',
text: 'Choice 1',
toggleGroup: 'mygroup'
}, {
xtype: 'button',
text: 'Choice 2',
toggleGroup: 'mygroup'
}, {
xtype: 'button',
text: 'Choice 3',
toggleGroup: 'mygroup'
}
Buttons also have a property called enableToggle, that allows them to toggle, and is automatically set to true when you set a toggleGroup, and toggleGroup tells ExtJS how they are related.
Note, they look like regular ExtJS buttons, but behave like you want.
There is a less complicated (better?) way to disallow deselecting a button. Set the allowDepress config option to false:
{
xtype: 'radiogroup',
layout: 'hbox',
defaultType: 'button',
defaults: {
enableToggle: true,
toggleGroup: 'mygroup',
allowDepress: false,
items: [
{ text: 'Choice 1'},
{ text: 'Choice 2'},
{ text: 'Choice 3'}
]
}
}
Just to answer #mastak's comment (in the answer above), in order to disallow the action of de-selecting a button, add this listener to each button:
listeners: {
click: function(me, event) {
// make sure a button cannot be de-selected
me.toggle(true);
}
}
That way, each click on a button will re-select it.
-DBG
Just adding to the #deebugger post. You can also use the following button property to not allow to deselect a selection
Ext.create('Ext.Button', {
renderTo : Ext.getBody(),
text : 'Click Me',
enableToggle : true,
allowDepress : false
});