直接上源代碼：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'index1.jsp' starting page</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<!-- <link rel="stylesheet" type="text/css" href="js/ext6.2/theme-crisp/resources/theme-crisp-all_1.css" /> -->
<!-- <link rel="stylesheet" type="text/css" href="js/ext6.2/theme-crisp/resources/theme-crisp-all_2.css" /> -->
<link rel="stylesheet" type="text/css" href="js/ext6.2/theme-crisp/resources/theme-crisp-all-debug_1.css" />
<link rel="stylesheet" type="text/css" href="js/ext6.2/theme-crisp/resources/theme-crisp-all-debug_2.css" />
<script type="text/javascript" charset="UTF-8" src="js/ext6.2/ext-all.js"></script>
<script type="text/javascript" charset="UTF-8" src="js/ext6.2/ext-all-debug.js"></script>
<script type="text/javascript" charset="UTF-8" src="js/ext6.2/ext-bootstrap.js"></script>
<script type="text/javascript" charset="UTF-8" src="js/ext6.2/locale-zh_CN.js"></script>
<script type="text/javascript">
Ext.onReady(function () {
//1.定義Model
Ext.define("MyApp.model.User", {
extend: "Ext.data.Model",
fields: [
{ name: 'name', type: 'string' },
{ name: 'age', type: 'int' },
{ name: 'phone', type: 'string' }
]
});
//2.創建store
var store = Ext.create("Ext.data.Store", {
model: "MyApp.model.User",
data: [
{ name: "Tom", age: 5, phone: "123456" },
{ name: "Jerry", age: 3, phone: "654321" }
]
});
//3.創建grid
var viewport = Ext.create("Ext.container.Viewport", {
layout: "fit",
items: {
xtype: "grid",
model: "MyApp.model.User",
store: store,
columns: [
{ text: '姓名', dataIndex: 'name' },
{ text: '年齡', dataIndex: 'age', xtype: 'numbercolumn', format: '0' },
{ text: '電話', dataIndex: 'phone' }
]
}
});
//4.添加雙擊編輯
var grid = viewport.down("grid");
grid.on("itemdblclick", function (me, record, item, index, e, eopts) {
//5.創建編輯表單
var win = Ext.create("Ext.window.Window", {
title: "編輯用戶",
width: 300,
height: 200,
layout: "fit",
items: {
xtype: "form",
margin: 5,
border: false,
fieldDefaults: {
labelAlign: 'left',
labelWidth: 60
},
items: [
{ xtype: "textfield", name: "name", fieldLabel: "姓名" },
{ xtype: "numberfield", name: "age", fieldLabel: "年齡" },
{ xtype: "textfield", name: "phone", fieldLabel: "電話" }
]
},
buttons: [
{
text: "保存", handler: function () {
win.down("form").updateRecord();
record.commit();
win.close();
}
}
]
});
win.down("form").loadRecord(record);
win.show();
});
});
</script>
</head>
<body>
</body>
</html>
