ExtJs教程----Ext.data.Model的Ajax

最新推荐文章于 2021-08-05 23:45:27 发布

呼噜噜哟

最新推荐文章于 2021-08-05 23:45:27 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

分类专栏：【002】ExtJS基础

本文链接：https://blog.youkuaiyun.com/u011176794/article/details/52635244

【002】ExtJS基础专栏收录该内容

13 篇文章

订阅专栏

本文介绍如何使用ExtJS 5框架定义模型、处理表单数据并调用服务器端API保存及读取学生信息。具体步骤包括定义模型、获取表单数据、设置模型值及调用保存方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.定义Model

Ext.define('ExtJs5Example.model.Student', {
    extend: 'Ext.data.Model',
    alias: 'widget.Student',
    fields: [
        { name: 'StudentID', type: 'string' },
        { name: 'Name', type: 'string' },
        { name: 'Age', type: 'string' }
    ],
    proxy: {
        type: 'ajax',
        api: {
            create: '/Home/SaveSudentInfo',//当调用Model.save()方法时会调用这个方法
            read: '/Home/GetStudentInfo'//<span><span class="comment">//在调用Model的静态方法load时，会默认去这里查数据</span><span>  </span></span>
        },
        reader: {
            type: 'json',
            successProperty: 'success',
            rootProperty: 'data',
            totalProperty: 'total',
            messageProperty: 'message'
        },
        listeners: {
            exception: function (proxy, response, operation) {
                Ext.MessageBox.show({
                    title: 'REMOTE EXCEPTION',
                    msg: operation.getError(),
                    icon: Ext.MessageBox.ERROR,
                    buttons: Ext.Msg.OK
                });
            }
        }
    }

});

2.获取form的数据，给Model赋值，调用model的save 方法

  //获取itemId为StudentInfo的form中所有的数据
  var values = Ext.ComponentQuery.query("StudentInfo")[0].getValues();
  //定义model对象
  var record = Ext.create('ExtJs5Example.model.Student', {});
  //将从form中获取的值赋到model对象中
  record.set(values);
  //调用model对象的save方法
  record.save({
                success: function (form, operation) {
                    Ext.MessageBox.show({
                        title: '提示',
                        msg: operation._resultSet.message,
                        icon: Ext.MessageBox.OK,
                        buttons: Ext.Msg.OK
                    });

                },
                failure: function (form, operation) {
                    Ext.Msg.alert('提示', operation._error);
                }
   });