Description of some attributes of grid under ExtJS_extjs

1. Interface modification (css style):
The interface style in Extjs is very different from the style of our product itself, from the color of the border and selected row to the color of the row the mouse moves to, and the menu etc., almost all different. Extjs's setting of these styles is completed 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, just find the corresponding class, and then Just set the part you want to modify.

2. The role of attributes (About Ext.grid. GroupingView, EditorGridPanel):
Extjs’s grid has powerful functions, such as sorting, hiding columns or moving columns, etc. Some attributes correspond to them, and you can choose whether to want them or not. Some of the properties and their functions are as follows:
*. EditorGridPanel:
border: false, //Grid border
autoHeight: true, //Whether the grid height should use the specified height
enableColumnMove : false, //Whether the grid columns can be moved
enableHdMenu: false, //Whether there should be a drop-down menu in the header of the column
trackMouseOver: true, //When the mouse moves over the row, whether the row should be highlighted
stripeRows: true, //Make the background color of two adjacent rows of the grid different
*. GroupingView:
In the data to be displayed, group it according to one of their data points and display it in groups. This data point is determined by the groupField in *.GroupingStore. *.GroupingView sets some display properties of the group displayed on the grid. For example:
forceFit:true, //Whether to adjust the width of the column according to the width of the grid to prevent the appearance of the horizontal scrollbar
enableGroupingMenu: false, //Control whether there is a group option in the header drop-down menu (Group By This Field, Show in Groups(checkbox))
showGroupName: true,
//Whether the header of the column of data points used for grouping should be displayed together with the group name
hideGroupedColumn: true, //used for grouping Whether the column of data points should be displayed
startCollapsed: false, //When entering the grid page at the beginning, whether its group is closed or expanded
scrollOffset: -1, //left for the vertical scrollbar space (default is 19px)

3. Add a picture in the cell:
In Ext.grid.ColumnModel, correspond to the column where the picture is added, and use its render link to A function is added. 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 name of the image to be added.

4. How to wrap text when the length of characters is more than the width of the column:
Just set the css of the classes used in these cells. For example:
.x-grid3-cell-inner{
white-space:normal;
overflow:visible;
}
It should be noted that the default value of overflow is hidden. When After adding white-space, wrap can be used, but the height of the cell is still the height of one row, so the data cannot be seen except for the first row. Only after changing the value of overflow to visible, the height of the row where the cell is located will be adjusted according to the number of rows of data.

5. When entering the page at the beginning, let all groups except the first group expand (collapsed), other groups are closed (folded):
Pass first Set the attribute 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 :
//gridView is the view used by the grid, such as (var gv = new Ext.grid.GroupingView({});).

6.date format: The data is 9/24/2008
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 will be 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', the result is "09/24/2008"
dataIndex: 'date'
},
Some 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)
************************************
The following are some formats and their Corresponding result: The data is the same as above, using renderer: Ext.util.Format.dateRenderer(format)
“Y-m-d” --> 2008-09-24
“y-m-d” --> 08-09-24
“F j, Y” --> September 24, 2008
“F j, y” --> September 24, 08
“F j, Y, g:i A” --> ; September 24, 2008, 12:00 AM