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. properties (About Ext. grid. GroupingView, EditorGridPanel ):
The grid function of Extjs is powerful, such as sorting, hiding columns, or moving columns. All of these attributes correspond to them. You can choose whether to use or not. Some of the attributes and their functions are as follows:
*. EditorGridPanel:
Border: false, // the boundary of the grid
AutoHeight: true, // whether to use the specified height for the grid height
EnableColumnMove: false, // can the columns of the grid be moved?
EnableHdMenu: false, // whether the header in the column must have a drop-down menu
TrackMouseOver: true, // specifies whether the row needs to be highlight when the mouse moves the row.
StripeRows: true, // make the background color of the two adjacent lines of the grid different
*. GroupingView:
In the data to be displayed, the data is grouped and displayed in groups based on a certain data point. 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, // determines whether the group option exists in the header drop-down menu (Group By This Field, Show in Groups (checkbox ))
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
StartCollapsed: false, // enter the grid page at the beginning, and whether the group is merged or expanded.
Scroloffset:-1, // 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 ({});).
The 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
