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

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