How to align header items to the right in ExtJs - javascript

This is my header with it's items; as you can see I tried adding a style property but it doesn't help - the link is still aligned to the left whereas I want it to align right:
items: [
{
region: 'north',
xtype: 'header',
items:[
{
xtype: 'component',
autoEl: {
html: 'View All Services'
},
style: {
textAlign: 'right',
left: 'auto',
right: '0'
},
listeners: {
render: function(component) {
component.getEl().on('click', function(e) {
alert('test');
});
}
}
}
],
padding: 6
}
How can I align my items to the right in my header?

Set header titlePosition configuration property to 0. By default items in header component are added before header title. If you set titlePosition config to 0, items will be added after title:
items: [
{
region: 'north',
xtype: 'header',
titlePosition: 0,
items:[
{
xtype: 'component',
autoEl: {
html: 'View All Services'
},
listeners: {
render: function(component) {
component.getEl().on('click', function(e) {
alert('test');
});
}
}
}
],
padding: 6
}

Related

ExtJS - Add listener to title

I have a small panel with title and body.
var dashboardPanel1 = Ext.create('Ext.Panel', {
renderTo: Ext.getBody(),
collapsible: true,
margin: '0 0 50 0',
layout: {
type: 'table',
// The total column count must be specified here
columns: 3
},
defaults: {
// applied to each contained panel
bodyStyle: 'padding:20px',
border: 0
},
title: 'Key settings',
items: [{
html: '<img src="https://i.imgur.com/n7gOYrE.png" style="width: 20px; height: 20px">',
}, {
html: '|Your key is active|',
}, {
html: '|Expiring date: 27.04.2018|',
}],
});
How can I attach a listener to a title?
So, when I click on Key settings, it will be some action performed.
You can also trigger click event using [Element.on()](https://docs.sencha.com/extjs/6.2.0/classic/Ext.dom.Element.html#method-on).
The on method is shorthand for addListener. Appends an event handler to this object.
For example:
el.on("click", function(){
//do something...
//
}, this);
I this FIDDLE, I have created a demo using your code and make some modification. I hope this will help/guide you to achieve your requirement.
CODE SNIPPET
Ext.application({
name: 'Fiddle',
launch: function () {
Ext.create('Ext.Panel', {
renderTo: Ext.getBody(),
collapsible: true,
margin: '0 0 50 0',
layout: {
type: 'table',
// The total column count must be specified here
columns: 3
},
defaults: {
// applied to each contained panel
bodyStyle: 'padding:20px',
border: 0
},
title: '<span class="mytitle">Key settings</span>',
items: [{
html: '<img src="https://i.imgur.com/n7gOYrE.png" style="width: 20px; height: 20px">',
}, {
html: '|Your key is active|',
}, {
html: '|Expiring date: 27.04.2018|',
}],
listeners: {
afterrender: function (panel) {
Ext.get(panel.el.query('span.mytitle')[0]).on('click', function (e) {
alert(e.target.innerText)
}, panel);
}
}
});
}
});
Solution:
Replace
title: 'Key settings',
with custom header:
header: {
title: 'Custom header title',
listeners: {
click: function(h, e) {
var tm = new Ext.util.TextMetrics(h);
if (e.getX() < tm.getWidth('Custom header title')) {
Ext.Msg.alert('Information', 'Do some action!');
}
}
}
}
Working example:
var dashboardPanel1 = Ext.create('Ext.Panel', {
renderTo: Ext.getBody(),
collapsible: true,
margin: '0 0 50 0',
layout:
{
type: 'table',
// The total column count must be specified here
columns: 3
},
defaults:
{
// applied to each contained panel
bodyStyle: 'padding:20px',
border: 0
},
//title: 'Key settings',
header: {
title: 'Custom header title',
listeners: {
click: function(h, e) {
var tm = new Ext.util.TextMetrics(h);
if (e.getX() < tm.getWidth('Custom header title')) {
Ext.Msg.alert('Information', 'Do some action!');
}
}
}
},
items: [
{
html: '<img src="https://i.imgur.com/n7gOYrE.png" style="width: 20px; height: 20px">',
},
{
html: '|Your key is active|',
},
{
html: '|Expiring date: 27.04.2018|',
}],
});
Notes:
The example is tested with ExtJS 4.2. Title width is calculated with Ext.util.TextMetrics.

ExtJS5: Checkbox afterSubTpl wraps icons

The snippet below will not run on this site, but you can access a working demo here on JSFiddle.
I am trying to get the icon to appear to the right of the checkbox, but it appears to be wrapping. Is there a property that I need to set so that it will appear in-line? This worked in ExtJS4, but after I switched to ExtJS5 this does not work.
afterSubTpl Documentation
Ext.form.field.Checkbox -> config -> afterSubTpl
An optional string or XTemplate configuration to insert in the field markup after the subTpl markup. If an XTemplate is used, the component's render data serves as the context.
Code
Ext.require(['*']);
Ext.define('App.view.MainView', {
extend: 'Ext.panel.Panel',
xtype: 'mainView',
alias: 'widget.mainview',
title: 'Checkbox Template Example',
referenceHolder: true,
layout: {
type: 'border'
},
initComponent: function () {
var me = this,
tooltip = me.getHelpIconWithTooltip();
me.items = [{
region: 'center',
xtype: 'panel',
title : 'A Panel Title',
margin : 20,
bodyStyle: 'padding: 8px;',
layout : 'vbox',
items : [{
xtype: 'checkbox',
fieldLabel : 'Checkbox',
afterSubTpl: tooltip
}]
}],
me.callParent();
},
getHelpIconWithTooltip: function () {
return this.getFormIconWithTooltip('help-icon help-form-icon',
'This is a help tooltip...');
},
getFormIconWithTooltip: function (iconClassList, toolTipText) {
var getSpan = function(cl, qt) {
return '<span class="'+cl+'" data-qtip="'+qt+'"></span>';
}
return [
'<tpl>',
getSpan(iconClassList, toolTipText),
'</tpl>'
];
}
});
Ext.define('App.app.App', {
extend: 'Ext.app.Application',
name: 'App',
launch: function () {
Ext.create('Ext.Viewport', {
layout: 'fit',
flex: 1,
items: [{
xtype: 'mainview'
}]
});
}
});
Ext.onReady(function () {
Ext.application('App.app.App');
});
.help-icon {
display: inline-block;
background: url(http://www.famfamfam.com/lab/icons/silk/previews/index_abc.png) -705px -1125px no-repeat;
width: 16px;
height: 16px;
}
.help-form-icon {
/*margin-left: 5px;*/
}
<link href="https://extjs.cachefly.net/ext/gpl/5.1.0/packages/ext-theme-crisp/build/resources/ext-theme-crisp-all-debug.css" rel="stylesheet" />
<script src="http://cdn.sencha.com/ext/gpl/5.1.0/build/ext-all.js"></script>
Edit
It looks like if I add a class to the checkbox, I can prevent it from wrapping, but now the icon is positioned too high.
{
xtype: 'checkbox',
fieldLabel: 'Checkbox',
afterSubTpl: tooltip,
cls: 'no-wrap-tooltip'
}
.no-wrap-tooltip .x-form-cb-wrap-inner {
display: inline-block;
}
I may have figured it out, but this solution uses magic numbers which make it work in this instance.
Demo
{
xtype: 'checkbox',
fieldLabel: 'Checkbox',
afterSubTpl: tooltip,
cls: 'no-wrap-tooltip'
}
.no-wrap-tooltip .x-form-cb-wrap-inner {
display: inline-block;
line-height: 28px;
}

is it possible to implement moveable Toolbar with Ext.js, if yes, how to do that with my code?

it is my toolbar which i want to move free in any position of my desktop.
what i need to change for it? maybe xtype'toolbar' or different extend'Ext.panel.Panel'??
Ext.define('test.view.desktop.Toolbar', {
bodyStyle: "background: #CAE1FF; border: 4px solid red;",
width: 500,
height: 200,
extend: 'Ext.panel.Panel',
title: 'test',
alias: "widget.testtoolbarX",
requires: [
"Ext.form.FieldSet"
],
dockedItems: [
{
xtype: 'toolbar',
dock: 'top',
items: [
{
xtype: 'tbtext',
text: '<b style="font-size: 20px; margin-left: 300px; color: red;">I am Toolbar</b>',
},
{
xtype: 'tbfill',
},
{
text: 'Report',
menu: {
items: [
{
text: 'Export'
,
menu: {
items: [
{
text: 'PDF'
}, {
text: 'Excel'
}
, {
text: 'CSV'
}
]
}
}, {
text: 'Filter'
}
]
}
},
{
xtype: 'cycle',
text: 'File',
menu: {
xtype: 'menu',
width: 120,
items: [
{
text: 'Upload'
},
{
text: 'Share'
},
{
text: 'Popout'
}
]
}
},
{
xtype: 'button',
text: 'Help',
url: 'http://test/faq.html',
//baseParams: {
// q: 'html+anchor+tag'
//},
tooltip: 'Get the answers to frequently asked questions about'
}
,
//{
// xtype: 'htmleditor',
// text: 'Help'
//}
]
}
]
});
Create a window with a fixed width and add a toolbar to it.
Kyle Fransham pointed this out but I'll show it with a code snippet:
Ext.create('Ext.window.Window', {
layout: 'fit',
width : 500,
dockedItems: {
xtype: 'toolbar',
items: [{
text: 'Button'
},
'->',
{
xtype : 'textfield',
name : 'field1',
emptyText: 'enter search term'
},
'-','text 1',
{ xtype: 'tbspacer' },
'text 2'
]
}
}).show();
An easy way to accomplish this is to:
Add the toolbar to a panel, and the panel to a window.
Play with the size of the window so that only the toolbar can be seen.
In the window's config, add headerPosition: 'right' to move the titlebar/header off to the right of the window.
Now you have a toolbar that can be dragged anywhere on your desktop by the handle on the right (the titlebar of the window.)

EXTJS: hidden element does not show up after setvisible

Hello I want to show and image that is like an alert sign when a change is done, then I have a footer panel like this one, with the sign:
Ext.define('footerPanel', {
extend: 'Ext.panel.Panel',
cls: 'fastec_background',
height: 24,
autoScroll: false,
border: false,
layout: {
type: 'border'
},
id: 'panel_footerFastec',
initComponent: function () {
var me = this;
Ext.applyIf(me, {
items: [{
margin: '5 5 0 20',
xtype: 'label',
region: 'center',
html: '<a>© 2012 FASTEC GmbH, Paderborn, Germany - </a><a target="_blank" href="http://www.easyoee.de">www.easyOEE.de</a> <a target="_blank" href="http://www.fastec.de">www.fastec.de</a>'
}, {
xtype: 'container',
region: 'east',
layout: 'table',
id: 'cont_footer_icons',
items: [{
xtype: 'image',
id: 'configchangedIcon',
height: 16,
margin: '5 0 5 0',
width: 16,
maxHeight: 20,
dock: 'right',
maxWidth: 20,
scale: 'large',
src: 'files/images/disk_blue.png',
hidden: true
}, {
xtype: 'image',
height: 16,
id: 'errorIcon',
margin: '5 0 5 0',
width: 16,
dock: 'right',
maxHeight: 20,
maxWidth: 20,
scale: 'large',
src: 'files/images/error16.gif',
hidden: true
}]
}]
});
me.callParent(arguments);
}
});
And the idea is that I have a general function which I could call anywhere and show or hide the icon, but unfortunately I call this function and nothing happens:
changeIconVisibility = function(str, value) {
try {
switch(str){
case 'configchangedIcon':
var img = Ext.getCmp('configchangedIcon');
if(value){
img.setVisible(true);
}else{
img.setVisible(false);
}
break;
}
} catch (e) {
Ext.msg.alert(e);
}
}
I tried by directly calling the component and setVisible(true) as well and nothing happens.
get the footerPanel component and use hide/ show method.
like
var myPanel = Ext.getCmp('your_panel');
myPanel.items.items[1].hide() //second item
http://docs.sencha.com/ext-js/4-1/#!/api/Ext.panel.Panel-method-hide
http://docs.sencha.com/ext-js/4-1/#!/api/Ext.panel.Panel-method-show

extjs 4 portal example

I would like to say that Im struggling with understanding the portal demo in ExtJS 4. Can someone please just provide me a generic example of a container and how to add a portlet item. The docs provided with the download do not have the word portal or portlet when I do the search. When I look at the source of the example there are classes files and extra CSS files too. Are those needed? I have searched all over the web and only seem to find other people asking the same question. Any help or even a link to a demo for extjs 4 would be greatly appreciated. Maybe my googlefoo is lacking?
When I use the demo and start modifying the border layout I run into all sorts of issues. The center region cannot contain a tab panel, I use accordion layouts for my east, west, and north regions. There seems to be an issue with the West region and having an accordion layout because it does not display properly ie. the accordion is like half open and any images inside do not display unless you collapse and then re-open. Would someone be able to provide me with an example that just shows how to make a basic portal without any added functionality? Below is the code I was using that was not working properly but displays and works fine (except for the portal part) when using just a viewport.
Here is some example code
Ext.define('Ext.app.Portal', {
extend: 'Ext.container.Viewport',
uses: ['Ext.app.PortalPanel'],
initComponent: function(){
Ext.apply(this, Ext.create('Ext.Viewport', {
id: 'main-viewport',
layout: {
type: 'border',
padding: '0 5 5 5'
},
items: [{
title: 'My Notifications',
id: 'My-Notifications-Panel',
region: 'north',
height: 300,
split: true,
collapsible: true,
collapsed: true,
margins: '0 0 0 0',
layout: 'accordion',
items: [
{
title: 'Alerts'
},{
title: 'Communications'
}
]
},{
title: 'My Support',
id: 'My-Support-Panel',
region: 'east',
width: 140,
collapsible: true,
collapsed: true,
margins: '0 0 0 0',
layout: 'column',
autoScroll: true,
defaults: {
margins: '10 5 0 0',
xtype: 'panel',
height: 100,
width: '100%',
headerPosition: 'bottom',
border: false,
cls: 'myicon',
bodyStyle: 'background-image: url(images/icon.png); background-repeat: no-repeat; background-position: center;'
},
items:[
{
title: 'Customer Services'
},{
title: 'Technical Support',
listeners: {
afterrender: function(c){
c.el.on('click', function(){
CreateChatSession();
Ext.getCmp('My-Support-Chat-Panel').update('<iframe width="100%" height="700" src="/pub/" frameborder="0"></iframe>');
});
}
}
}
]
},{
xtype: 'panel',
region: 'west',
collapsible: true,
collapsed: true,
title: 'My Apps',
width: 275,
layout:'accordion',
split: true,
margins: '0 0 0 0',
defaults: {
bodyStyle: 'padding:15px',
layout: 'column'
},
items: [{
title: 'Internal Apps',
defaults: {
padding: '5 5 5 5',
xtype: 'panel',
height: 100,
width: 80,
headerPosition: 'bottom',
border: false,
cls: 'myicon',
bodyStyle: 'background-image: url(images/icon.png); background-repeat: no-repeat; background-position: center;'
},
items: []
},{
title: 'Favorites',
defaults: {
padding: '5 5 5 5',
xtype: 'panel',
height: 100,
width: 80,
headerPosition: 'bottom',
border: false,
cls: 'myicon',
bodyStyle: 'background-image: url(images/icon.png); background-repeat: no-repeat; background-position: center;'
},
items: []
},{
title: 'Reporting',
defaults: {
padding: '5 5 5 5',
xtype: 'panel',
height: 100,
width: 80,
headerPosition: 'bottom',
border: false,
cls: 'myicon',
bodyStyle: 'background-image: url(images/icon.png); background-repeat: no-repeat; background-position: center;'
},
items: []
}]
},
Ext.create('Ext.tab.Panel', {
region: 'center',
layout: 'fit',
items: [{
id: 'Workspace-1',
title: 'Workspace 1',
layout: 'fit',
items: [{
id: 'app-portal',
xtype: 'portalpanel',
region: 'center',
items: [{
id: 'col-1',
items: [{
id: 'portlet-2',
title: 'Portlet 2',
listeners: {
'close': Ext.bind(this.onPortletClose, this)
}
}]
},{
id: 'col-2',
items: [{
id: 'portlet-3',
title: 'Portlet 3',
listeners: {
'close': Ext.bind(this.onPortletClose, this)
}
}]
}]
}]
}]
})
]
}));
this.callParent(arguments);
}
});
----------- Just for anyone who reads this Portal Layout IS NOT part of the official framework and is a 3rd party extension bundled with the library, which is why it is not in the docs.
It'ss the portal example with tabs in center region
Hope this will help you.
Ext.define('Ext.app.Portal', {
extend: 'Ext.container.Viewport',
getTools: function() {
return [{
xtype: 'tool',
type: 'gear',
handler: function(e, target, panelHeader, tool) {
var portlet = panelHeader.ownerCt,
el = portlet.getEl();
el.mask('Working...');
Ext.defer(el.unmask, 2000, el);
} //eo handler function
}]; //eo return
}, //eo get tools
initComponent: function() {
var content = '<div class="portlet-content">' + Ext.example.shortBogusMarkup + '</div>';
Ext.apply(this, {
id: 'app-viewport',
layout: {
type: 'border',
padding: '0 5 5 5'
}, //eo layout
items: [{ //header : item 1 of app-viewport
id: 'app-header',
xtype: 'box',
region: 'north',
height: 50,
html: 'myPortal'
},
{ //container : item 2 of app-viewport
xtype: 'container',
region: 'center',
layout: 'border',
items: [{ //options: item 1 of container
id: 'app-options',
title: 'Options',
region: 'west',
animCollapse: true,
width: 200,
minWidth: 150,
maxWidth: 400,
split: true,
collapsible: true,
layout: 'accordion',
layoutConfig: {
animate: true
},
items: [{ //item 1 of app-options
title: 'title',
autoScroll: true,
border: false,
iconCls: 'nav',
items: [{
xtype: 'treepanel',
useArrows: true,
autoScroll: true,
animate: true,
enableDD: true,
containerScroll: true,
border: false,
region: 'west',
split: true,
listeners: {
click: function(n) {
Ext.Msg.alert('Navigation Tree Click', 'You clicked: "' + n.attributes.text + '"');
}
}
/*Dashboard
MultiServices
Reporting
Global Options
*/
}]
},
{ //settings : item 2 of app-options
title: 'Settings',
html: '<div class="portlet-content">' + 'details ??' + '</div>',
border: false,
autoScroll: true,
iconCls: 'settings'
}
] //eo items options
},
{ //item 2 of container
id: 'tabpanel1', // id: 'app-portal', ???
xtype: 'tabpanel',
activeTab: 0,
region: 'center',
items: [{
title: 'tab1',
layout: 'column', //
closable: true,
items: [{
id: 'col-1',
columnWidth: 0.5,
flex: 1,
items: [{
id: 'portlet-1',
title: 'Grid Portlet',
tools: this.getTools(),
items: new Ext.app.GridPortlet(),
listeners: {
'close': Ext.bind(this.onPortletClose, this)
}
}, {
id: 'portlet-2',
title: 'Portlet 2',
tools: this.getTools(),
html: content,
listeners: {
'close': Ext.bind(this.onPortletClose, this)
}
}] //eo col-1
}, {
id: 'col-2',
columnWidth: 0.5,
flex: 1,
items: [{
id: 'portlet-3',
title: 'Portlet 3',
tools: this.getTools(),
html: '<div class="portlet-content">' + Ext.example.bogusMarkup + '</div>',
listeners: {
'close': Ext.bind(this.onPortletClose, this)
}
}] //eo col-2
}, {
id: 'col-3',
columnWidth: 0.5,
flex: 1,
margins: '0 26 0 0',
items: [{
id: 'portlet-4',
title: 'Chart Portlet',
tools: this.getTools(),
items: new Ext.app.ChartPortlet(),
listeners: {
'close': Ext.bind(this.onPortletClose, this)
}
}] //eo col-3
}] //eo tab1
}, {
title: 'tab2',
closable: true
}] //eo items tabpanel
}
] //eo ietms container
}
] //eo viewport
}); //eo apply
this.callParent(arguments);
}, //eo initcomponent
onPortletClose: function(portlet) {
this.showMsg('"' + portlet.title + '" was removed');
},
showMsg: function(msg) {
var el = Ext.get('app-msg'),
msgId = Ext.id();
this.msgId = msgId;
el.update(msg).show();
Ext.defer(this.clearMsg, 3000, this, [msgId]);
},
clearMsg: function(msgId) {
if (msgId === this.msgId) {
Ext.get('app-msg').hide();
}
}
});
EDIT
Or u can try this example I think it suits better ur needs ,let me know.

Categories