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: '本产品美观实用,售后服务优秀'}}

  

时间: 2024-08-01 20:39:43

ExtJs之Ajax模式的表单数据加载的相关文章

RoR + ExtJS 如何实现表单数据加载和提交?

问题描述 使用RoR + ExtJS.ExtJS生成一个FormPanel,一个文本框和提交按钮,文本框数据自动从RoR的controller加载,提交表单到controller的一个action.请问如何实现?另外,是否用到了json?RoR如何返回json给ExtJS? 问题补充:lizhi92574 写道 解决方案 var form= new Ext.form.FormPanel({reader : new Ext.data.JsonReader({}) //只定数据解析器 对应表单元素n

Yii2基于Ajax自动获取表单数据的方法

本文实例讲述了Yii2基于Ajax自动获取表单数据的方法.分享给大家供大家参考,具体如下: 这里有两张表,表结构如下,locations表存放的省份和邮编等信息,两张表的model和curd均使用gii生成 yii2advanced.customers表 customer_id:int(11) customer_name:varchar(100) zip_code:varchar(20) city:varchar(100) province:varchar(100) yii2advanced.l

trigger-关于jqGrid 表单重新加载的问题

问题描述 关于jqGrid 表单重新加载的问题 最近在使用JqGrid 的时候 有一个问题部是很明白 在表单第一次加载的时候要求只显示表头.不显示数据,所以我在第一次加载的时候没有给url: //加载页面时,同时加载表头 $(document).ready(function() { pageSetUp(); jQuery("#jqgrid").jqGrid({ url : ' ', datatype : "json", height : 'auto', colNam

利用CSS、JavaScript及Ajax实现高效的图片预加载_javascript技巧

方法一:用CSS和JavaScript实现预加载 实现预加载图片有很多方法,包括使用CSS.JavaScript及两者的各种组合.这些技术可根据不同设计场景设计出相应的解决方案,十分高效. 单纯使用CSS,可容易.高效地预加载图片,代码如下: 复制代码 代码如下: #preload-01 { background: url(yun_qi_img/image-01.png) no-repeat -9999px -9999px; } #preload-02 { background: url(yun

ServiceLoader服务提供者模式,实现动态插件加载,类责任链模式

Edit ServiceLoader服务提供者模式,实现动态插件加载,类责任链模式 ServiceLoader的功能比ClassLoader简单,它可以帮我们获取所有实现了某接口或基类的类.当然前提是ClassLoader已经加载过的类.举个例子: 定义一个接口: public interface IService { public String sayHello(); public String getScheme(); } 以及两个实现类: public class HDFSService

DataTables+BootStrap组合使用Ajax来获取数据并且动态加载dom的方法(排序,过滤,分页等)_jquery

Datatables是一款jquery表格插件.它是一个高度灵活的工具,可以将任何HTML表格添加高级的交互功能. 主要功能 分页,即时搜索和排序 几乎支持任何数据源:DOM, javascript, Ajax 和 服务器处理 支持不同主题 DataTables, jQuery UI, Bootstrap, Foundation 各式各样的扩展: Editor, TableTools, FixedColumns -- 丰富多样的option和强大的API 支持国际化 超过2900+个单元测试 免

怎么用ajax和asp.net做显示加载效果

问题描述 怎么用ajax和asp.net做显示加载效果:当我们把数据库的文件提出来的时候,还没有加载完,就显示正在加载,加载完后就用Repeater数据控件绑定数据! 解决方案 解决方案二:我用settimeout()就能实现,而且它能捕获状态解决方案三:请问有ajax和.net一起实现的吗??解决方案四:UpdateProgress就可以了,很方便的,需要装asp.netajax的扩展包,http://www.asp.net/ajax/下载,绝对可以实现,而且很cool的解决方案五:就是用aj

用jQuery的AJax实现异步访问、异步加载_jquery

本篇文章实现了用jQuery的AJax实现异步访问和异步加载,具有一定的参考价值,感兴趣的小伙伴们可以参考一下. [异步访问] 用一个例子用以说明:点击按钮,将input内用户输入的数据发送给服务端,并将结果返回给页面. 首先是html承载内容: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>AJax异步访问<

ExtJS入门教程05,grid的异步加载数据

上一篇演示了extjs grid的基本用法,并加载了本地数据.今天我们将演示如何加载异步数据. 所谓异步,就是通过ajax的方式将服务器端的数据加载到我们的grid中.为了提供数据,我们先定义一个数据类,并创建一些临时数据. public class UserEntity { public string ID { get; set; } public string Name { get; set; } public int Age { get; set; } public static List