ExtJs之Ajax模式的表单数据加载

简单：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80

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

?

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