I'm trying to create a property grid with ExtJS. The problem I'm having is that the text is too wide for the column. Is there anyway to force text to wrap around and just create a taller row? Here's what I have so far: http://jsfiddle.net/lordzardeck/pLYt3/1/
Basically i'd like the title row to expand to read this:
A Reason for Spelling (Level B):
Teacher's Guidebook
is this possible? if so, how?
Just add this CSS:
.x-property-grid .x-grid-row .x-grid-property-name .x-grid-cell-inner {
white-space: normal;
}
.x-property-grid .x-grid-row .x-grid-property-name .x-grid-cell-inner,
.x-property-grid .x-grid-row-over .x-grid-property-name .x-grid-cell-inner {
background-image: none;
}
.x-property-grid .x-grid-row .x-grid-property-name,
.x-property-grid .x-grid-row-over .x-grid-property-name
{
background-position: -16px 1px;
background-image: url("http://dev.sencha.com/deploy/ext-4.1.0-gpl/resources/themes/images/default/grid/property-cell-bg.gif");
background-repeat: repeat-y;
}
Use customEditors property of the grid.
See your updated example.
Setting white-space: normal; causes rendering issues when scrolling, using ExtJS 6
You should set cellWrap: true on the column, as pointed out by this thread:
https://www.sencha.com/forum/showthread.php?205554-extjs-grid-column-text-wrap-around-auto-expand
Related
I'm using Atom 1.15.0 on Mac Sierra. I wanted to change the mouse cursor from a thin bar to something more visible, like a block. I opened my styles.less file and added
atom-text-editor .cursor {
transition:opacity 0.5s linear;
}
and then restarted Atom, but my mouse cursor appears as before (a thin line). How do I change it?
Edit: INcluding my styles.less file
/*
* Your Stylesheet
*
* This stylesheet is loaded when Atom starts up and is reloaded automatically
* when it is changed and saved.
*
* Add your own CSS or Less to fully customize Atom.
* If you are unfamiliar with Less, you can read more about it here:
* http://lesscss.org
*/
/*
* Examples
* (To see them, uncomment and save)
*/
// style the background color of the tree view
.tree-view {
// background-color: whitesmoke;
}
// style the background and foreground colors on the atom-text-editor-element itself
atom-text-editor {
// color: white;
// background-color: hsl(180, 24%, 12%);
}
// style UI elements inside atom-text-editor
atom-text-editor .cursor {
transition:opacity 0.5s linear;
}
.editor .cursor {
position: absolute;
border: 1px solid;
background-color: rgba(244,100,122,0.6);
}
atom-text-editor .editor-contents--private { cursor: default; }
I would direct you to this package:
https://atom.io/packages/block-cursor
Also: Changing cursor style of atom editor
Update:
These properties should apply to the mouse cursor as they do with the text cursor. As long as they're directed properly.
Try Adding this to the StyleSheet:
atom-text-editor .editor-contents--private {
cursor: default;
position: absolute;
border: 1px solid;
background-color: rgba(244,100,122,0.6);
}
Insert this into your styles.less
atom-text-editor .editor-contents--private { cursor: default; }
atom-text-editor {
cursor: url(/home/thedude/Pictures/ico/octocat_mini.png), auto;
}
Atom with Octocat mouse pointer
I can confirm that this line allows for the mouse cursor to be changed, but only when in the editor or in search boxes ,etc. The typing cursor is the purple thingie after the } at the end.
How to activate scrolling using React Autosuggest (like the fourth example http://react-autosuggest.js.org/) ?
I can't get the option to do that in Documentation.
Actually, it was quite straight-forward :
.react-autosuggest__suggestions-list
{
max-height: 200px;
overflow-y: auto;
}
Defining a static height and adding overflow-y to auto was the solution to my problem.
Here is my MainView:
Ext.define("Test.view.Main", {
extend: 'Ext.Panel',
config: {
cls: 'transp'
}
});
Here is (the relevant part of) my app.css:
/* line 3, ../themes/stylesheets/sencha-touch/default/core/_reset.scss */
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3,
h4, h5, h6, pre, code, form, fieldset, legend,
input, textarea, p, blockquote, th, td {
margin: 0;
padding: 0;
}
.transp
{
background-image: url(http://support.sencha.com/assets/images/logo-sencha.png);
background-repeat: no-repeat;
background-size: 100% 100%;
}
I know it recognizes the class because when I set the opacity to 0, the gray background of the mainview isnt displayed. Can someone please help me? I am at a total loss.
Try using !important in your CSS property.
FWIW, this didn't work for me.
I have a form panel w/ Sencha Touch and had to do this:
.TxPanel .x-scroll-container {
background: url('img/txbackground.png') repeat center;
}
after adding TxPanel to the cls setting for the form.
Once thing in dealing with CSS that most people don't realize is specificity! http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/
So if you have your background class .myBackground{ background-image:.. } vs sencha's .x-container .x-component .x-background{ background-image:..} sencha's class has more selectors, and a higher specificity, and will override your .myBackground class! Even if it is declared after sencha's css!
Anyway learning about specificity in depth helped me a lot with styling in sencha.
I use Ext.grid.Panel in my project, but I think the default row height is too large and I can't modify the row height, so the whole grid makes me feel uncomfortable.
However, I find the panel-grid example in Extjs-4 doc is quite good. In it the row height is adjusted to fit the words height.Thus the whole grid is very compact.
So I wonder how can I set the grid row height?
One way you could change the row height is by using css. Each row uses padding along with the content for the height so if you were change the padding in this class it would make the row higher/lower:
.x-grid-cell-inner {
overflow: hidden;
padding: 3px 6px;
white-space: nowrap;
}
Also, you can take a look here:
http://docs.sencha.com/ext-js/4-0/#!/api/Ext.view.Table-method-getRowClass
The following code uses a getRowClass function for the grid to specify a CSS class for specific rows:
JavaScript Code
viewConfig : {
forceFit : true,
getRowClass : function(record, index) {
if (index % 2 == 0)
return "red";
else
return "green";
}
},
The height can then be modified with CSS:
CSS Code
.red .x-grid-cell {
background-color: #FFFFDD;
height: 30px;
}
I have a gridpanel and 5 columns in that. Problem is that column headers and row data are not aligned. I believe its just the problem in my project only as when i create an example with the same code then everything works fine. Check the following image:
Can anyone suggest what could be the problem?
Please apply below css as per the requirements.
1) For Customizing specific ExtJS GridPanel, apply below css:
#testgrid_id table caption,table th,table td {
padding : 0px !important;
margin : 0px !important;
}
Note: Here, above "#testgrid_id" is the id of specific Grid Panel.
2) For applying to all ExtJS GridPanels, apply below css :
table caption,table th,table td {
padding : 0px !important;
margin : 0px !important;
}
Thanks!
Actually I found out that most times, the grid is under some panel.
Hence the actual problem is with this class
.x-grid-cell-inner
{
overflow: hidden;
padding: 2px 6px 3px;
**text-overflow: ellipsis;
white-space:nowrap;**
}
This is because the width of the or
<td class=" x-grid-cell x-grid-cell-gridcolumn-1099 "><div class="x-grid-cell-inner "></div></td>
Does not get set. Making the Div overflowing the columns and screwing up the whole grid alignment.
Probably because i nested the GridPanel into another panel OR a Row expander in my case or under some modal dialogue or whatever it may be causing the settings not to take place.
A Quick Fix.
**white-space:normal;**
Will do the trick and squeeze the contents into the column. However it does not apply the ellipses so it is a bit annoying if the content is long, its not hidden with "..."
I will try to find another solution that does the trick, but guess what, time to deploy this to the server!
I hope this helps someone
I have this bug using GXT 2.2.5 (Chrome Version 26.0.1410.43m).
Solution:
#media screen and (-webkit-min-device-pixel-ratio:0) {
.x-grid3-row td.x-grid3-cell
{
box-sizing: border-box;
}
}
Note, if your CSS contains something like:
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
remote it.
I had exactly the same problem.
For me the problem was, was that I was setting HTML ids on my column headers. ExtJS then appends funny things to the ID, like titleEl, textEl, triggerEL.
Eg:
<div id="myPackageGridId1-titleEl" class="x-column-header-inner">
This must somehow screw up the column listener.
Solution : use class instead.
In my case (GXT 2.2.1) I fixed the problem by subclassing GridView, overriding getColumnStyle, and setting adj to 0:
import com.extjs.gxt.ui.client.GXT;
import com.extjs.gxt.ui.client.Style;
import com.extjs.gxt.ui.client.widget.grid.GridView;
public class GridViewBugFix extends GridView {
private boolean fixHeaderDisplacement = true;
public GridViewBugFix() {
super();
}
#Override
protected String getColumnStyle(int colIndex, boolean isHeader) {
String style = !isHeader ? cm.getColumnStyle(colIndex) : "";
if (style == null) {
style = "";
}
int adj = GXT.isWebKit ? 2 : 0;
if (fixHeaderDisplacement) adj = 0;
style += "width:" + (getColumnWidth(colIndex) + adj) + "px;";
if (cm.isHidden(colIndex)) {
style += "display:none;";
}
Style.HorizontalAlignment align = cm.getColumnAlignment(colIndex);
if (align != null) {
style += "text-align:" + align.name() + ";";
}
return style;
}
}