ExtJS4.2 Learning (5) Table rendering and check box

Source: Internet
Author: User
Did you find the examples in the previous chapters too monotonous? Haha, I believe you will know that it is too weak to display text. Now let's take a look at the table rendering and check box functions provided by ExtJs. Some people asked me why your default table style is different from what I did.

Did you find the examples in the previous chapters too monotonous? Haha, I believe you will know that it is too weak to display text. Now let's take a look at the table rendering and check box functions provided by ExtJs. Some people asked me why your default table style is different from what I did.

Did you find the examples in the previous chapters too monotonous? Haha, I believe you will know that it is too weak to display text. Now let's take a look at the table rendering and check box functions provided by ExtJs.

Some people asked me why your default table style is different from what I did. Haha, it is because I introduced other ExtJS4.2 styles, not the default one. It is very easy to change the style, you only need to change the file introduced by Link to easily change various styles ~ Is it awesome? Do you believe it?
Well, let's stay away. Let's take a look at this chapter:


How about it? Is it rich?
First, let's talk about how to change the color of text. If you have learned more about HTML + CSS, you must know how to change it. Similarly, you only need to use renderer in EXTJS to easily make HTML effect, see the following code:

1

2

3

4

5

6

7

{header:'Status',dataIndex:'status',width:80,renderer:function(value){

if(value=='Available'){

return "Available/right.gif' />";

} else {

return "'color:red;font-weight:bold';> Disable'#\'" /wrong.gif' />";

}

}}

You only need to change the column return value to HTML when columns is defined.
The color value of the name column is also the same method. For convenience, I have customized a method to introduce it in renderer, as shown in the following code:

1

2

3

4

5

6

// Modify the column color and customize the renderner Method

function renderMotif(data, cell, record, rowIndex, columnIndex, store){

var value = record.get('name');

cell.style="background-color:"+value;

return data;

}

Column reference:

1

{header:'Name',dataIndex:'name',width:80, renderer:renderMotif},

What is the detailed query information above? See:

The detailed information in the cell is displayed. The main code is as follows:

1

2

3

4

5

6

7

8

9

10

11

// Customize the renderner Method

function renderDescn(value, cellmeta, record, rowIndex, columnIndex, store){

var str="

"The value of this cell is:"+value +"n"+

"The cell configuration is: {cellId:"+cellmeta.cellId+",id:"+cellmeta.id+",css:"+cellmeta.css+"}n"+

"The record of the row corresponding to this cell is:"+record +"The data in one row is in n."+

"This is the first"+rowIndex+"Row n"+

"This is the first"+columnIndex +"Column n"+

"Ext. data. Store corresponding to this table is here:"+ store +"You can use it as needed."+"")' />";

return str;

}

Column definition:

1

{header:'Description',dataIndex:'descn',width:112,renderer:renderDescn}

We can get multiple parameters in the rendering function, as shown below:
Value: the value to be displayed in the cell;
Cellmeta: Cell-related attributes, mainly including id and CSS;
Record: The data object in this row. To obtain the values of other columns, you can use record. data ["id"]. This attribute is very important and is often used;
RowIndex: row number, which indicates the sequence of all records on the current page;
ColumnIndex: column number of the current column;
Store: ds passed during table construction. All data in the table can be obtained through store.

The automatically displayed row number and check box are extensions of the renderer. First, the row number is automatically displayed. Add the RowNumber object to the column model columns, as shown in the following code:

1

new Ext.grid.RowNumberer(), // Automatically display the row number

Similarly, the check box still needs to modify the columns model to add the SelectionModel object:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

// Add the check box component. {checkOnly: true} will solve the problem of selecting a row accidentally in the operation. Only the check box can be used to select a row.

var sm = new Ext.selection.CheckboxModel({checkOnly:true});

// Create a table

var grid = new Ext.grid.GridPanel({

renderTo:'grid', // Rendering position

width:550,

height:250,

selModel:sm,

store:store, // Converted data

columns:columns, // Display Columns

stripeRows:true, // Zebra Effect

// EnableColumnMove: false, // do not drag and drop Columns

// EnableColumnResize: false, // you cannot change the column width.

loadMask:true // Display the mask and prompt function, that is, load Loading ......

// ForceFit: true // automatically fills the table

});

Note: {checkOnly: true} will solve the problem that accidentally selecting a row in the operation will become a selected row. Only the check box can be used to select a row.
The complete sample code is provided below, and the Code also describes Ext. grid. GridView. Let's take a look.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Hello Extjs4.2 title>

<link href="../ExtJS4.2/resources/css/ext-all-neptune.css" rel="stylesheet">

<script src="../ExtJS4.2/ext-all.js"> script>

<script src="../ExtJS4.2/locale/ext-lang-zh_CN.js"> script>

<script type="text/javascript">

// Table data contains at least three items: column, data, and original data conversion.

Ext.onReady(function(){

// Define Columns

var columns = [

{Header: 'number', dataIndex: 'id', width: 50}, // sortable: true

{Header: 'name', dataIndex: 'name', width: 80 },

{Header: 'description', dataIndex: 'desc', width: 112 },

{Header: 'status', dataIndex: 'status', width: 80, renderer: function (value ){

If (value = 'available '){

return "<span style='color:green;font-weight:bold';> Available span><img src=\'#\'" /right.gif' />";

} else {

return "<span style='color:red;font-weight:bold';> Disable span><img src=\'#\'" /wrong.gif' />";

}

}}

];

// Define data

var data =[

['1', 'wang ', 'description 01', 'available'],

['2', 'lily', 'description 02', 'deactivated '],

['3', 'zhang san', 'description 03', 'available'],

['4', 'yangyangyangyang ', 'thinker diary net', 'available'],

['5', 'high', 'description' 05 ', 'deactivated']

];

// Convert the original data to the data that can be displayed by EXT

var store = new Ext.data.ArrayStore({

data:data,

fields:[

{Name: 'id'}, // mapping: 0 can specify the position where the column is displayed. 0 represents the 1st column. You can set the position where the column is displayed at will.

{name:'name'},

{name:'descn'},

{name:'status'}

]

});

// Load data

store.load();

// The table control uses RowModel by default. You can select multiple rows by pressing shift or ctrl. to select only one row, use singleSelect: true.

// I found that when I was writing it, I tried it and found that it was optional by default.

//var sm = new Ext.grid.RowModel({singleSelect:true});

// Create a table

var grid = new Ext.grid.GridPanel({

RenderTo: 'grid', // rendering position

width:450,

height:150,

//selModel:sm,

Store: store, // converted data

Columns: columns, // display columns

StripeRows: true, // zebra Effect

// EnableColumnMove: false, // do not drag and drop Columns

// EnableColumnResize: false, // you cannot change the column width.

LoadMask: true, // display the mask and prompt function, that is, load Loading ......

// ForceFit: true // automatically fills the table

viewConfig:{

ColumnsText: 'column displayed ',

Scroloffset: 30, // The width reserved for the scroll bar on the right of the table. The default value is 20.

SortAscText: 'position ',

SortDescText: 'reverse order ',

ForceFit: true // The table will automatically extend the length of each column to fill the entire table with content

}

});

});

script>

head>

<body>

<h1> My ExtJS4.2 learning path h1>

<hr />

Author: Shu yangyang

Start Date: November 10, 2013 22:34:26

<h2> Go to ExtJS's table view-Ext. grid. GridView h2>

<p id="grid"> p>

body>

html>



Thinker diary Network

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.