I'm using wordWrap config for grid columns and version of EXT JS I'm using is 6.5.3:
{
dataIndex: "header",
menuDisabled: true,
sortable: false,
cellWrap: true,
renderer: myRenderer
}
The problem with it is that the grid renderer seems to affect cells individually so the whole grid is not consistently rendered when there are word-wrapped cells and regular cells at the same time:
Inconsistently Rendered Grid
What I want to achieve is like:
Consistenly Rendered Grid
Does anyone have any solution to fix it?
I'd appreciate some help : )
I have no idea how to handle it.
You can add css to grid cells common class
text-overflow: ellipsis;
Related
The AgGrid documentation for Grouping Footers, mentions there is a way to customize the rendering of the grouped row using groupInnerCellRenderer, but its not clear if this prop needs to be added to the gridOptions or to cellRendererParams for agGroupCellRenderer, see the excerpt below:
When showing the groups in one column, the aggregation data is displayed in the group header when collapsed and only in the footer when expanded (ie it moves from the header to the footer). To have different rendering, provide a custom groupInnerCellRenderer, where the renderer can check if it's a header or footer.
I was wondering if someone could post an example of agGrid that uses groupInnerCellRenderer.
groupInnerCellRenderer should basically be added to cellRendererParams with a custom cell renderer component something like this -
{
headerName: 'City',
field: 'city',
minWidth: 240,
showRowGroup: true,
cellRenderer: 'agGroupCellRenderer',
cellRendererParams: {
suppressCount: true,
checkbox: true,
innerRenderer: 'simpleCellRenderer',
suppressDoubleClickExpand: true,
suppressEnterExpand: true,
},
},
The group cellRenderer will take care of all the expand / collapse, selection etc, but the with simpleCellRenderer you can customize how the cell displays for grouped row.
There is neat example of this in the docs - https://www.ag-grid.com/javascript-grid-provided-renderer-group/#example-group-renderer
I have a grid with two checkcolumns (apart from the rest columns) and I want to make conditional change of cell (adding specific CSS: making thicker borders of this cell if checkcolumn is enabled and default look if it is disabled) in accordance to disable / enable state.
Unfortunately with using Renderer function I end up with strange outcome (displayed object text or true/false values) because of override native Renderer of checkcolumn I presume. Overwriting checkcolumn renderer is also bad practice which I'm not allowed to do.
I've also tried to use listeners like beforeactivate, beforeDisable etc but they seems not being called whenever state of cell change (disabled <> enabled). I thing that it is possible that its because of using specific bind property as seen bellow.
Is there any method to do it clear (without to much of code repetition and without overriding and adding new method to checkcolumn renderer)??
here is code for one of two checkcolumns in my grid:
{
localized: {
text:
'details.tabview.coordination.icccoordination.changepositions.main.view.ebv'
},
dataIndex: 'ebv',
width: 50,
bind: {
disabled: '{!changeContextEditMode.active}'
},
sortable: true,
filter: true,
xtype: 'checkcolumn',
listeners: {
beforecheckchange: 'checkIfCheckChangePossible'
}
}
I will appreciate any help
I'm trying my hands on extjs 4 by trying to recreate some component I have in an old extjs 2 project.
One of the component was creating a floating toolbox (like you get with photoshop) with a thin border and no title or min/max/close buttons. Like so..
In ext4 , I can't seem to be able to reproduce that same result. Here's what the same code looks like in ext 4:
This is the code I had:
app.Toolbox = Ext.extend(Ext.Window, {
,initComponent : function()
{
Ext.apply(this,{
closable:false,
border:false,
width:345,
height:60,
onEsc:Ext.emptyFn,
resizable:false,
x:20,
y:20,
items:[
/* icons (a html items) */
]
});
app.Toolbox.superclass.initComponent.call(this, arguments);
}
/* handlers, methods, etc */
});
Is there any way to get a similar result in ext 4?
I tried using some css to hide some elements like the title bar, but ext 4 always calculates the height of the window as if the element was visible, which looks even weirder.
Any idea?
Ext.panel.Header is just an extended Ext.container.Container so you can do as you wish to it.
I think the closest you're going to get is by applying frame: true which kind of forces the content to fill the window frame.
However, it doesn't seem to work if you have a Close button in the top right.
Ext.create('Ext.window.Window', {
height: 60,
width: 345,
closable: false,
layout: 'fit',
frame: true,
items: {
html: '<p>hello</p>'
}
}).show();
You're still going to have to style it a little, but its far closer to what you need.
i was trying to drag and drop an image inside a panel of extjs. but it didnt work.
Just want to drag and drop elements like in the draggable demos of jquery. Is there an easy solution cause i didn't found.
thanks in advance,
cheers,
Thomas
I am sorry ChrisR, forgot the code. Well i tried it in that way:
panel(with html code of an image) inside a panel. dreagable = true. But i cant drag an drop it like to position XY.
Ext.createWidget('panel', {
renderTo: 'panel1',
width: 500,
height: 500,
items: [
{
xtype: 'panel',
title: 'My Panel',
width: 150,
height: 150,
draggable: true,
html: '<img id="resizeImg" src="avus_gtr.jpg" style="width: 100%; height: 100%;"></img>'
}]
You realize you are adding an image into a panel which is draggable and insert that panel again into your main panel? It isn't the image you are making draggable, it's the panel that the image sits in which is draggable but still the code you posted looks totally wrong.
I suggest you read up on ExtJS DD first to grasp the concepts of Drag and Drop in ExtJS and how that is implemented in default Components like Panels. The way of using DD on an Ext Panel is totally different than making an image draggable. A Panel is an Ext Component with alot of built in features like DD but an image is just a DOM element on which you should implement your DD behaviour yourself.
Check the following links, they have some good info on DD in ExtJS
http://rowen.javaeye.com/blog/479133
http://examples.extjs.eu/?ex=freedrag
http://www.extensions.extjs.com/learn/Tutorial:Advanced_Custom_Drag_and_Drop_Part_1
And ofcourse the docs for Ext.dd: http://dev.sencha.com/deploy/dev/docs/?class=Ext.dd.DragDrop
(This is not a question per se, I'm documenting a solution I found using Ext JS 3.1.0. But, feel free to answer if you know of a better solution!)
The Column config for an Ext JS Grid object does not have a native way to allow word-wrapped text, but there is a css property to override the inline CSS of the TD elements created by the grid.
Unfortunately, the TD elements contain a DIV element wrapping the content, and that DIV is set to white-space:nowrap by Ext JS's stylesheet, so overriding the TD CSS does no good.
I added the following to my main CSS file, a simple fix that appears to not break any grid functionality, but allows any white-space setting I apply to the TD to pass through to the DIV.
.x-grid3-cell {
/* TD is defaulted to word-wrap. Turn it off so
it can be turned on for specific columns. */
white-space:nowrap;
}
.x-grid3-cell-inner {
/* Inherit DIV's white-space from TD parent, since
DIV's inline style is not accessible in the column
definition. */
white-space:inherit;
}
YMMV, but it works for me, wanted to get it out there as a solution since I couldn't find a working solution by searching the Interwebs.
If you only want to apply the wrapping to one column, you can add a custom renderer.
Here is the function to add:
function columnWrap(val){
return '<div style="white-space:normal !important;">'+ val +'</div>';
}
Then add the renderer: columnWrap to each column you want to wrap
new Ext.grid.GridPanel({
[...],
columns:[{
id: 'someID',
header: "someHeader",
dataIndex: 'someID',
hidden: false,
sortable: true,
renderer: columnWrap
}]
Not a "better solution", but a similar one. I recently needed to allow ALL cells in every grid to wrap. I used a similar CSS-based fix (this was for Ext JS 2.2.1):
.x-grid3-cell-inner, .x-grid3-hd-inner {
white-space: normal; /* changed from nowrap */
}
I didn't bother with setting a style on the td, I just went right for the cell class.
If you only want to wrap text in certain columns and are using ExtJS 4, you can specify a CSS class for the cells in a column:
{
text: 'My Column',
dataIndex: 'data',
tdCls: 'wrap'
}
And in your CSS file:
.wrap .x-grid-cell-inner {
white-space: normal;
}
Other solution is that:
columns : [
{
header: 'Header',
dataIndex : 'text',
renderer: function(value, metaData, record, rowIndex, colIndex, view) {
metaData.style = "white-space: normal;";
return value;
}
}
]
The best way to do is by setting the cellWrap to true as below.
cellWrap: true
Its working well in EXTJS 5.0.
use
cellWrap: true
If you still want to use css always try to work with ui's, variables, etc. within themes, or set the style with the style property.