Is there a way to apply Alternative row css on the child level of a tree grid?
Currently the stripeRows config on the treePanel viewConfig just makes everything grey and white, but it is difficult to distinguish the child rows from the parent rows.
Ideally I'd like to make the parent objects alternate colors one way and the child rows alternate colors another way.
I was thinking of writing a function using the "getRowClass" method to manually update the row class. I was wondering if there was a cleaner way.
The getRowClass looks good to perform row attributes change. You can get a node's depth with the getDepth() function:
var grid = Ext.create ('Ext.tree.Panel', {
xtype: 'tree-grid',
viewConfig: {
getRowClass: function(record, rowIndex, rowParams, store) {
return 'node-depth-' + record.getDepth()
}
}
...
And use the css:
.node-dept-1 .x-grid-cell {
background-color: white;
}
.node-depth-2 .x-grid-cell {
background-color: #dddddd;
}
...
Solution found here
I used iconCls property on the model to distinguish rows through an icon. This has an added benefit of not only seprating parent/child rows but also child rows themselves.
I used a model mapping trick to give me distinct row type values like this:
{name:'iconCls', mapping:'type.name'}
and then also added a css class to support different type names:
.cables, .Cable {
background-image: url(../images/silk/cables.jpg) !important;
}
hope this helps.
Related
I want to change row background on basis of row data in ExtReact grid, I couldn't find any option in the documentation
I think you are looking for Ext.grid.feature.RowBody. You have to override the getAdditionalData method and return an object that contains your rowBodyCls.
Ext.create('Ext.grid.Panel', {
...
features: [{
ftype: 'rowbody',
getAdditionalData: function (data, idx, record, orig) {
// Use the data/record to determine which class to apply, then
// style the row body in CSS.
return {
rowBodyCls: "my-body-class"
};
}
}],
...
I have the following problem. i have a grid with a custom row height wich is set with css.
my css:
.blubb>td {
overflow: hidden;
padding: 3px 6px;
white-space: nowrap;
height: 27px !important;
}
in getRow class i assign this class to the rows. This works really well the second time i load the grid. When i load the grid for the first time, it looks like this:
So it looks like the Css rules won't get applied to the rows, but why are they applied when i load the grid for the second time? You should also know, that the first 4 columns are locked, so this is a locked grid. Could someone please help me to fix this issue? Thx in advance!
instead of using the getRow, you can use the tdCls property in your Ext.grid.column.Column see here, or you can define a custom column:
Ext.define('Ext.ux.grid.StyleColumn', {
extend: 'Ext.grid.column.Column',
alias: 'widget.stylecolumn',
/* author: Alexander Berg, Hungary */
defaultRenderer: function(value, metadata, record, rowIndex, colIndex, store, view) {
var column = view.getGridColumns()[colIndex];
//we can use different classes in each cell
if (record.data.tdCls) {
metadata.tdCls = record.data.tdCls;
//we can use different classes in each column
} else if (column.tdCls) {
metadata.tdCls = record.data.tdCls;
//we can use different classes in each grid (you can define it in viewConfig)
} else if (view.rowCls) {
metadata.tdCls = view.rowCls;
//we can add a default class
} else {
metadata.tdCls = 'mydefault';
}
return value;
}
});
I've been unable to add Scroll Bars to two views I have displaying with Ext. Each View is an extension of a base view, and the base has autoScroll: true. I've verified that the elements are properly assigned an overflow: auto property.
I've done some searching around and found this question and after applying it's solution (even though I wasn't using this 'vbox' layout) it didn't solve my problem.
Here is the base view:
Ext.define('Our.extensions.baseList', {
extend: 'Ext.view.View',
itemSelector: 'div.postContainer',
autoScroll: true,
initComponent: function(){
this.tpl = new Ext.XTemplate(
'<tpl for=".">',
'<div name="postContainer" class="postContainer">',
// Contains Layout for posts
'</div>',
{ // can run internal functions within a template
createButton: function(idPost){
// Creates layout for buttons and returns it
}
}
);
this.callParent(arguments);
}
});
And the two child views are:
Ext.define('Our.view.post.convList', {
extend: 'Our.extensions.baseList',
alias : 'widget.convList',
emptyText: 'No Conversation Followed',
title: 'Coversations',
initComponent: function(){
this.store = new Ext.create('Ext.data.Store', {
id:'convStore',
model: 'Our.model.Post',
data: []
});
this.callParent(arguments);
}
});
And:
Ext.define('Our.view.post.postList', {
extend: 'Our.extensions.baseList',
alias : 'widget.postList',
emptyText: 'No Posts',
title: 'Posts'
});
Ultimately, my question is does Ext.view.View actually support the autoScroll config property (or does it just ignore it as it seems to), which is listed in the Sencha docs as a valid config property. I know that it doesn't support the layout config hence why the linked questions solution failed to work. If it does support it, how would I go about getting the scroll bars to show up?
EDIT
Some things I've discovered in my attempts to come up with a solution, setting a size on the View itself works as long as the size is hard coded (a set number of pixels). Such as adding the config: height: 500, or a CSS class with height: 500px; but percentage sizes through CSS classes don't work at all - they don't even size the component.
SECOND EDIT
As I stated in comments to the first answer received, the component was getting the size 1063 (a note is that, the development environment is on a 1080x1920 monitor (in portrait) and with the JavaScript Console running in Chrome it's the height of the visible frame is 1063 pixels. By 'visible' I mean the postPanel that the Views are being added to.
I have found a temporary solution, unfortunately I don't think it's ideal for an actual production release - I'm using the refresh of the XTemplate to set the height of the component to the height of the panel to that of the postPanel (which sets the same height as it has been receiving) and this seems to force it to apply the scroll bars. I also added a listener to the resize event of the postPanel that fires the refresh event of the two Views.
The additions...
to the child views:
listeners: {
refresh: function() {
var parent = this.up('postPanel');
if (parent != undefined) {
this.setSize({
width: undefined,
height: parent.getHeight()
});
}
}
}
and to the postPanel:
listeners: {
resize: function() {
var postList = this.down('postList');
if (postList != undefined) {
try {
postList.fireEvent('refresh');
} catch(e) { /* ignored */ }
}
var convList = this.down('convList');
if (convList != undefined) {
try {
convList.fireEvent('refresh');
} catch(e) { /* ignored */ }
}
}
}
The main reason I feel this is not an ideal solution is that it's broken the views automatic resizing to half the width of the parent (and setting the width to parent.getWidth() / 2 in the this.setSize() call in the refresh event doesn't alter the size at all, even if the parent is resized. In addition to that, I'm not sure if this will add any overhead to slower computers or not.
So the autoScroll should work as long as the component knows the size of the box it is supposed to fit in. If you don't want to set a specific box size try placing your view component into a viewport with fit layout. Then the viewport will dictate the size of the box and your view should start scrolling in the allocated space. This principal is used for all containers - some one somwhere must specify the size of the box. Viewport is the magic component that figures out the size of the full screen by default.
Try to place each of your views in a container with layout: 'fix'. Then the autoScroll: true of the views will force the scroll bars, when the content requires it.
How can I control to opacity of a disabled panel with a mask.
I would like to disable to the panel (meaning It will be touchable) and leave its opacity as is.
Thx
You can create your own CSS style sheet that overrides ExtJS's default style sheet for disabled items. In ext-all.css, there are several style configurations for the .x-item-disabled class that you can take a look at. For example, they specify the opacity for toolbar button icons like so:
.x-toolbar .x-item-disabled .x-btn-icon {
opacity: .35;
-moz-opacity: .35;
filter: alpha(opacity=35);
}
So you'll have to look up what class your panel belongs to and construct a style sheet that includes specification for your particular selectors.
CSS Syntax (Wikipedia)
I would recommend to whoever lands on this post, to create a class for the panel disabled state in your own css file and then configure the panel disabled state class as follows, so you will only affect the desired panel and not the entire application:
In your CSS
.my-disabled-panel {
opacity: .35;
-moz-opacity: .35;
filter: alpha(opacity=35);
}
And in the panel config...
Ext.create('Ext.panel.Panel', {
[...],
disabledCls: 'my-disabled-panel',
[...]
}
(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.