So I thought formatting the borders within an extjs treegrid would be basic but I have not been able to find a solution after hours of trying and looking around. The problem I'm having is that my borders appearance and width are inconsistent between both columns and rows (tried attaching screenshot but couldn't since new to site). I tried defining borders directly in the column creation:
columns:[{header: 'H6',dataIndex: 'hour6',width: 210, border: 1}]
as well as in the XTemplate where I'm setting my cell background color (didn't think this would work but thought I'd try):
columns: [{header: 'H6',dataIndex: 'hour6',width: 210,
tpl: new Ext.XTemplate('{duration1:this.doFormat}', {
doFormat: fn(v){
if (v == 1) {return '<span style="background-color: red; width: 100%; border: 1">' + v + '</span>';}
else {return '<span style="background-color:' + currentcolor + '; width: 100%; border: 1">' + v + '</span>';}
}
})
}]
Does anyone know how to format treegrid borders to fix this issue?
Thanks.
Your best bet us to use css classes through the cls config option of your column definition or manipulate the css style directly on the column element. The border between grid rows is set on the .x-treegrid-col class.
// set the border on all rows to red
.x-treegrid-col {
border-bottom: 1px solid red;
}
I'm not entirely sure what you are trying to achieve though, upload a screenshot to http://tinypic.com/ and embed of link to it in your original post, that might help.
Related
I have used following code for increasing the left border of particular column using id selector:
div#PriceCurveCurrent {
border-left: 1px solid black;
}
The quick solution.
.x-gridcolumn > .x-header-el {
border-right-width: 12px;
}
Another solution might be to use the ExtJS theme variables.
Here is a starting point.
I am trying to achieve the transparent color of the area with only borders in spite of color fill for a donut graph. I am using nvd3 with angularJS, but unable to achieve that. Any suggestions on this as how to do this.
If there is any library - which is capable of doing so, please suggest.
Image for reference
The problem is the style set in nv.d3.css.
Add this style after including nv.d3.css
.nvd3.nv-pie path {
stroke: inherit;
stroke-width: 1px;
stroke-opacity: 1;
fill: white;
}
If you only want this to apply this to a particular pie chart add the id to the style selector.
I have read a few questions here and here on this on StackOverflow but nothing seems to help with my situation.
I want to set the background color and border of a textfield dynamically.
My textfield looks like this, but the background is still not changed :
This is because of an image in the background that gives a shading effect. So I try and remove it in the CSS using background-image:none; and background:none; :
.invalid-component {
background-color : #f4f777;
border: 2px dotted #ffee27; //works!!
background-image:none;
background:none;
}
This still has no effect, the image is not removed and the background color does not change. Any help?
Im taking a guess here and going for ExtJS 4.2.1 with Classic theme.
So just change your CSS to
.invalid-component {
background : #f4f777 !important;
border: 2px dotted #ffee27; //works!!
}
I'm having troubles giving some cells some styling in ExtJS 5.
I have two style rules in the index page:
.yellow-cell .x-grid-cell{
font-weight: bold;
background-color: yellow;
}
.red-cell .x-grid-cell{
color:blue;
background-color: red;
}
On select event, the cell selected should be colored with yellow-cell rule. and the cell before it needed to be colored with the other rule red-cell, the rest of the table is just defaults.
var gridTable = Ext.getCmp('gridTable');
gridTable.on("select",function(obj, record, index, eOpts){
gridTable.getView().addItemCls(record, 'yellow-cell');
});
and on deselect I use removeItemCls() then addItemCls() to add the red-cell styling.
Any chance there is a proper way to do this? because my code just color the whole row, and I want to color just the selected/deselected cells.
I'm really stuck here, any help will be highly appreciated.
gridTable.getView().getCell(rec,col).addCls('yellow-cell');
Also you could try console.log(record) to find the right div name and do the following:
Ext.get('idOfcellDiv...').addClas('yellow-cell');
I am trying to build a grid created by AngularJS's ng-grid module that will extend across the width of the webpage. However, when I create the grid, by default it only extends roughly 1/2 of the way across the page. Increasing the width of columns only results in columns being cut off instead of expanding the overall grid. I can't find any online documentation on how to expand the width of grids so any help would be appreciated.
Create a grid style.
.gridStyle {
border: 1px solid #ccc;
width: 100%;
height: 300px
}
And then apply it to the HTML
<div class="gridStyle" ng-grid="gridOptions">