简单：

<!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#如何读写和创建INI文件（经典）转

    C#如何读写和创建INI文件 分类: c#程序设计2011-11-27 20:42 4935人阅读 评论(2) 收藏 举报 inic#stringbuffernullfile 在做项目过程中,有时需要 ...

  2. KMP字符匹配算法

    上个假期就学了KMP,但是基本不用,所以忘干净了...这个的核心思想就是next数组,next数组学名叫最长相同前缀后缀.还不错的算法,KMP 匹配的过程中比原来的暴力匹配多了一个跳来跳去的next. ...

  3. bzoj 1026 [ SCOI2009 ] windy数 —— 数位DP

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=1026 蛮简单的数位DP,预处理 f[i][j] 表示 i 位数,以 j 开头的 windy ...

  4. Wall(凸包)

    http://poj.org/problem?id=1113 题意:给出一些点的坐标,和一个半径r,求出这些点围成的凸包的周长再加上一个半径为r的圆的周长. #include <stdio.h& ...

  5. Vue发布过程中遇到坑，以及webpack打包优化

    前言 这段时间,本人自己做了一个vue画面部署到自己的服务器上,发现运行速度慢的的惊人,虽然服务器很渣(本人没什么钱,只能租最差的服务器,主要是给自己学习用的),但是这样开发出来的网站简直不能用,所以 ...

  6. C#之纯数字判断

    public bool isNaN(string temp) { ; i <temp.Length; i++) { byte tempByte = Convert.ToByte(temp[i]) ...

  7. .net中实现aspnetpager分页

    第一步首先导入aspnetpager控件,然后再把他从工具箱中拖出,代码如下:  <webdiyer:AspNetPager ID="aspnetpager1" runat= ...

  8. CSS自定义消息提示

    1.效果 2.源码 <%@ page contentType="text/html;charset=UTF-8" language="java" %> ...

  9. java编程基础篇-------> 从键盘输入一位整数，代表月份，编程判断指定月份属于一年中的哪个季度。如果是 12 月、1 月、2 月，就属于冬季。

    从键盘输入一位整数,代表月份,编程判断指定月份属于一年中的哪个季度.如果是 12月.1 月.2 月,就属于冬季:如果是 3 月.4 月.5 月,就属于春季:如果是 6 月.7 月.8 月,就属于夏季: ...

  10. php正则表达式应用

    正则表达式 1.替换“/\d/”,“#”,$str:正则表达式\d 数字,替换为#,字符串 $str = "2hello 5li 6lei"; echo preg_replace( ...