The property width is a pixel width.
{
xtype: 'grid',
store: store,
selModel: Ext.create('Ext.selection.CheckboxModel', {
mode: 'SINGLE'
}),
layout: 'fit',
columns: [
{
text: "pum",
dataIndex: 'SRD_NAME_FL',
width: 400
}
],
columnLines: true
}
if i have only one column how can i make column width = 100%
or if i have several columns - how to make last column stretch to end of grid?
For ExtJS3, set forceFit on the GridPanels viewConfig. See: http://dev.sencha.com/deploy/ext-3.4.0/docs/?class=Ext.grid.GridView
For ExtJS 4 set forceFit directly on the GridPanel: http://docs.sencha.com/ext-js/4-0/#/api/-cfg-forceFit and use it in conjunction with flex on your columns.
Example for v4
var p = Ext.Create('Ext.grid.Panel',{
forceFit: true,
columns: [{
xtype: 'gridcolumn',
header: _ll.id,
sortable: true,
resizable: false,
flex: 0, //Will not be resized
width: 60,
dataIndex: 'Id'
}, {
xtype: 'gridcolumn',
header: __ll.num,
sortable: true,
resizable: true,
flex: 1,
width: 100,
dataIndex: 'number'
}
});
Example for v3
var p = new Ext.grid.GridPanel({
viewConfig: {
forceFit: true
},
columns: [{
xtype: 'gridcolumn',
header: _ll.id,
sortable: true,
resizable: false,
fixed: true, //Will not be resized
width: 60,
dataIndex: 'Id'
}, {
xtype: 'gridcolumn',
header: __ll.num,
sortable: true,
resizable: true,
width: 100,
dataIndex: 'number'
}
});
Add flex : 1 to the column you want to stretch.
For ExtJS 4, use flex instead of width. If you set flex: 1 and there is only one column, it will take 100% width. If you have two columns and set flex: 1 on both, both will have 50% width.
Flex distributes the available width between the columns by ratio. You may for example say flex: 2 for one column and flex: 1 for two other columns and the result would be that the first one would be twice the width of the other two. You may also use decimal values for flex e.g. 0.5
Notice that if you have a single column in your grid there is a significant difference between using items:[{}] and items:{} notation.
In fact this will NOT work as expected (at least in ExtJS 4.2):
Ext.define('My.SingleColumnGrid', {
extend: 'Ext.grid.Panel',
store: {type: 'someStore'},
forceFit: true,
columns: {
items: [
{
text: 'Something',
flex: 1,
dataIndex: 'something'
}
]
}
});
If you just remove square brackets it will magically start to work as expected (i.e. you will have a single column that extends to fill grid width).
This almost drove me crazy ;-P.
set Flex to 1
Column.Flex = 1;
Related
I have a problem in aligning an item to the right, or anyway at the end of the column.
As you can see in the picture:
even if there is space on the right, it aligns the item left covering part of the text (The complete text is "Battery Level"). I would like to align it near the downward arrow.
I tried to use align:'right' without success.
How could I fix it? this is my code:
columns: {
defaults: {
flex: 1,
},
items: [{
....
},{
text: Strings.positionBatteryLevel,
hidden:true,
sortable: false,
defaults:{
margin:'-31 0 0 55'
},
items: [{
xtype: 'numberfield',
id: 'batteryFilter',
align:'right',
listeners: {
change (e,newValue, oldValue, eOpts ) {
filterGridAttributeType(newValue,'batteryLevel');
}
}
}],
},{
...
There is a config for columns to align the content:
columns: [{
text: 'Battery Level',
sortable: false,
==> align: 'end'
},{
...
I am in trouble with my CSS and I don't find the problem!
Inside the last cell of my datatables I've a dropdown menu that appear clicking on it.
The problem is that the menu "stay" inside the cell and show me scroller!
My fiddle: http://jsfiddle.net/oxs8fp4e/1/
This is my code for table init, but the problem I think is inside CSS of the theme, not table init:
myTable = $('#tabellaArticoli').DataTable({
responsive: {
details: {
type: 'column',
target: 0
}
},
paging: true,
"pageLength": 100,
"lengthMenu": [ [20, 50, 100, -1], [20, 50, 100, "Tutti"] ],
"info": false,
scrollCollapse: false,
scrollX: false,
scrollY: false,
"columnDefs": [
{
orderable: false,
className: 'control',
searchable: false,
targets: 0
},
{ "orderable": false, "targets": 1 },
{ "width": "5%", "orderable": false, "targets": 'azioni' }
]
});
Instead i'd like to show the dropdown like this example: https://keenthemes.com/metronic/preview/demo7/crud/datatables/basic/basic.html
Can someone help me with my css?
EDIT: I've already set scrollX as false: this is not the problem. I think the problem is only inside the CSS
It's nearly the same problem as linked in the 'possible duplicate'-comment. Your table and one or more wrapping elements got the overlow: hidden; style assigned.
In your case you could do the following to achieve that the whole popup-menu becomes visible.
remove/override the overflow-styles:
.table-responsive,
.dataTables_scrollBody {
overflow: visible !important;
}
Change the transform of the dropdown-menu-elements defined by the inline-styles:
transform: translate3d(-120px, 20px, 0px);
I have extended java script Panel with me that contains a a few columns. The data inside the column is received from the server. Some times the data from the server for each column is large and it does not fit inside the row.
Here is the code for the same:
Ext.define('DataDetailsGrid', {
extend: 'Ext.grid.Panel',
requires: [
'DataStore'
],
id: 'DataDetailsGrid',
xtype: 'grid',
margin: "20 20 20 20",
nestedView: false,
title: 'Student information',
store: 'DataStore',
frame: true,
flex: 1,
viewConfig : {
deferEmptyText: false,
emptyText: 'No data Available'
},
columns: [
{ text: 'Id', flex: 0.5, dataIndex: 'id' },
{ text: 'Student name', flex: 1, dataIndex: 'student_name' },
{ text: 'Time Stamp', flex: 1, dataIndex: 'requestTimeStamp' },
{ text: 'email Id', flex: 1, dataIndex: 'emailId' },
{ text: 'About Students', flex: 4, dataIndex: 'response' },
]
});
The issue is with About Students which can be about 500 characters sometimes. This is not getting accommodated inside the given row.
You can use this css code for wrap Adout Students Data.
Check fiddle:https://fiddle.sencha.com/#fiddle/1i3g
.x-grid-cell-inner {
white-space: initial;
}
All you need to do is add the following line to your column's definition
cellWrap: true
Check this fiddle: https://fiddle.sencha.com/#fiddle/1i5o
. I've taken the liberty of forking Ajay Thakur's fiddle.
So, in your case, change your offending code to the following line:
{ text: 'About Students', flex: 4, dataIndex: 'response', cellWrap: true }
we have a grid with 6 columns. One column requires more width compae to others. We have to ahow all the columns in that grid without any horizontal scroll bar.
The code we tried for this is:
{
xtype: 'grid',
viewConfig: {
forceFit: true,
}
columns: [{
header: 'column1'
}, {
header: 'column2'
},
//...
{
header: 'column6',
flex: 2
}]
}
The above code worked fine in IE8. But in IE9 and Google Chrome, the 6th column content is not displayed.
Could anyone please suggest how to solve it?
Remove the forceFit, you can just flex multiple columns, you can use flex 2 vs 1 on the column you want a bit wider.
{
xtype: 'grid',
columns: [{
header: 'column1',
flex: 1
}, {
header: 'column2',
flex: 1
},
//...
{
header: 'column6',
flex: 2
}]
}
We have a gridpanel with columns, that are displaying fine. One column in particular, is a string that can be very large. We want to add a scrollbar to this one column only to accommodate the large wall of text.
Can this be done with Sencha EXT JS? Or if scrollbars can not be done, how about a mouse over to show the whole text in the column?
var secondTab = Ext.create('Ext.grid.Panel', {
columnWidth: 0.60,
xtype: 'gridpanel',
store: standardsResultsStore,
autoheight: true,
columns: [
{
id :'standardName',
text : 'Standard Name',
flex: 1,
sortable : true,
dataIndex: 'standard'
},
{
text : 'Description',
flex : 2,
sortable : true,
dataIndex: 'description_standard'
}
]
});
I did it with CSS, and added tdCls to the specific column
.custom-column .x-grid-cell-inner { white-space:normal; }
--- in tab tdCls: 'custom-column'