Some attribute descriptions of grid in extjs

1. UI modification (CSS style ):
In extjs, the interface style is very different from the style of our product, from the border, the color of the selected row to the color of the row to move the mouse, menu, and so on, almost all are different. Extjs sets these styles by CSS. For example:
The color of the selected row can be set as follows:
. X-grid3-row-selected {Background: # c6e2ff! Important ;}
Others are similar. You only need to find the corresponding class and set the part to be modified.

2. attribute function (about Ext. grid. groupingview, editorgridpanel):
the grid function of extjs is powerful, such as sorting, hiding, or moving columns. These attributes correspond to each other, you can choose whether to or not. Some of these attributes and their functions are as follows:
*. editorgridpanel:
border: false, // grid boundary
autoheight: True, // whether the grid height must be specified
enablecolumnmove: false, // whether the grid column can be moved
enablehdmenu: false, // whether the header in the column must have a drop-down menu
trackmouseover: True, // when the mouse moves the row, whether the row needs to be highlight
striperows: True, // make the background color of the adjacent two rows of the grid different
*. groupingview:
in the data to be displayed, the data is grouped based on a certain data point of the data points and displayed in groups. This data point is determined by the groupfield in *. groupingstore. *. Groupingview sets the display attributes of the grid displayed by this group. For example:
forcefit: True, // whether to adjust the column width based on the grid width to prevent horizontal scrollbar
enablegroupingmenu: false, // controls whether the group option (group by this field, show in groups (checkbox) exists in the header drop-down menu.
showgroupname: True,
// whether the header of the Column Used for grouping data points should be displayed along with the group name
hidegroupedcolumn: True, // whether to display the data points used for grouping in this column
startcollapsed: false, // when you first enter the grid page, whether the group is merged or expanded
scroloffset: -1, // the space left by the vertical scrollbar (default: 19px)

3. Add images to cells:
In Ext. Grid. columnmodel, the column corresponding to the added image is linked to a function with its render. For example:
VaR colmodel = new Ext. Grid. columnmodel ([
{Header: "com", render: addimgs. createdelegate (this )},
{Header: "test", width: 200, sortable: false}
]);
The response function is as follows:
Addimgs = function (value, P, record ){
If (record. Data. descrip! = "")
{
P. ATTR = 'ext: QTip = "add to playlist" style = "background-image: URL (/IMGs/icn_view.gif )! Important; Background-position: center 2px; Background-repeat: No-Repeat; cursor: pointer ;"';
}
}
The record. Data in the function is the data of the grid, and the coloring is the path and title of the image to be added.

4. When the number of words in the displayed content exceeds the number of words that can be displayed in the cell, how to make it wrap automatically (how to wrap text when the length of characters is more than the width of the column ):
Set the CSS of the class used for these cells. For example:
. X-grid3-cell-inner {
White-space: normal;
Overflow: visible;
}
Note that the default value of overflow is hidden. after white-space is added, wrap can be used, but the height of a cell is still the height of a row. Therefore, no data except the first row can be seen. The height of the row where the cell is located is adjusted with the number of rows of data only after the overflow value is changed to visible.

5. When the page is started, all groups except the first group (collapsed) are closed (folded ):
First, set the property startcollapsed to close all groups: startcollapsed: true;
Then, call the function in store. Load ({callback: function (records, O, S) {togglefirstgroup () ;}}) to expand the first group:
// The gridview is the view used by the grid, such as (var gv = new Ext. Grid. groupingview ({});).CopyCodeThe Code is as follows: function togglefirstgroup (gridview)
{
VaR grnum = gridview. getgroups (). length;
For (VAR I = 0; I <grnum; I ++)
{
VaR firstgroupid = gridview. getgroups () [I]. ID;
If (firstgroupid & firstgroupid! = "")
{
Gridview. togglegroup (firstgroupid );
Break;
}
}
}

6. Date Format: The data is
1). The result of this format is: Web Sep 24 00:00:00 UTC + 0800 2008
{
Header: dheader,
Width: 90,
Sortable: True,
Dateformat: 'Y-m-d', // If dateformat is'm/D/Y', the result is the same.
Dataindex: 'date'
},
2). The result of this format is: 2008-09-24
{
Header: dheader,
Width: 90,
Sortable: True,
Renderer: Ext. util. format. daterenderer ('Y-m-d'), // format is'm/D/Y', and the result is "09/24/2008"
Dataindex: 'date'
},
Some of the descriptions found about the format of class date and its output (http://extjs.com/deploy/ext/docs/output/Date.html ):
****************************
Format output description
------------------------------------------------------------------------------
D 10 day of the month, 2 digits with leading zeros
D wed a textual representation of a day, three letters
J 10 day of the month without leading zeros
L Wednesday a full textual representation of the day of the week
S th English ordinal day of month suffix, 2 Chars (use with J)
W 3 numeric representation of the day of the week
Z 9 the Julian Date, or day of the year (0-365)
W 01 ISO-8601 2-digit week number of year, weeks starting on Monday (00-52)
F January a full textual representation of the month
M 01 numeric representation of a month, with leading zeros
M Jan month name abbreviation, three letters
N 1 numeric representation of a month, without leading zeros
T 31 Number of days in the given month
L 0 whether it's a leap year (1 if it is a leap year, else 0)
Y 2007 a full numeric representation of a year, 4 digits
Y 07 a two digit representation of a year
A pm lowercase ante meridiem and post meridiem
A pm uppercase ante meridiem and post meridiem
G 3 12-hour format of an hour without leading zeros
G 15 24-hour format of an hour without leading zeros
H 03 12-hour format of an hour with leading zeros
H 15 24-hour format of an hour with leading zeros
I 05 minutes with leading zeros
S 01 seconds, with leading zeros
O-0600 difference to Greenwich time (GMT) in hours
T CST timezone setting of the machine running the code
Z-21600 timezone offset in seconds (negative if west of UTC, positive if East)
**********************************
Below are some formats and their corresponding results: the data is the same as above, with Renderer: Ext. util. format. daterenderer (Format)
"Y-m-D" --> 2008-09-24
"Y-m-D" --> 08-09-24
"F j, Y" --> September 24,200 8
"F j, Y" --> September 24, 08
"F j, Y, G: I A" --> September 24,200 8, AM