ExtJS6.2 Hello MVC 实例 web开发

最新推荐文章于 2019-07-02 10:21:00 发布

魅影奇侠

最新推荐文章于 2019-07-02 10:21:00 发布

阅读量4k

点赞数 5

分类专栏： js

本文链接：https://blog.csdn.net/longxu0872/article/details/70242324

版权

js 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

最近想要学习extjs 6.2，坑了很久，终于撸出来了

代码

<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE>HelloWorld</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.css" />
<link rel="stylesheet" type="text/css"
href="js/ext6.2/theme-crisp/resources/theme-crisp-all-debug.css" />
<script type="text/javascript" src="js/ext6.2/ext-all.js"></script>
<script type="text/javascript" src="js/ext6.2/ext-all-debug.js"></script>
<script type="text/javascript" src="js/ext6.2/ext-bootstrap.js"></script>
<script type="text/javascript" src="js/ext6.2/ext-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>

魅影奇侠

关注

5
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
ExtJS6.2 Hello MVC 实例 web开发

最近想要学习extjs 6.2，坑了很久，终于撸出来了代码HelloWorldhref="js/ext6.2/theme-crisp/resources/theme-crisp-all.css" />href="js/ext6.2/theme-crisp/resources/theme-crisp-all-debug.css" />E
复制链接

扫一扫

专栏目录