简单：

<!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. C# Socket 您的主机中的软件中止了一个已建立的连接 An established connection was aborted by the software in your host machine

    http://tieba.baidu.com/p/3223234493 问题: 服务端在接收客户端数据的时候,抛了个异常出来:System.Net.Sockets.SocketException: 您 ...

  2. hdu 1698（线段树区间更新）

    Just a Hook Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total ...

  3. nodejs--Nodejs单元测试小结

    前言 最近在写一课程的Project,用Node写了一个实时聊天小应用,其中就用到了单元测试.在写Node单元测试的时候,一方面感受到了单元测试的重要性,另一方面感受到了Node单元测试的不够成熟,尚 ...

  4. GROUPPING和ROLLUP的基本知识

    1.GROUPPING 是一个聚合函数,它产生一个附加的列,当用 CUBE 或 ROLLUP 运算符添加行时,附加的列输出值为1,当所添加的行不是由 CUBE 或 ROLLUP 产生时,附加列值为0. ...

  5. Python 32 通信循环 连接循环 粘包问题

    一:通信循环 二:连接循环 三:粘包问题

  6. EasyUI TreeGrid 悬浮效果

    /* 鼠标悬停扩展*/ (function (hasgrid) { if (hasgrid) { /** * 表格提示 */ $.extend($.fn.datagrid.methods, { too ...

  7. Python描述符：property()函数的小秘密

    描述符:将某种特殊类型的类的实例指派给另一个类的属性(注意:这里是类属性,而不是对象属性).而这种特殊类型的类就是实现了__get__,__set__,__delete__这三个方法中的一个或多个的新 ...

  8. POJ 3253 STL优先队列

    题目大意:FJ需要修补牧场的围栏,他需要 N 块长度为 Li 的木头(N planks of woods).开始时,FJ只有一块无限长的木板,因此他需要把无限长的木板锯成 N 块长度 为 Li 的木板 ...

  9. Spark Streaming基础概念

    为了更好地理解Spark Streaming 子框架的处理机制,必须得要自己弄清楚这些最基本概念. 1.离散流(Discretized Stream,DStream):这是Spark Streamin ...

  10. rabbit channel参数

    channel.exchangeDeclare() channel.ExchangeDeclare(string exchange: "cjlTest",string  type: ...