<%@ 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 >
|