I have 3 grids within an accordion container.
I add the resizable property to true to all 3 grids.
But when I try to resize any of the Grids, they are instead dragged up or down, instead of growing, and taking up the space.
What could be wrong?
Ext.define('MCS.view.task.Mygrid', {
requires: ['MCS.view.task.Mytoolbar'],
extend: 'MCS.view.base.grid',
alias: 'widget.myGrid',
itemId: 'myGrid',
stateId: 'myGrid',
iconCls: 'icon-application',
cls: "mcs-header2 mcs-accordion-item x-docked-noborder-top mcs-border-bottom",
bodyCls: "mcs-grid-body",
collapsible: true,
border: true,
hideMode: 'offsets',
resizable: true,
flex: 1,
store: 'task.My',
viewConfig: {
loadMask: false
},
dockedItems:
[
//stuff here
]
});
Accordion ( the 3rd grid is added dynamically to the bottom of the accordion )
xtype: 'container',
flex: 3,
layout: { type: 'accordion', border: false, multi: true, fill: false },
items: [
{ xtype: 'myGrid' },
{ xtype: 'pendingGrid' }
]
Related
I have an extjs 6.0.1.250 grid, with a remote json store, it is loading every 2 seconds, to refresh its data. It shows a device list with the device statuses, about 200 lines. (name, uptime, etc...)
When a user scrolls the scrollbar with the mouse the grid does not keep its position but jumps with to the old place. Is there a solution to use it normally with scrolling?
Using a taskManager:
this.config.pmConfig.deviceRefreshTask =
{
run: function()
{
var store=this.getDevicesGetDevicesStore();
store.proxy.setExtraParam('eventDisableLoader', true);
store.load();
},
interval: 2000, // 2 second, this will update the progressbar
scope: this
};
Ext.TaskManager.start(this.config.pmConfig.deviceRefreshTask); // start the first timer
And here is the grid:
xtype: 'gridpanel',
viewConfig: {
loadMask: false
},
itemId: 'devicesGrid',
width: 40,
title: '``Devices``',
emptyText: '``There is no device in this group.``',
store: 'Devices.GetDevices',
columns: [
{
xtype: 'gridcolumn',
hidden: true,
width: 80,
align: 'right',
dataIndex: 'id',
text: 'Id'
},
//....... more normal and some action columns.....
],
viewConfig: {
itemId: 'devicesGridTableView',
loadMask: false,
preserveScrollOnRefresh: true,
preserveScrollOnReload: true,
plugins: [
{
ptype: 'gridviewdragdrop',
ddGroup: 'deviceGroups',
enableDrop: false
}
]
},
tabConfig: {
xtype: 'tab',
dock: 'left'
},
features: [
{
ftype: 'grouping',
groupHeaderTpl: [
'<b>{name}</b>'
]
}
],
selModel: {
selType: 'checkboxmodel'
}
Arthurs suggestion is helped: "In the grid definition you can try to use bufferedRenderer: false"
thanks.
I have a panel which contains items in its body, and I would like the panel itself to be draggable, but only when the user drags the panelheader. (I don't want the user to be able to drag the panel by clicking and dragging in the body). Is there a simple way to do this?
Here is my code for creating the panel:
const newGridPanel = Ext.create({
xtype: 'panel',
id: newpanelid,
floated: true,
closable: true,
draggable: true,
scrollable: true,
width: 400,
height: 300,
resizable: {
constrainToParent: true,
dynamic: true,
edges: 'all',
minSize: 250,
maxSize: [window.innerWidth,window.innerHeight]
},
layout: 'fit',
title: 'Title',
tools: [
{
iconCls: 'x-fa fa-plus',
reference: 'addempbtn',
handler: function() {
newGridPanel.down(xt).getController().onAdd()
},
tooltip: 'Add a New Employee'
}
],
defaults: {
flex: 1
},
items: [
{
xtype: xt,
id: newgridid,
}
]
});
newGridPanel.setX(20);
newGridPanel.setY(20);
newGridPanel.show();
EDIT: I was able to figure out the problem and correct it. The solution has to do with the handle property of the Ext.drag.Source object. You have to specify the CSS handle of the element you want to be able to initiate the drag. In My case, the corrected code is as follows.
const newGridPanel = Ext.create({
xtype: 'panel',
id: newpanelid,
floated: true,
closable: true,
draggable: {handle: 'x-panelheader'}, // <- This is the part that needed to be changed
scrollable: true,
width: 400,
height: 300,
resizable: {
constrainToParent: true,
dynamic: true,
edges: 'all',
minSize: 250,
maxSize: [window.innerWidth,window.innerHeight]
},
layout: 'fit',
title: 'Title',
tools: [
{
iconCls: 'x-fa fa-plus',
reference: 'addempbtn',
handler: function() {
newGridPanel.down(xt).getController().onAdd()
},
tooltip: 'Add a New Employee'
}
],
defaults: {
flex: 1
},
items: [
{
xtype: xt,
id: newgridid,
}
]
});
newGridPanel.setX(20);
newGridPanel.setY(20);
newGridPanel.show();
How can I put panel with some text inside navigation view, like here http://joxi.ru/E2pyDJQC9MLnyA
I tried past panel in navigation treelist but panel not displayed.
Also I united my treelist and panel in joint container:
{
xtype: 'maincontainerwrap',
id: 'main-view-detail-wrap',
reference: 'mainContainerWrap',
flex: 1,
items: [
{
xtype: 'container',
reference: 'leftContainer',
itemId: 'leftContainer',
layout: {
type: 'vbox',
align: 'stretch'
},
items: [
{
xtype: 'treelist',
reference: 'navigationTreeList',
itemId: 'navigationTreeList',
ui: 'navigation',
store: 'NavigationTree',
width: 64,
micro: true,
expanderFirst: false,
expanderOnly: false,
listeners: {
itemclick: 'onNavigationItemClick',
selectionchange: 'onNavigationTreeSelectionChange'
}
},
{
xtype: 'panel',
header: false,
layout: 'fit',
height: 100,
hidden: checkSubscription().hidden,
width : 64,
userCls: 'sidebar-purchase-wrapper',
renderTo: Ext.get("leftContainer"),
html :
'My text Here'
},
{
xtype: 'container',
flex: 1,
reference: 'mainCardPanel',
cls: 'sencha-dash-right-main-container',
itemId: 'contentPanel',
layout: {
type: 'card',
anchor: '100%'
}
}
]
}
Panel displayed, but when I'm click button onToggleNavigation animation not work correct.
In my extjs 6.0.0.640, in my panel, I have a tab panel.. inside tab panel I have 2 grids. How do I stretch the grids vertically to fit inside the tab panel? basically stretching the height to fill vertically?
PROJECT CODE
Ext.define('ExtApplication4.view.performance.Performance', {
extend: 'Ext.panel.Panel',
xtype: 'app-performance',
controller: 'performance',
itemId: 'performanceItemId',
requires: [
'ExtApplication4.view.performance.PerformanceController',
'ExtApplication4.util.GlobalVar',
'Ext.chart.axis.Category',
'Ext.chart.axis.Numeric',
'Ext.chart.series.Line',
'Ext.chart.series.Area'
],
title: 'Performance',
layout: {
type: 'fit'
},
items: [
{
xtype: 'tabpanel',
itemId: 'tabPanelId',
activeTab: 0,
//flex: 1,
//height: '100%',
items: [
{
title: 'Portfolio Level',
//layout: {
// type: 'vbox'
//},
items: [
{
xtype: 'grid',
title: 'Portfolio Level',
itemId: 'performancePortfolioLevelGridID',
bind: {
store: '{myPortfolioPerformanceStore}'
},
margin: '10px 0px 10px 0px',
ui: 'featuredpanel-framed',
cls: 'custom-gridPerformance',
//height: 500,
flex: 1,
width: 975,
collapsible: false,
listeners: {
itemClick: 'onAccountClick'
},
features: [{
ftype: 'summary',
dock: 'bottom'
}],
columns: columns are here
},
{
title: 'Daily Portfolio Equity',
width: 975,
//height: 300,
flex: 1,
ui: 'featuredpanel-framed',
margin: '10px 0px 10px 0px',
xtype: 'chart',
theme: 'awesome2',
interactions: 'itemhighlight',
}
Your problem isn't the tabpanel. A tabpanel is already set to layout:'fit' by default.
It's the panel that contains the tabpanel. You should provide it with a fit layout as well, so that the tabpanel is sized to fill the panel.
Ext.create({
xtype: 'panel',
layout: 'fit'
I need to set horizontal scrolling to an ExtJS tbar which contains buttons in a row that are not visible in the end. Following is the code.
Ext.define('myProject.view.accounts.user.UserGrid', {
extend: 'Ext.grid.Panel',
alias: 'widget.usergrid',
minHeight: 400,
margin: '0,5,0,5',
title: 'User Accounts',
region: 'center',
cls: 'grid-with-footer',
scroll: 'vertical',
bind: {
...
},
initComponent: function() {
...
Ext.applyIf(me, {
columns: [{
...
}],
features: [{
...
}],
tbar: [{ // <-- this should be horizontally scrollable.
...
}],
bbar: {
...
}
});
this.callParent();
}
});
(I'm using ExtJS 4.2.1)
Instead of using tbar, you can add it as a dockedItem, which allows for more configs
dockedItems: [{
xtype: 'toolbar',
dock: 'top',
overflowX: 'scroll', // <---- This allows horizontal scroll
items: [
.....
]
}]
You can view this in a fiddle here
(edit: fiddle was in ExtJS 6.2 instead of 4.2, whoops)