ExtJS4.2 Grid Knowledge Point seven: Display line numbers, zebra effects (inconsistent odd and even row background color), copy cell text, prevent click column sorting

This section mainly studies ExtJS4.2 grid display line number, zebra effect (odd and even row background color inconsistent), copy cell text, prohibit click column sort, prohibit column head right menu, sample picture:

650) this.width=650; "alt=" ExtJS4.2 grid Knowledge point seven: Display line numbers, zebra effects (inconsistent odd and even row background color), copy cell text, prohibit click column sorting, prohibit column header right menu "src="/http Www.itdatum.net/uploads/webui/2014/0817/20140817003.png "/>

Online demo / Online demo

The main contents are as follows:

1. Show line Numbers

2. Zebra effect (odd and even row background color inconsistent)

3. Copying cell problems

4. Prevent clicking on column sorting

5. Prohibit column header right menu

1. Display line numbers

Increase the row number column in the grid, Xtype specified as Rownumberer.

{header: ' NO ', xtype: ' Rownumberer ', width:40,sortable:false}

2. Zebra effect (odd and even row background color inconsistent)

Viewconfig the property in the grid and specifies Striperows as true.

viewconfig:{striperows:true,//Show zebra crossing in table Enabletextselection:true//Can copy cell text}

3. Copy cell text

As above, viewconfig the property in the grid and specify Enabletextselection as true.

viewconfig:{striperows:true,//Show zebra crossing in table Enabletextselection:true//Can copy cell text}

4. Prohibit Click Column sorting

Assign each column definition property sortable to False, and the "Name" column is set to unordered in the instance.

{header: ' name ', Dataindex: ' Name ', width:100,sortable:false}

650) this.width=650; "alt=" ExtJS4.2 grid Knowledge point seven: Display line numbers, zebra effects (inconsistent odd and even row background color), copy cell text, prohibit click column sorting, prohibit column header right menu "src="/http Www.itdatum.net/uploads/webui/2014/0817/20140817004.png "/>

5. Disable display of column header to the right menu

Assign each column definition property menudisabled to True, and the "Idno" column in the instance is set to not display the menu to the right of the column header.

{header: ' Idno ', dataindex: ' Idno ', width:150,menudisabled:true}

650) this.width=650; "alt=" ExtJS4.2 grid Knowledge point seven: Display line numbers, zebra effects (inconsistent odd and even row background color), copy cell text, prohibit click column sorting, prohibit column header right menu "src="/http Www.itdatum.net/uploads/webui/2014/0817/20140817005.png "/>

This article is from the "itdatum" blog, make sure to keep this source http://itdatum.blog.51cto.com/1152235/1541811