/ / Create edgrid.js
Ext.onReady (function () (
Ext.QuickTips.init ();

/ / Format date
function formatDate (value) (
return value? value.dateFormat ( 'Y, M d'):'';
)
/ / Format sex show, this is a renderer, renderer
function formatSex (value) (
return value? "man": "female";
)
/ / Alias弄个abbreviations
var fm = Ext.form;

/ / Column model definition of the table all the columns of information,
/ / DataIndex column will be mapped to a particular data source (Data Store) the data in the column (behind the creation of)
var cm = new Ext.grid.ColumnModel ([
(
id: 'id',
header: "ID",
dataIndex: 'id',
width: 50
),
(
id: 'name',
header: "User Name",
dataIndex: 'name',
width: 250,
editor: new fm.TextField ((
allowBlank: false / / should not be empty
))
),
(
header: "Area",
dataIndex: 'area',
width: 100,
editor: new Ext.form.ComboBox ((
typeAhead: true,
triggerAction: 'all',
transform: 'area', / / select the corresponding box ID
lazyRender: true,
listClass: 'x-combo-list-small'
))
),
(
header: "email",
dataIndex: 'email',
width: 220,
align: 'left',
editor: new fm.TextField ((
allowBlank: true
))
),
(
header: "age",
dataIndex: 'age',
width: 70,
align: 'right',
editor: new fm.NumberField ((
allowBlank: true,
allowNegative: false,
maxValue: 100
))
),
(
header: "birthday",
dataIndex: 'birthDay',
width: 95,
renderer: formatDate,
editor: new fm.DateField ((
format: 'y / m / d',
minValue:'1970 / 01/01 ', / / minimum value
disabledDays: [0, 6], / / select the date of the prohibition
disabledDaysText: 'Children are not allowed over the weekend of birth'
))
),
(
header: "gender",
dataIndex: 'sex',
width: 95,
renderer: formatSex,
editor: new fm.Checkbox ()
)
]);

/ / By default the following are sortable
cm.defaultSortable = true;

/ / Define a user object, making it easier for us to add dynamic records, although it can be configured to anonymous built-in objects
var User = Ext.data.Record.create ([
/ / Below the "name" matches the name tag read, except "birthDay", it has been mapped to the tag "birth"
(name: 'id', type: 'int'),
(name: 'name', type: 'string'),
(name: 'area'),
(name: 'email', type: 'string'),
(name: 'age', type: 'int'), / / automatic date conversions
(name: 'birthDay', mapping: 'birth', type: 'date', dateFormat: 'Y / m / d'),
(name: 'sex', type: 'bool')
]);

/ / Create Data Store
var store = new Ext.data.Store ((
/ / Use HTTP to load
url: 'users.xml',

/ / Return value because it is XML, so we create a parser
reader: new Ext.data.XmlReader ((
/ / Record must contain a "user" tags
record: 'user'
), User),

sortInfo: (field: 'name', direction: 'ASC') / / sort information
));

/ / Create a table editor
var grid = new Ext.grid.EditorGridPanel ((
store: store,
cm: cm,
renderTo: 'editor-grid',
width: 800,
height: 300,
autoExpandColumn: 'name',
title: 'function of management', / / title
frame: true,
clicksToEdit: 1, / / set only a few clicks Edit
selModel: new Ext.grid.RowSelectionModel ((singleSelect: false }),// setting single select mode, otherwise will not be able to delete data

/ / Toolbar buttons at the top
tbar: [
(
text: 'add',
iconCls: 'xz', / / button icon CSS name
handler: function (){// click the button to perform
var n = grid.getStore (). getCount ();// get the head office number
var p = new User ((
id: n + 1,
name: 'new data' + n,
area:'',
email: 'Benson@163.com',
age: 20,
birthDay: (new Date ()). clearTime (),
sex: true
));
Edit grid.stopEditing ();// stop
store.insert (n, p); / / inserted into the last line of
grid.startEditing (n, 1); / / start editing one cell
)
),
(
text: 'delete',
iconCls: 'sc01',
handler: function () (

/ / var record = grid.getSelectionModel (). getSelected ();// return value for Record Type
var rows = grid.getSelectionModel (). getSelections ();// return value is an array of Record
if (rows.length == 0) (
Ext.MessageBox.alert ( 'warning', 'at least a selection of information, delete!');
) else (
Ext.MessageBox.confirm ( 'prompt box', 'Are you sure you want to carry out the operation?', Function (btn) (
if (btn == 'yes') (
if (rows) (
for (var i = 0; i <rows.length; i + +) (
/ / alert (rows [i]. get ( "id"));
store.remove (rows [i]);
/ / store.removeAll (); / / delete all the data

)
this.getEl (). dom.action = '. / formservlet? operator = save';
this.getEl (). dom.submit ();
)
)
));
) / / Pop-up dialog box warning
)
),
(
text: 'Save',
iconCls: 'bc',
handler: function () (
var recordtoedit = grid.getSelectionModel (). getSelected ();// return value for Record Type
if (recordtoedit) (
Ext.Msg.alert ( 'View selection', "Do you now select users for its first name:" + recordtoedit.get ( "name "));// get user name
/ / Alert ( "You can now select the user whose name is:" + recordtoedit.get ( "name"));
)
)
),
(
text: 'query',
iconCls: 'cx',
handler: function () (

)
)
]
));

/ / Edit the cell after treatment case
grid.on ( "afteredit", afterEdit, grid);
/ / Event handler
function afterEdit (e) (
var record = e.record; / / by the Edit Record
/ / Wait for the dialog box shows
Ext.Msg.wait ( "Please wait", "modification", "operation in progress ...");

/ / Update interface, to really delete data
Ext.Msg.alert ( 'Successful modify your user information', "users are being modified:" + e.record.get ( "name"). Value + "\ n modified field are:"
+ E.field); / / get user name
);

/ / Trigger the data load
store.load ();
));

/ / Create edgrid.jsp

<% @ page contentType = "text; html; charset = GBK"%>
<% @ page import = "com.luke.hm.tree.EJBContext"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB2312">
Example table <title> Editor </ title>

<link rel = "stylesheet" type = "text / css" href ="<%= EJBContext.getRootPath ()%>/ ext / resources / css / ext-all.css "/>

<! - The icon CSS style information ->

<link rel = "stylesheet" type = "text / css" href ="<%= EJBContext.getRootPath ()%>/ menujscss / edgrid.css "/>

<! - GC ->
<! - LIBS ->
<script type = "text / javascript" src ="<%= EJBContext.getRootPath ()%>/ ext / adapter / ext / ext-base.js "> </ script>
<! - ENDLIBS ->

<script type = "text / javascript" src ="<%= EJBContext.getRootPath ()%>/ ext / ext-all.js "> </ script>
<! - English prompt information support ->
<script type = "text / javascript" src ="<%= EJBContext.getRootPath ()%>/ ext / source / locale / ext-lang-zh_CN.js "> </ script>

<! - On this page function code ->
<script type="text/javascript" src="edgrid.js"> </ script>
<! - DWR JavaScript library ->
<! - script type = 'text / javascript' src = '/ dwrtest / dwr / interface / JUserManager.js'> </ script ->
<! - script type = 'text / javascript' src = '/ dwrtest / dwr / engine.js'> </ script ->

</ head>
<body>

<h1>
<select name="area">
<option value="历城区"> City Calendar </ option>
<option value="历下区"> zone calendar </ option>
<option value="槐荫区">槐荫Area </ option>
</ select>

<! - Place Edit control DIV ->
</ h1>
<div> </ div>

</ body>
</ html>

/ / Create users.xml
<? xml version = "1.0" encoding = "GBK"?>
<users>
<user>
<id> 1 </ id>
<name> XXX1 </ name>
<area> XXX2 </ area>
<email> XXX1@126.com </ email>
<age> 88 </ age>
<sex> true </ sex>
<birth> 1980/01/01 </ birth>
</ user>
<user>
<id> 2 </ id>
<name> Benson </ name>
<area> Jinan, Shandong </ area>
<email> Benson@163.com </ email>
<age> 27 </ age>
<sex> true </ sex>
<birth> 1982/12/12 </ birth>
</ user>
<user>
<id> 3 </ id>
<name> Benson_GG </ name>
<area> Lixia Jinan </ area>
<email> aa@bb.com </ email>
<age> 28 </ age>
<sex> false </ sex>
<birth> 1982/12/11 </ birth>
</ user>

</ users>

/ / Create edgrid.css
/ ** Definition of a number of toolbar buttons of the CSS style * /
. xz (
background-image: url (. / xz.gif)! important;
)

. sc01 (
background-image: url (. / sc.gif)! important;
)

. sc02 (
background-image: url (. / sc.gif)! important;
)

. cx (
background-image: url (. / cx.gif)! important;
)

. bc (
background-image: url (. / bc.gif)! important;
)