简单：

<!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. luogu2763 试题库问题 二分匹配

    关键词:二分匹配 本题用有上下界的网络流可以解决,但编程复杂度有些高. 每个类需要多少题,就设置多少个类节点.每个题节点向其所属的每一个类节点连一条边.这样就转化成了二分匹配问题. #include ...

  2. alsa 用户空间编程【转】

    本文转载自:http://blog.csdn.net/sjin_1314/article/details/12872581 /**alsa play test *ALSA用户空间编译,ALSA驱动的声 ...

  3. WinForm中的ListBox组件编程

    ListBox组件是一个程序设计中经常使用到的组件,在Visual C#和Visual Basic .Net程序中使用这个组件,必须要在程序中导入.Net FrameWork SDK中名称空间Syst ...

  4. HDU 3887 Counting Offspring（DFS序+树状数组）

    Counting Offspring Time Limit: 15000/5000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Othe ...

  5. poj 2763（在线LCA+树状数组）

    Housewife Wind After their royal wedding, Jiajia and Wind hid away in XX Village, to enjoy their ord ...

  6. K-means algorithm----PRML读书笔记

    The K-means algorithm is based on the use of squared Euclidean distance as the measure of  dissimila ...

  7. java jdk 管理工具

    官网:http://www.jenv.be/ 安装: Linux / OS X $ git clone https://github.com/gcuisinier/jenv.git ~/.jenv M ...

  8. sentcms,thinkphp网站管理系统

    SentCMS网站管理系统是南昌腾速科技有限公司倾力打造的一款简单易用的网站管理系统,SentCMS网站管理系统(下文简称SentCMS)继承了thinkphp5.0的优秀品质,秉承“大道至简”的设计 ...

  9. Spring Boot (1) 构建第一个Spring Boot工程

    Spring boot简介 spring boot是spring官方推出的一个全新框架,其设计目的是用来简化新spring应用的初始搭建以及开发过程. Spring boot特点 1.化繁为简,简化配 ...

  10. HTML学习笔记——DOCTYPE和DTD，标准模式和兼容模式

    主要涉及知识点: HTML与XHTML HTML与XHTML的区别 DOCTYPE与DTD的概念 DTD的分类以及DOCTYPE的声明方式 标准模式(Standard Mode)和兼容模式(Quirc ...