extjs6.2整合到Myeclipse项目

zhu_9527

于 2019-10-06 22:33:18 发布

阅读量2.4k

点赞数

分类专栏：有关编程方面的 J2EE 文章标签： extjs

本文链接：https://blog.csdn.net/zhu_9527/article/details/102258282

版权

有关编程方面的同时被 2 个专栏收录

20 篇文章 0 订阅

订阅专栏

J2EE

3 篇文章 0 订阅

订阅专栏

直接上源代码：

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

zhu_9527

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
extjs6.2整合到Myeclipse项目

直接上源代码：<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+"...
复制链接

扫一扫