Extjs6: dashboard parts coming vertically - javascript

I am creating my dashboard like this But when I render it, both my parts come vertically instead of being horizontol.Also there is a splitter vertical height between these two parts.How can I make them appear horizontally.
xtype: 'dashboard',
defaultContent: [
{
type: 'dashChart',
title: 'Graph 1',
columnIndex: 0,
height: 300
},
{
type: 'dashChart1',
title: 'Graph 2 ',
columnIndex: 1,
height: 300
}
],
parts: {
dashChart: {
viewTemplate: {
collapsible: false,
resizable: false,
layout: 'fit',
items: [
{
xtype: 'webdashboardpiechart'
}
]
}
},
dashChart2: {
viewTemplate: {
collapsible: false,
resizable: false,
layout: 'fit',
items: [
{
xtype: 'webdashboardareachart'
}
]
}
}
},
maxColumns: 2
}

Related

Extjs 4.1 - grid with drag & drop, vertical scroll doesn't work

I have 2 grids on a window which support drag and drop each by himself and also between each other.
I can't get the vertical scroll to work when dragging above the first row in the grid or below the last row in the grid.
currently, i must first scroll all the way down if i want to drag the record to the bottom of the grid.
using containerScroll didn't solve the problem.
Ext.define('MyApp.view.DDFieldsGrid', {
extend: 'Ext.grid.Panel',
xtype: 'ddfieldsgrid',
hideHeaders: true,
multiSelect: true,
autoScroll: true,
markDirty: false,
columns: [
{ dataIndex: 'item', flex: 1 }
],
viewConfig: {
plugins: {
containerScroll: true,
ptype: 'gridviewdragdrop',
ddGroup: 'firstGridDDGroup'
}
}
});
this.mainWin = Ext.create('Ext.window.Window', {
layout: 'centered',
title: 'Blotter Fields',
resizable: false,
closeAction: 'hide',
hidden: true,
shadow: true,
tbar: [{
xtype: 'combo',
fieldLabel: 'Fields Type',
id: 'comboCategories',
editable: false,
queryMode: 'local',
selectOnFocus: true,
forceSelection: true,
iconCls: 'no-icon',
triggerAction: 'all',
store: categoreyItems,
listeners: {
select: function (ele, newValue, oldValue) {
var category = this.valueModels[0].index;
var store = Ext.getStore('availableFields');
store.filterBy(function (record) {
return category == 0 /*All*/ || record.get('category') === category;
}, this);
}
}
}, ' ', {
xtype: 'checkbox',
fieldLabel: 'Show Details field',
margin: '0 10 0 20',
//hidden: this.customizationModel._customizationView.detailsCustomOptions.showDetailsFieldsOption == false,
checked: this.customizationModel._customizationView.detailsCustomOptions.showDetailsFieldsOption,
listeners: {
click: {
fn: this.onShowDetailsField,
scope: this
}
}
}, ' ', {
xtype: 'checkbox',
fieldLabel: 'Show custom fields',
margin: '0 10 0 20',
//hidden: this.customizationModel._customizationView.detailsCustomOptions.showUserCustomFieldsOptions == false,
checked: this.customizationModel._customizationView.detailsCustomOptions.showUserCustomFieldsOptions,
listeners: {
click: {
fn: this.onShowCustomFields,
scope: this
}
}
}],
dockedItems: [
{
xtype: 'toolbar',
flex: 1,
dock: 'bottom',
layout: {
pack: 'end',
type: 'hbox'
},
items: [
{
xtype: 'button',
text: 'Cancel',
listeners: {
click: {
fn: this.onCancelSettings,
scope: this
}
}
},
{
xtype: 'button',
text: 'OK',
listeners: {
click: {
fn: this.onAcceptSettings,
scope: this
}
}
}
]
}
],
items: [{
store: availableFieldsStore,
title: 'Available Fields'
}, {
store: selectedFieldsStore,
title: 'Selected Fields'
}],
layout: {
type: 'hbox',
align: 'stretch'
},
defaults: {
xtype: 'ddfieldsgrid',
height: 200,
margin: 8,
width: 300
}
});

fixed search bar with an accordion layout - EXT JS4

I need to have a fixed search bar at the top of my Menu Column. This is what I have so far:
Ext.define('Cam.view.menu.LeftSidebar', {
extend: 'Ext.panel.Panel',
alias: 'widget.leftsidebar',
views: 'Cam.view.menu.Search',
defaults: {
// applied to each contained panel
bodyStyle: 'padding:0px;'
},
layout: {
// layout-specific configs go here
type: 'accordion',
titleCollapse: true,
animate: true,
activeOnTop: true
},
title: _SIDEBAR_LEFT_TITLE,
items: [
{
title: 'Menu Search',
items: [{xtype: 'menusearch'
}]
},
{
title: _SIDEBAR_LEFT_PREVIOUS,
xtype: 'menuhistory',
itemId: 'menuhistory'
},
{
title: 'Menu',
items: [{xtype: 'screenmenu'}]
}]
});
So far, it collapses the way I want it but
xtype:'menusearch' is what I want fixed at the top.
and
xtype:'menuhistory' to be active one.
Any help on this?
You could do something like this:
Ext.require('*');
Ext.onReady(function() {
Ext.create('Ext.panel.Panel', {
width: 400,
height: 400,
renderTo: document.body,
layout: {
type: 'vbox',
align: 'stretch'
},
items: [{
xtype: 'textfield',
fieldLabel: 'Search'
}, {
flex: 1,
xtype: 'container',
layout: 'accordion',
items: [{
title: 'Item 1',
html: 'I1'
}, {
title: 'Item 2',
html: 'I2'
}, {
title: 'Item 3',
html: 'I3'
}]
}]
});
});

extJs column layout issue

I have 3 extJs Windows. Each have some form control and then two tabs that display chart. Currently all windows appear at the same place and i have to drag them to make them stand in a row like this | | | . How can i create a 3 columns on screen and place each window in one of them. Please find the code of one of the window below. And yes i have seen this link
http://dev.sencha.com/deploy/ext-4.0.7-gpl/examples/layout/table.html but it doesnt help my cause. None of the content is displayed if i create 3 column layout like the what's mentioned in the link. Please assume that all of windows have the same code and suggest a way. One more thing, i have closable, and maximizable feature in all of the windows.Thanks.
var win = Ext.create('Ext.Window', {
id: 'r1',
width: eachWindowWidth,
height: eachWindowHeight,
hidden: false,
maximizable: true,
title: 'Registered Hosts',
renderTo: Ext.getBody(),
tbar: [{
xtype: 'combo',
width: 50,
store: optionRegistered,
mode: 'local',
fieldLabel: '',
name: 'answer',
anchor: '90%',
displayField: 'answer',
valueField: 'id'
}, {
xtype: 'datefield',
width: 90,
name: 'time',
fieldLabel: '',
anchor: '90%'
}, {
xtype: "label",
width: 20,
fieldLabel: text,
name: 'txt',
text: 'to'
}, {
xtype: 'combo',
id: 'c22devices',
width: 50,
store: optionRegistered,
mode: 'local',
fieldLabel: '',
name: 'answer',
anchor: '90%',
displayField: 'answer',
valueField: 'id'
}, {
xtype: 'datefield',
id: 'cl22devices',
width: 90,
name: 'time',
fieldLabel: '',
anchor: '90%'
}, {
xtype: 'button',
text: 'Ok'
}],
items: [
{
xtype: "label",
fieldLabel: text,
name: 'txt',
text: text
}, {
xtype: 'tabpanel',
id: "tabs1",
activeTab: 0,
width: eachTabWidth,
height: eachTabHeight,
plain: true,
defaults: {
autoScroll: true,
bodyPadding: 10
},
items: [{
title: 'Normal Tab',
items: [{
id: 'chartCmp1',
xtype: 'chart',
height: 300,
width: 300,
style: 'background:#fff',
animate: true,
shadow: true,
store: storeRouge,
axes: [{
type: 'Numeric',
position: 'left',
fields: ['total'],
label: {
renderer: Ext.util.Format.numberRenderer('0,0')
},
grid: true,
minimum: 0
}, {
type: 'Category',
position: 'bottom',
grid: true,
fields: ['date'],
}],
series: [{
type: 'column',
axis: 'left',
highlight: true,
tips: {
trackMouse: true,
width: 140,
height: 28,
renderer: function (storeItem, item) {
this.setTitle(storeItem.get('date') + ': ' + storeItem.get('total') + ' $');
}
},
label: {
display: 'insideEnd',
'text-anchor': 'middle',
field: 'total',
renderer: Ext.util.Format.numberRenderer('0'),
orientation: 'vertical',
color: '#333'
},
xField: 'date',
yField: 'total'
}]
}]
}, {
title: 'Table View',
xtype: 'grid',
id: "gridChart1",
width: 200,
height: 200,
collapsible: false,
store: storeRouge,
multiSelect: true,
viewConfig: {
emptyText: 'No information to display'
},
columns: [{
text: 'Devices',
flex: 50,
dataIndex: 'date'
}, {
text: 'Pass',
flex: 50,
dataIndex: 'total'
}]
}]
}],
listeners: {
resize: function () {
Ext.getCmp("tabs1").setWidth(this.width);
Ext.getCmp("tabs1").setHeight(this.height);
Ext.getCmp("chartCmp1").setWidth(this.width * 100 / 100);
Ext.getCmp("gridChart1").setWidth(this.width * 100 / 100);
Ext.getCmp("gridChart1").setWidth(this.width * 100 / 100);
Ext.getCmp("gridChart1").setWidth(this.width * 100 / 100);
}
}
});
The problem is, the Ext.Window while being descendand of Ext.Panel does not abide by the rules of the layout like normal Ext.Panels do, it floats by itself and is constrained only by the limits of the DOM element they're rendered to (body by default).
This means that you'll have to jump some loops to position and layout the windows manually. You can also try to create some descendand class from Ext.WindowGroup to help you manage your windows and keep them nice and tidy.

ExtJs 4 MVC Nested Layouts

I'm trying to implement a simple framework for an app. The idea is to create a background viewport type 'layout' with a north region containing the page header and an interchangeable center region.
When my app starts, a Login form is shown. If the user/password is ok, the form is destroyed and the main layout should appear. The main layout should insert a nested layout in its center region.
This is my background layout code:
Ext.define('DEMO.view.BackgroundLayout', {
extend: 'Ext.container.Viewport',
alias: 'widget.background',
requires: [
'DEMO.view.Main'
],
layout: {
type: 'border'
},
initComponent: function() {
var me = this;
Ext.applyIf(me, {
items: [
{
region: 'north',
html: '<h1 class="x-panel-header">Page Title</h1>'
},
{
xtype: 'mainview',
region: 'center',
forceFit: false,
height: 400
}
]
});
me.callParent(arguments);
}
});
The main layout is this:
Ext.define('DEMO.view.Main', {
extend: 'Ext.container.Viewport',
alias: 'widget.mainview',
requires: [
'DEMO.view.MyGridPanel'
],
layout: {
type: 'border'
},
initComponent: function() {
var me = this;
console.log('bb');
Ext.applyIf(me, {
items: [
{
xtype: 'mygridpanel',
region: 'center',
forceFit: false
},
{
xtype: 'container',
height: 38,
forceFit: false,
region: 'north',
items: [
{
xtype: 'button',
height: 34,
id: 'btnLogout',
action: 'logout',
text: 'Logout'
}
]
}
]
});
me.callParent(arguments);
}
});
As you can see, the center region needs an xtype named "mygridpanel". This is the code for it:
Ext.define('DEMO.view.ui.MyGridPanel', {
extend: 'Ext.grid.Panel',
border: '',
height: 106,
title: 'My Grid Panel',
store: 'MyJsonStore',
initComponent: function() {
var me = this;
Ext.applyIf(me, {
viewConfig: {
},
columns: [
{
xtype: 'gridcolumn',
dataIndex: 'Id',
text: 'Id'
},
{
xtype: 'gridcolumn',
dataIndex: 'Name',
text: 'Name'
},
{
xtype: 'gridcolumn',
dataIndex: 'Sales',
text: 'Sales'
}
],
dockedItems: [
{
xtype: 'toolbar',
dock: 'top',
items: [
{
xtype: 'button',
disabled: true,
id: 'btnDelete',
allowDepress: false,
text: 'Delete'
},
{
xtype: 'button',
disabled: true,
id: 'btnEdit',
allowDepress: false,
text: 'Edit'
}
]
}
]
});
me.callParent(arguments);
}
});
My problem is that when I call Ext.create('DEMO.view.BackgroundLayout', {}); it only shows the nested layout, and the background layout is hidden, also I get this error in Chrome's console:
Uncaught Error: HIERARCHY_REQUEST_ERR: DOM Exception 3
What I'm doing wrong?.
Thanks in advance,
Leonardo.

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