ExtJS5.1學習筆記7——表單的提交和載入
阿新 • • 發佈：2019-02-12
在學習ExtJS的表單提交時，遇到了一些問題，現在記錄如下：
1、ExtJS的表單提交分為兩種：Ajax方式的提交和標準方式的提交
我們在普通的html表單中提交資料時，預設會跳轉到新的頁面，但是使用ExtJS的Ajax方式提交時，是不會跳轉到新的頁面的，使用標準方式才會跳轉到新的頁面，我就一直納悶怎麼表單的提交一直沒反應，原來我用的是Ajax方式的提交。
使用標準方式提交表單，只需配置一個屬性：standardSubmit: true
下面是表單的Extjs程式碼：
上面使用的是標準方式的提交，會跳轉到getFormData.php頁面，該頁面的程式碼如下：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <!-- 下面是三個必須引入的檔案 --> <link rel="stylesheet" type="text/css" href="../../build/packages/ext-theme-neptune/build/resources/ext-theme-neptune-all.css"> <script src="../../build/ext-all.js"></script> <script src="../../build/packages/ext-theme-neptune/build/ext-theme-neptune.js"></script> <style type="text/css"> *{ font-family: '微軟雅黑'; } </style> <script type="text/javascript"> Ext.onReady(function(){ var form = Ext.create('Ext.form.Panel', { title: 'test form layout', layout: 'form', width: 500, height: 250, margin: 20, renderTo: 'form', bodyPadding: 10, autoScroll: true, frame: true, standardSubmit: true, defaultType: 'textfield', fieldDefaults: { labelWidth: 40, labelSeparator: ': ', labelAlign: 'left', flex: 1, margin: 2 }, defaults: { anchor: '100%' }, items: [{ xtype: 'container', layout: 'hbox', items: [{ fieldLabel: '姓名', name: 'name', xtype: 'textfield' }, { fieldLabel: '性別', name: 'sex', xtype: 'textfield' }] }, { xtype: 'container', layout: 'hbox', items: [{ fieldLabel: '年齡', name: 'age', xtype: 'textfield' }, { fieldLabel: '電話', name: 'phone', xtype: 'textfield' }] }, { xtype: 'container', layout: 'hbox', items: [{ xtype: 'textareafield', name: 'remark', fieldLabel: '備註', height: 70 }] }], buttons: [{ text: '提交', handler: onSubmit }] }); function onSubmit(){ // Ext.Msg.alert('title', 'submit'); form.getForm().submit({ waitMsg: '騷等，正在提交...', waitTitle: '提示', url: 'getFormData.php', action: 'get', success: function(){ alert('submit success'); }, failure: function(form, action){ alert('submit failure' + action.response.status); } }); } //定義資料模型 Ext.define('MyApp.model.User', { extend: 'Ext.data.Model', fields: ['name', 'sex', 'age', 'phone', 'remark'] }); //表單中要填充的資料 var userData = Ext.create('MyApp.model.User', { name: 'Jack', sex: 'male', age: 23, phone: '21387413', remark: 'hello world' }); //這是使用資料模型填充表單的方法，需要定義資料模型 form.loadRecord(userData); /**這是使用json資料填充表單的方式，不需要定義資料模型 var data = { name: 'Jack', sex: 'male', age: 23, phone: '12341234', remark: 'Hello World' } form.getForm().setValues(data); */ }); </script> </head> <body> <div id="form"></div> </body> </html>
這裡主要是接受表單中的資料並存入資料庫<?php $name = $_POST["name"]; $sex = $_POST["sex"]; $age = $_POST["age"]; $phone = $_POST["phone"]; $remark = $_POST["remark"]; $conn = mysql_connect("localhost", "root", "root"); if(!$conn){ echo mysql_error(); echo '{success: false}'; }else{ mysql_select_db("extjs"); $sql = "insert into person (name, sex, age, phone, remark) values ('$name', '$sex', '$age', '$phone', '$remark')"; if(!mysql_query($sql)){ echo mysql_error(); }else{ // echo '{success: true}'; echo '表單提交成功'; } } ?>
2、Ajax方式的提交和標準方式提交的區別
使用Ajax方式的提交，要求返回的資料裡，必須包含一個success欄位，該欄位指明瞭提交表單成功或失敗，若success為true則提交成功，這個地方困擾我好久，由於沒有指定返回的success欄位，所以提交一直沒反應，後來在返回的資料中加了{success: true}之後，才提交成功了。
標準方式的提交資料，就是相當於在html的form表單中提交資料，頁面會有跳轉，上面的程式碼執行效果如下圖：
點選提交按鈕後，頁面會跳轉，如下所示：
並且在資料庫中會插入一條新紀錄：
3、表單的載入
表單的載入比較簡單，在上面的Ext程式碼中，註釋掉按鈕中的操作程式碼，然後加入下面的程式碼：
form.getForm().load({
url: 'formData.php'
});<?php
$file = fopen('data.json', 'r');
while(!feof($file)){
echo fgets($file);
}
fclose($file);
?>{
success: true,
data: {
name: 'zhangsan',
age: '20',
sex: 'male',
phone: '129871239847',
remark: '這裡是備註這裡是備註這裡是備註這裡是備註這裡是備註這裡是備註這裡是備註'
}
}
可以看到，表單中的資料正是在data.json中的資料，證明Ext載入表單資料成功。
