ExtJs之Ajax模式的表单数据加载

简介:

简单:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
<! DOCTYPE html>
< html >
< head >
     < title >ExtJs</ title >
         < meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
     < link rel="stylesheet" type="text/css" href="ExtJs/packages/ext-theme-crisp/build/resources/ext-theme-crisp-all.css">
         < script type="text/javascript" src="ExtJs/ext-all.js"></ script >
         < script type="text/javascript" src="ExtJs/bootstrap.js"></ script >
         < script type="text/javascript" src="ExtJs/packages/ext-theme-crisp/build/ext-theme-crisp.js"></ script >
 
     < script type="text/javascript">
             Ext.onReady(function(){
         Ext.QuickTips.init();
 
         var productForm = Ext.create('Ext.form.Panel', {
           title: 'Sample',
           frame: true,
           height: 300,
           width: 600,
           renderTo: Ext.getBody(),
           bodyPadding: 5,
           fieldDefaults: {
             labelSeparator: ': ',
             labelWidth: 100,
             width: 400,
             labelAlign: 'left'
           },
           items: [{
             fieldLabel: '产品名称',
             xtype: 'textfield',
             name: 'productName',
             value: 'U盘'
           },{
             fieldLabel: '金额',
             xtype: 'numberfield',
             name: 'price',
             value: '100'
           },{
             fieldLabel: '生产日期',
             xtype: 'datefield',
             format: 'Ymd',
             name: 'date',
             value: new Date()
           },{
             xtype: 'hidden',
             name: 'productId',
             value: '001'
           },{
             fieldLabel: '产品简介',
             name: 'introduction',
             xtype: 'textarea'
           }],
           buttons: [{
             text: '加载简介',
             handler: loadIntroduction
           }]
         });
         function loadIntroduction(){
           var params = productForm.getForm().getValues();
           productForm.getForm().load({
             params: params,
             url: 'source.html',
             method: 'GET',
             success: function(form, action){
               Ext.Msg.alert('notice', '产品简介加载成功');
             },
             failure: function(form, action){
               Ext.Msg.alert('error', 'load failure');
             }
           });
         }
       });
     </ script >
</ head >
< body >
< div id='tpl-table1'></ div >
< br >
< div id='tpl-table2'></ div >
</ body >
</ html >

  source.html

?
1
{success: true, data: {introduction: '本产品美观实用,售后服务优秀'}}

  

目录
相关文章
|
6月前
|
存储 前端开发 JavaScript
HTTP进阶,Cookie,响应的回报结果含义,ajax,form表单,不同状态码代表的结果
HTTP进阶,Cookie,响应的回报结果含义,ajax,form表单,不同状态码代表的结果
HTTP进阶,Cookie,响应的回报结果含义,ajax,form表单,不同状态码代表的结果
|
10月前
|
JavaScript 前端开发
Form表单利用Jquery Validate验证以及ajax提交
Form表单利用Jquery Validate验证以及ajax提交
50 0
|
12月前
|
JSON 前端开发 数据格式
SpringMVC学习笔记(获取参数,传递参数——关于前后端传参交互的总结、from表单、Ajax数据提交))(下)
SpringMVC学习笔记(获取参数,传递参数——关于前后端传参交互的总结、from表单、Ajax数据提交))(下)
|
12月前
|
前端开发 Java API
SpringMVC学习笔记(获取参数,传递参数——关于前后端传参交互的总结、from表单、Ajax数据提交))(上)
SpringMVC学习笔记(获取参数,传递参数——关于前后端传参交互的总结、from表单、Ajax数据提交))(上)
135 0
|
SQL 前端开发 数据库
Yii2.0的模型表单、活动表单和AJAX表单是干什么的?底层原理是什么?
Yii2.0的模型表单、活动表单和AJAX表单是干什么的?底层原理是什么?
|
数据采集 SQL 前端开发
【jquery Ajax 】form表单教学+评论案例
【jquery Ajax 】form表单教学+评论案例
120 0
【jquery Ajax 】form表单教学+评论案例
|
前端开发
pbootcms使用Ajax无刷新提交留言及表单
pbootcms使用Ajax无刷新提交留言及表单
418 0
|
JSON 前端开发 API
pbootcms使用Ajax无刷新提交留言及表单
pbootcms使用Ajax无刷新提交留言及表单
301 0
|
JavaScript 前端开发 PHP
jquery $.post 序列化表单ajax提交
jquery $.post 序列化表单ajax提交
95 0
|
JavaScript 前端开发 Python
Django中ajax技术和form表单两种方式向后端提交文件
一、Form表单方式提交: form表单提交文件或者图像时需要对form中的属性进行如下设置: 1、method="post" //提交方式 post 2、enctype="multipart/form-data" //不对字符编码。
1898 0