简单：

<!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. 【bzoj2038】[2009国家集训队]小Z的袜子(hose)（细致总结）

    [bzoj2038][2009国家集训队]小Z的袜子(hose)(细致总结) Description 作为一个生活散漫的人,小Z每天早上都要耗费很久从一堆五颜六色的袜子中找出一双来穿.终于有一天,小Z ...

  2. 2017 Multi-University Training Contest - Team 2 &hdu 6055 Regular polygon

    Regular polygon Time Limit: 3000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others)T ...

  3. hdu 1035（DFS)

    Robot Motion Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Tota ...

  4. bzoj 1556 墓地秘密 —— 状压DP

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=1556 预处理出两个障碍四个方向之间的距离(转弯次数),就可以状压DP了: 但预处理很麻烦.. ...

  5. 95.Extjs 表单中自定义的验证规则 VTypes

    1 Ext.onReady(function(){ Ext.QuickTips.init(); //重写 (自定义)xtype Ext.apply(Ext.form.VTypes,{ repetiti ...

  6. tp3.2 复合查询or

    tp3.2 复合查询or $where['goods_name'] = array("like","%$q%");$where['goods_sn'] = ar ...

  7. SQLyog 快捷方式

    连接Ctrl+M 创建新连接Ctrl+N 以当前连接属性创建新连接Ctrl+F4/Ctrl+W 断开当前连接Ctrl+Tab 切换到下一个连接Ctrl+Shift+Tab 切换到上一个连接Ctrl+1 ...

  8. 生成器模式(Builder)C++实现

    意图:将一个复杂对象的创建与它的表示分离,使得同样的构建过程可以创建不同的表示. 适用性:1.当创建复杂对象的算法应该独立于该对象的组成部分以及它们的装配方式时. 2.当构建过程必须允许被构建的对象有 ...

  9. ListView使用、ListView优化和遇到的问题

    1.先写遇到的问题: a.ListView只显示一个item. listview只显示一个item,并且做了listview的点击事件监听打印 Bean 对象的属性和哈希值,发现只有显示的那个 Bea ...

  10. 【PostgreSQL-9.6.3】如何实现非自动提交

    我们在使用psql工具操作数据库时,事务是自动提交的.也就是说,当我们执行完一条insert或者delete语句后,在不输入commit情况下,这条语句也是提交的.如果不想自动提交,可以使用以下两种方 ...