I have a grid inside my viewport. Code is as shown below.
By giving a fixed width to my grid, I do not get a horizontal scrollbar for my grid. autoScroll = true dosent help either.
If I remove the fixed width given to my grid or give a layout fixed to my viewport I am not able to resize my grid columns.
I want to be able to be able to resize my columns at will and also need an horizontal scroll bar.
Columns are added dynamically and minWidth, flex and maxWidth have been set for each of the columns
What can be done? Please help
Viewport.js
Ext.define('MyView.view.Viewport', {
extend: 'Ext.container.Viewport',
requires:['MyView.view.gridPanel'],
layout : 'fit',
items:[{
//width:7000,
xtype:'gridPanel'
}]
});
gridPanel.js
Ext.define('MyView.view.gridPanel', {
extend: 'Ext.grid.Panel',
plugins: 'gridfilters',
alias: 'widget.gridPanel',
id: 'tests-view',
name:'graphPanel',
title: 'Tests',
emptyText: '',
store: 'MyView.store.settingStore',
pageSize:10,
dockedItems: [{
xtype: 'pagingtoolbar',
store: 'MyView.store.settingStore',
dock: 'bottom',
displayInfo: true
}],
filters :[],
//features:[],
enableLocking:true,
columns:[], //Columns are loaded dynamically
viewConfig: {
stripeRows: true,
plugins: {
dragGroup: 'user-dd',
enableDrop: false,
ptype: 'gridviewdragdrop'
//forceFit:true
}
},
columnLines: true,
frame: true
});
Scroll doesn't appear, because you have set grid width to 7000px. Usually scroll appears in grid when columns width is greater than grid width. Use layout to fit grid in parent container, or adjust its width, and then scroll should appear.
Related
Task:
I would like to show a really big DataTable in UI which is horizontally and vertically is scrollable
Issue:
Cannot set scrolling on X axis
UI cuts/hides down the first half of the table if not zooming out
Makes the UI not usaböe
Tried:
Reading and setting the following properties
Reading and setting custom styles with the help of git documents
Reading and setting extra HTML tags like and styles allowing overflowX to make it scrollable
Details:
Table is roughly 50-60 columns
200+ rows
component: React-Data-Table-Component
component uses custom solution using a lot of div tags (this is out of the box upon inspecting the react-data-table-component in website)
Needs solution:
Cannot scroll left and right in table
Cannot see left part of the table
Example Column:
{
name: 'header1',
id: 'header1',
maxWidth: 'auto',
minWidth: 'auto',
selector: row => row.data1,
sortable: true,
compact: true,
},
Example Table:
<div style={{ overflowX: "visible", scrollSnapAlign: "start" }}>
<DataTable
columns={DataTableHeaders}
data={filteredItems}
pagination
paginationComponentOptions={paginationComponentOptions}
selectableRows
defaultSortField="name"
subHeader
subHeaderComponent={subHeaderComponent}
subHeaderAlign={Alignment.CENTER}
expandableRows
expandableRowsComponent={ExpandedComponent}
dense
highlightOnHover
fixedHeader
persistTableHead
responsive
direction={Direction.LTR}
//customStyles={customStyles}
//theme="dark"
//className={styleDataTable.rdt_TableRow}
/>
</div>
Apparently this issue can be solved by setting fixed % width based on viewable area
<div style={{ overflowX: "hidden", width: "94vw", alignItems: "flex-start" }}>
<DataTable
className={styleDataTable.rdt_TableCol}
columns={DataTableHeaders}
data={filteredItems}
pagination
paginationComponentOptions={paginationComponentOptions}
defaultSortField="name"
subHeader
subHeaderComponent={subHeaderComponent}
subHeaderAlign={Alignment.LEFT}
expandableRows
expandableRowsComponent={ExpandedComponent}
dense
highlightOnHover
fixedHeader
persistTableHead
responsive
direction={Direction.LTR}
//customStyles={customStyles}
//theme="dark"
//className={styleDataTable.rdt_TableRow}
/>
</div>
Notice that width: 94vw which will make the table fit on the 94% of the visible area.
This way it becomes scrollable from left to right and the data table wont overflow and wont disappear.
Not sure if there is a better solution but for now this works alright.
I am working on a website and on some pages there are very few contents like login page and footer don't reach to bottom, That's why I want main section to cover remaining space if there is any and work like normal if overflow. Basically I want it to work like min-height. I tried using min-height with 100vh and 100% but no desired result.
You can use a custom min height.
<div class="min-h-60">
content...
</div>
In our tailwind config file, you should extend minHeight:
module.exports = {
purge: [],
theme: {
extend: {
minHeight: {
'60': '15rem'
}
}
},
variants: {},
plugins: []
}
I have two stackblitz examples, the first with horizontal slides and then I change them to vertical slides.
When I make this change, the height gets blown up to something very large.
Any help understanding this?
Here is the stackblitz link that works with horizontal slides link - working
Here is the stackblitz link with vertical slides link - css alignment is off
The only difference is I've changed
direction: 'horizontal',
to
direction: 'vertical',
in the config here
config: SwiperConfigInterface = {
observer: true,
observeParents: true,
observeSlideChildren: true,
direction: 'vertical',
threshold: 50,
spaceBetween: 0,
slidesPerView: 1,
centeredSlides: true,
slideToClickedSlide: true,
pagination: this.pagination,
};
Your wrapper has height auto and swiper library calculates height by itself.
Specify boundaries for your wrapper and it should be enough:
.card-body {
height: 200px;
}
Forked Stackblitz
I'm using Extjs and trying to create a layout that fill all the browser's window apart from the navigation bar.
I created a mapPanel with extjs / geoext which it renders to a div in my content:
Ext.create('Ext.panel.Panel', {
layout: "fit",
renderTo: "view",
width:1100,
height: 500,
items: {
layout: "border",
deferredRender: false,
items: [mapPanel, tree,
]
}
});
which works fine but the layout is rendered inside the "view" div.
Can I simply override all the content of the document apart from the navigation bar ?
You can use renderTo: Ext.getBody() or wrap everything in the Viewport.
Ext.create('Ext.container.Viewport',{
items:[{
layout: "border",
deferredRender: false,
items: [mapPanel, tree]
}]
});
However, neither solution will overwrite everything that is in the body already - you will have to destroy existing content manually.
For instance if you have a splash screen:
<div id="splash" style="text-align:center; vertical-align:middle;">
<br><br>
<img src="Loading.png">
<br><br>
<progress max=100></progress>
<br><br>
Loading...
</div>
you may want to destroy that screen in your launch method of Application.js:
launch: function() {
var splash = Ext.get('splash');
if(splash) splash.destroy();
}
I am using ExtJs 4.2
My app needs to a have a button that will invoke a panel, that holds the navigation tree show once clicked.
This button needs to be visible at all times, and centered vertical to the middle and to the right of the screen.
How do I achieve this behavior? I don't want to nest the button in a panel, it should be a part of the view port...
Here is what I have tried:
Ext.define('NG.view.Viewport', {
extend: 'Ext.container.Viewport',
layout: 'border',
id: 'appviewport',
items: [{
itemId: 'app-header',
xtype: 'appheader',
region: 'north',
weight: 10,
border: false,
height: 60
}, {
itemId: 'navigation',
xtype: 'button',
region: 'west',
weight:15
}, {
xtype: 'carddeckmanager',
region: 'center',
weight:10,
border: false,
cls:'n-cardmanager-box',
items: [{
itemId: 'dashboard',
xtype: 'dashboard'
}]
}]
});
but this makes the button expand as the height of the viewport.
If you really want to float that button, there's no sense in adding it to a container or the viewport. Render it to the document body, configure it with floating: true, and give it a z-index that will ensure that it remains above any window (if that's what you want).
Then you can position it where you want with its alignTo method but, better yet, use anchorTo so that it sticks where you put it, even when the browser is resized.
All of this gives us:
var body = Ext.getBody();
// Create the button
var button = Ext.widget('button', {
text: "Yo"
,floating: true
,renderTo: body
});
// z-index
// Ext4's windows default z-index starts from 29000
button.setZIndex(40000);
// Anchor the right of the button to the right of the document body
// with a 5px horizontal offset.
button.anchorTo(body, 'r-r', [-5, 0]);
Put this code somewhere in the startup process of your application. Candidates could be the init method of your application, the initComponent method of your viewport, or a single afterrender listener on the viewport...
Now, if what you want is just that the button remains visible in the right border of the viewport but without it filling the whole region, you need to wrap it in a container with an appropriate layout. For example, add this to your viewport:
{
region: 'west',
layout: {type: 'hbox', pack: 'center', align: 'middle'},
items: [{
xtype: 'button',
text: "Viewport button"
}]
}