I want to have a button in panel header. This is a part of my code:
var dashboardPanel4 = Ext.create('Ext.Panel', {
renderTo: Ext.getBody(),
margin: '0 0 50 0',
glyph: 'xf2a0#FontAwesome',
layout: {
type: 'table',
columns: 4,
tableAttrs: {
width: '100%'
}
},
defaults: {
// applied to each contained panel
bodyStyle: 'padding:10px',
border: 0
},
title: '<span class="requests" id="requests">Requests</span>',
header: {
xtype: 'header',
titlePosition: 0,
defaults: {
margin: '0 10px'
},
items: [
{
xtype: 'button',
text: "Test Button",
tooltip: "Add something",
iconCls: 'add',
handler: Ext.bind(function() {
}, this)
}
]
},
But the problem is that fontawesome icon aligns into right position. Is there a way how to set FA icon before this title 'Requests'.
At the moment it is like this:
It should be: FA icon, Request and Button on right side.
You want to have in the header the things align like this:
<icon> <title> <other things>
I would do it with the config titlePosition: 1, which sets the title as a second item. Next thing what is needed is to just add the icon not by using glyph config but rather add it as own item in the header config.
So you would get something like this:
header: {
xtype: 'header',
titlePosition: 1,
items: [{
xtype: 'image',
glyph: 'xf2a0#FontAwesome',
}, {
xtype: 'button',
text: "Test Button",
tooltip: "Add something",
iconCls: 'add',
handler: Ext.bind(function () {}, this)
}]
},
Here is fiddle https://fiddle.sencha.com/#view/editor&fiddle/2h99 (the font awesome icons are not loaded in the example) but it should work in your own code.
Btw there might be more solutions to this problem.
Related
I have created a toolbar inside a panel header but the overflow menu doesn't appear on screen resize.
Menu when the screen is not resized
On Screen resize the buttons are not showing in overflow menu.
Ext.application({
name: 'Fiddle',
launch: function () {
Ext.onReady(function () {
Ext.create('Ext.panel.Panel', {
width: 500,
height: 500,
renderTo: Ext.getBody(),
collapsible: true,
header: {
title: {
text: 'title',
flex: undefined
},
items: [{
xtype: 'toolbar',
width: 400,
overflowHandler: 'menu',
items: [{
xtype: 'button',
text: 'test1'
}, {
xtype: 'button',
text: 'test2'
}, {
xtype: 'button',
text: 'test3'
}, {
xtype: 'button',
text: 'test4'
}, {
xtype: 'button',
text: 'test5'
}, {
xtype: 'button',
text: 'test6'
}],
}, {
xtype: 'tbfill'
}]
}
});
});
}
});
Here is a fiddle. I set a layout using hbox and set a flex on the two different components in the header. also set the panel and header to resizable: true.
I have a docked panel in which am changing the dock position using the setDock method. In that docked panel, I also have collapsible buttons which should change as per to the dock position. I am updating the configs collapseDirection and expandDirection and calling out a method updateCollapseTool which lets me update the button.
But I get an issue after the following steps:
Change the dock position to left using the menu button.
Collapse the docked panel using the collapse button, then again expand it.
Again change the dock position to top.
Collapse the docked panel again => After this step my docked panel gets collapsed, but it seems to be collapsed in left direction. It should have collapsed to top and should show an expand button pointing in bottom direction.
If I perform the same steps by excluding the step 2, it works properly. Is there anything that am doing wrong or any other methods which lets me update my expand/collapse buttons properly ?
Here is my fiddle link.
You can use border layout and the the region with setRegion method, something like this:
Ext.application({
name: 'Fiddle',
launch: function () {
Ext.create({
scrollable: true,
id: 'parentPanel',
xtype: 'panel',
height: 500,
layout: 'border',
items: [{
xtype: 'panel',
id: 'dockPanel1',
region: 'north',
title: 'Parent Dock Panel',
collapsible: true,
collapseFirst: false,
width: 300,
height: 200,
defaults: {
style: {
background: "orange",
border: "1px"
},
},
layout: "container",
tools: [{
text: "dock change",
xtype: 'button',
value: 'top',
menu: {
items: [{
text: 'top',
region: 'north'
}, {
text: 'left',
region: 'west'
}, {
text: 'right',
region: 'east'
}],
listeners: {
click: function (menu, item, e, eOpts) {
Ext.getCmp('dockPanel1').setRegion(item.region);
}
}
}
}],
items: [{
xtype: 'textfield',
text: 'item 1'
}, {
xtype: 'textfield',
text: 'item 2'
}, {
xtype: 'textfield',
text: 'item 3'
}]
}, {
xtype: 'panel',
region: 'center',
layout: "vbox",
items: [{
html: "<span style='font-size:20px;'>Child panel 1</span>",
bodyStyle: "background: lightgreen;",
xtype: 'panel',
height: "50%",
width: "70%",
padding: "5 5",
cls: 'overlayMenuCls'
}, {
html: "<span style='font-size:20px;'>Child panel 2</span>",
bodyStyle: "background: lightblue;",
xtype: 'panel',
height: "50%",
width: "70%",
padding: "5 5",
cls: 'overlayMenuCls'
}]
}],
renderTo: Ext.getBody()
});
}
});
Hi I have a problem about extjs viewport. I created a button and tried to reference to east panel but It seems a wrong way to access panel. Chrome developer tools showed a message "Uncaught TypeError: Cannot read property 'get' of undefined"
I google this thread
but my code is still not work.
my viewport:
var viewport = Ext.define('Fiddle.view.Viewport', {
extend: 'Ext.container.Viewport',
layout: 'border',
items: [{
// xtype: 'container',
// itemId: 'header',
region: 'north',
//html: '<h1 class="x-panel-header">Page Title</h1>',
border: false,
margin: '0 0 5 0',
items: [{
xtype: 'button',
text: 'collapse',
handler: function() {
var east = viewport.items.get('e');
if (!!east.collapsed) {
east.expand();
} else {
east.collapse();
}
}
}]
}, {
region: 'east',
title: 'east Panel',
itemId: 'e',
//collapsible: true,
//collapseMode: 'mini',
floatable: false,
html: 'Information goes here',
split: true,
placeholder:{
width:20,
items:[{
xtype:'button',
}]
}
}, {
region: 'center',
xtype: 'container',
layout: 'fit',
items: {
html: 'Center'
}
}]
})
Fiddle
Instead of viewport.items.get('e'), use down:
viewport.down('#e')
Update:
In your code sample, viewport is referencing the viewport class, not instance. To access the instance from the button clicked, use:
b.up('viewport').down('#e')
Full example: https://fiddle.sencha.com/#fiddle/rl2
Avoid using itemId's. Doesn't
b.up('viewport').down('container[region=east]');
do the trick?
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.)
Following the answer on load an html file into a panel, I was able to load the HTML File taking the entire Panel, but how can I use that solution to load the file in a ITEM?
I have the following file Demo.js
Ext.define('Sencha.view.Demo', {
extend: 'Ext.Panel',
xtype: 'democard',
config: {
iconCls: 'search',
title: 'Demo',
styleHtmlContent: true,
scrollable: 'vertical',
layout: {
type: 'vbox'
},
items: [{
docked: 'top',
xtype: 'toolbar',
title: 'Demo'
},
{
xtype: 'fieldset',
width: "100%",
style: {float:'left'},
items: [
{
xtype: 'textfield',
name : 'name',
label: 'Text Label'
},{
xtype: 'button',
text: 'Press',
ui: 'confirm'
},{
width: '60px'
}]
},
{
> HERE I WANT TO INSERT THE HTML FILE <
}
]
}
});
I tried adding the following code in the marked area :
extend: 'HTMLPanel',
config: {
iconCls: 'home',
title: 'Holcim',
styleHtmlContent: true,
scrollable: 'vertical',
url: 'file.html',
}
But the 'file.html' will not show. How could I achieve this? I would like to include some HTML Files in some items.
Solved
Ok, going to use another another solution hope it helps. With this solution, I just have to write " html: loadURL('url') "