简单：

<!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

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

　　

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

  1. 工厂模式模拟Spring的bean加载过程

    一.前言    在日常的开发过程,经常使用或碰到的设计模式有代理.工厂.单例.反射模式等等.下面就对工厂模式模拟spring的bean加载过程进行解析,如果对工厂模式不熟悉的,具体可以先去学习一下工厂 ...

  2. Activity的生命周期与加载模式——Activity的4种加载模式

    配置Activity时可指定android:launchMode属性,该属性用于配置该Activity的加载模式,该属性支持如下4个属性值. standard:标准模式,这是默认的加载模式. sing ...

  3. PHP+Jquery+Ajax 实现动态生成GUID、加载GUID

    GUID: 全局唯一标识符(GUID,Globally Unique Identifier)是一种由算法生成的二进制长度为128位的数字标识符.GUID主要用于在拥有多个节点.多台计算机的网络或系统中 ...

  4. ajax二次封装之异步加载

    ajax二次封装之异步加载 ajax异步加载会导致在数据未加载回来就读取数据,然后出现数据为空的报错.在ajax封装时,将ajax直接改为同步,虽然可以解决报错,但是会导致页面渲染被阻塞,接口反应时间 ...

  5. django（7）modelform操作及验证、ajax操作普通表单数据提交、文件上传、富文本框基本使用

    一.modelForm操作及验证 1.获取数据库数据,界面展示数据并且获取前端提交的数据,并动态显示select框中的数据 views.py from django.shortcuts import ...

  6. jquery ajax异步提交表单数据的方法

    使用jquery的ajax方法可以异步提交表单,成功后后台返回json数据,回调函数处理,可以不用刷新页面,达到异步的目的: 处理表单的数据可以用serialize()方法进行序列化,而如果提交的数据 ...

  7. 使用ajax异步提交表单数据（史上最完整的版本）

    额 为啥用这个 不用form呢,因为这个效率高,而且在浏览器中运行程序的时候如果出现bug的话,页面不会显示显示错误信息,提高了用户的体验度. 那么,就来看看把,先给数据库表截个图哈 然后写项目被 我 ...

  8. ExtJS入门教程05，grid的异步加载数据

    上一篇演示了extjs grid的基本用法,并加载了本地数据.今天我们将演示如何加载异步数据. 所谓异步,就是通过ajax的方式将服务器端的数据加载到我们的grid中.为了提供数据,我们先定义一个数据 ...

  9. 移动端-jquery Ajax执行滑动到底部进行加载 指定加载次数

    过完年了,又要有新的项目了,趁暴风雨前的宁静,就把之前让我挺头疼的ajax加载给总结了一下.在此分享. 声明下:笔者对于ajax也是新手,如有更好的写法或可以优化的写法,还望指正! 项目需求: 移动端 ...

随机推荐

  1. SQL Server 2005数据库定期备份（非常详细）与 SQL Server 2005数据库备份定期清理

     SQL Server 2005数据库定期备份 分类: SQL Server 20052011-01-06 16:25 3320人阅读 评论(1) 收藏 举报 sql server数据库sqlserv ...

  2. DCloud-MUI：AJAX

    ylbtech-DCloud-MUI:AJAX 1.返回顶部 1.   2. 2.返回顶部   3.返回顶部   4.返回顶部   5.返回顶部 1. http://dev.dcloud.net.cn ...

  3. Spell checker（串）

    http://poj.org/problem?id=1035 题意:给定一个单词判断其是否在字典中,若存在输出"%s is correct",否则判断该单词删掉一个字母,或增加一个 ...

  4. lodop多打印一页白纸

    [错误还原]Lodop多张空白页测试2 [错误还原]Lodop多出空白页测试 http://blog.sina.com.cn/s/blog_157ebf1370102wta1.html 上面这个链接是 ...

  5. springboot配置过滤器和拦截器

    import javax.servlet.*; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.Http ...

  6. POJ 2186 Tarjan

    题意:有n(n<=10000)头牛,每头牛都想成为最受欢迎的牛,给出m(m<=50000)个关系,如(1,2)代表1欢迎2,关系可以传递,但是不是相互的,那么就是说1欢迎2不代表2欢迎1, ...

  7. 编写linux 命令行实用工具 shell命令

    今天我想以带着问题的方法学习新的技术. 问题1: 编写一个命令 语法: command  options  path  expressions

  8. ie8及其以下版本兼容性问题之placeholder实现

    1. 普通浏览器下修改placeholder颜色 因为每个浏览器的CSS选择器都有所差异,所以需要针对每个浏览器做单独的设定. 示例: input::-webkit-input-placeholder ...

  9. DOM高级编程

    前言:W3C规定的三类DOM标准接口(换图)Core DOM(核心DOM),适用于各种结构化文档:XML DOM(Java OOP学过),专用于XML文档:HTML DOM,专用于HTML文档,下面了 ...

  10. ASP.net获取当前url各种属性(文件名、参数、域名等)的方法

    假设当前页完整地址是:http://www.test.com/aaa/bbb.aspx?id=5&name=kelli "http://"是协议名 "www.te ...