Extjs 表單之loadRecord和load用法示例

loadRecord

這個方法是BaseForm的一個公用方法，用法比較常用，之前沒有想過要專門的去講這麼個方法的運用，但看到官方例項裡面也有詳細的講這個方法的具體應用，而且我覺得是比較實用的方法！從BaseForm的角度出發，他一個是所有form元件的基類，實用他的這個方法同樣可以用到其子類上，比如FormPanel，我這裡就是通過FormPanel來實現這個功能的！
我整理是把grid裡面的資料載入到form表單中相對應欄位中去！
RowSelectionModel是表示行選擇模式CellSelectionModel就表示單元格選擇模式
由於前面也有涉及到grid相關知識，這裡能理解就行，後面會做詳細講解，同時RowSelectionModel其相對的時間則有rowselect，表示選擇當前行的動作！
重點是rowselect: function(sm, row, rec) {Ext.getCmp("user_info").getForm().loadRecord(rec);}這句程式碼sm是選擇模式row是所列的唯一ID，比如第一條記錄這個值就是0，以此遞推！rec就表示本條記錄

loadrecord.html

Java程式碼

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>loadrecord.html</title>
<link rel="stylesheet" type="text/css" href="../Ext/resources/css/ext-all.css" />
<script type="text/javascript"

src="../Ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../Ext/ext-all.js"></script>
<script type="text/javascript" src="loadrecord.js"></script>
</head>
<body>
</body>
</html>

loadrecord.js

Java程式碼

Ext.onReady(function(){
Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget="qtip";
var data = [
["1","男",new Date(1979,09,06),"tom",21,"[email protected]"],
["2","女",new Date(1980,08,07),"tony",46,"[email protected]"],
["3","男",new Date(1990,07,08),"Jet Li",31,"[email protected]"],
["4","女",new Date(1910,06,09),"washington",29,"[email protected]"]
];
var fields = ['id','sex','brithday','name','age','eamil'];
var cm = new Ext.grid.ColumnModel([
{ header: "ID", width: 60, sortable: true,dataIndex :'id',
editor:new Ext.form.TextField({allowBlank:false})
},
{ header: "性別", width: 70, sortable: true,dataIndex :'sex',
editor:new Ext.form.ComboBox({
editable:false,
allowBlank:false,
displayField:"sex",
valueField:"sex",
triggerAction:"all",
mode:"local",
store:new Ext.data.SimpleStore({
fields:["sex"],
data:[["男"],["女"]]
})
})
},
{ header: "生日", width: 130, sortable: true,dataIndex :'brithday',
editor:new Ext.form.DateField()
},
{ header: "姓名", width: 100, sortable: true,dataIndex :'name'},
{ header: "年齡", width: 100, sortable: true,dataIndex :'age',
editor:new Ext.form.NumberField({
allowBlank:false
})
},
{ header: "Email", width: 120, sortable: true,dataIndex :'eamil',
editor:new Ext.form.TextField({
vtype:"email"
})
}
]);
var store = new Ext.data.GroupingStore({
data :data,
reader : new Ext.data.ArrayReader({id:"id"},fields)
});
var gridForm = new Ext.FormPanel({
id: 'user_info',
applyTo:Ext.getBody(),
frame: true,
autoHeight:true,
labelAlign: 'left',
title: '員工資訊表',
bodyStyle:'padding:5px',
width: 600,
items:[new Ext.grid.GridPanel({
title:"人員資訊列表",
width:600,
autoHeight:true,
fram:true,
cm:cm,
store:store,
sm:new Ext.grid.RowSelectionModel({
singleSelect: true,
listeners: {
rowselect: function(sm, row, rec) {
Ext.getCmp("user_info").getForm().loadRecord(rec);
}
}
}),
view:new Ext.grid.GroupingView({
hideGroupedColumn : true,
showGroupsText :"分組顯示",
groupByText:"使用當前欄位排序",
forceFit :true,
columnsText :"隱藏/顯示欄位",
sortAscText:"升序排列",
sortDescText:"降序排列"
})
}),{
xtype: 'fieldset',
labelWidth: 150,
title:'載入grid資訊內容',
defaultType: 'textfield',
autoHeight: true,
items:[{
fieldLabel: 'ID',
name :'id',
anchor : '55%'
},{
fieldLabel: '性別',
name :'sex',
anchor : '55%'
},{
fieldLabel: '生日',
name :'brithday',
anchor : '55%'
},{
fieldLabel: '年齡',
name :'age',
anchor : '55%'
},{
fieldLabel: '郵箱',
name :'eamil',
anchor : '55%'
}]
}]
});
});

load

Java程式碼

function loadForm(ptid){
ProgramForm.getForm().load({
waitMsg : '正在載入資料請稍後', //提示資訊
waitTitle : '提示', //標題
url : 'findTpartytype.action?tpartytype.id='+ptid, //請求的url地址
method:'POST', //請求方式
success:function(form,action){ //載入成功的處理函式
ProgramForm.load();
(action.result.data),
Ext.Msg.alert('提示','find成功');
},
failure:function(form,action){ //載入失敗的處理函式
Ext.Msg.alert('提示','find失敗');
}
});
}

效果圖如下：

FomrPanel程式碼如下：
Java程式碼

var ProgramForm = new Ext.FormPanel({
labelSeparator : "：", //元素分隔符為:s
frame:true, //是否渲染
height:100,
border:true, //無邊框
reader : new Ext.data.JsonReader({
field:'json',
root:'root'
// totalProperty:'totalCount'
},record),
items : [
{
xtype:'textfield', //型別
fieldLabel:'名稱',
width : 200,
allowBlank : false, //驗證是否為空
blankText : '當事人名稱不能為空'
name : 'tpartytype.partytypename' //定義元素名稱
},
{ //放置隱藏域修改用
xtype: 'textfield',
name: 'tpartytype.id',
id: 'tpartytype.id',
hidden: true,
hideLabel:true
},
{ //放置隱藏把多有引數寫滿/看有無關係
xtype: 'textfield',
name: 'tpartytype.partytypecode',
id: 'tpartytype.partytypecode',
hidden: true,
hideLabel:true
}
],
buttons:[
{
text : '提交',
handler : submitForm
},
{
相關推薦

Extjs 表單之loadRecord和load用法示例

loadRecord 這個方法是BaseForm的一個公用方法，用法比較常用，之前沒有想過要專門的去講這麼個方法的運用，但看到官方例項裡面也有詳細的講這個方法的具體應用，而且我覺得是比較實用的方法！從BaseForm的角度出發，他一個是所有form元件的基類，實用他的這個

jstl標籤forEach用法小結，後臺接收表單（字串和陣列）

對於在頁面上顯示大量資料庫查詢出來的內容時，有必要使用jstl的迴圈語句forEach。先從後臺查詢：List<Map<String,Object>> systemNameList = sendPowerService.getAllSystemNa

PHP中常用的超全局變量表單中get和post提交方式的區別 session與cookie的區別 GD庫是做什麽用的

屬性過程生成報表用戶訪問服務器接收 file pla request PHP中常用的超全局變量 $_GET ----->get傳送方式$_POST ----->post傳送方式$_REQUEST ----->可以接收到get和post兩種方式的值

vue表單之列表選擇

one model methods workday size data ont compute xlabel 1、單選 1.1、兩個選項的單選樣式：點擊按鈕通過class控制選中樣式 <div class="fr"> <a :class="{checke

Hibernate中Session之get和load方法的真正區別

repl .get user href 獲得 tno lose 錯誤 ftw 最近在學習SHH框架中的hibernate，對Session的get和load方法，有點混不清楚，不知道區別在哪，或者對它們的區別感觸不深。所以百度了一下，結果問題來了。百度的結果和實際測試

【轉載】表單中 Readonly 和 Disabled 的區別

作用 .net 單元 ont 應該表單元 als 利用取數今天寫代碼，遇到表單提交的問題，某個字段在不同的情況下，要傳遞不同的值進行賦值，試過一些方法都有些問題，後來請教前端同學，使用 disabled 這個屬性終於搞定了問題，查到一篇講解 readonly 和 di

js表單驗證處理和childNodes 和children 的區別

.get out ren 改名表單 tex jquery this 如果一、對提交表單進行空值驗證 html代碼： 1 　　<form action="#"onsubmit="return validate_form(this);" method="post"&

form表單中get和post兩種提交方式的區別

name bsp inpu get div post input 普通表單一、form表單中get和post兩種提交方式的區別？　　1.get提交表單中的內容在鏈接處是可見的。post不可見　　2.post相比於get是安全的　　3.post不收限制大小，get有

php表單 - 驗證郵件和URL

通過 image all e-mail translate view 進行 pattern log PHP - 驗證名稱以下代碼將通過簡單的方式來檢測 name 字段是否包含字母和空格，如果 name 字段值不合法，將輸出錯誤信息： $name =

html 表單賦值和時間戳轉換

min return 輸入 cond rip bag val minute onload <script> window.onload = function () { var str; //

servlet表單的get和post方法的實現

request fin let text 學習能力 http tee data .get 幾經周折，這個簡單的小程序終於實現了，全新的編譯環境和領域，適應起來有點慢，學習能力還是有待提高使用IDEA2017.3.3創建簡單的servlet程序：　　1.創建一個項目

servlet表單中get和post方法的區別

pos span 轉化不可見上傳文件 post div font 支持 Form中的get和post方法，在數據傳輸過程中分別對應了HTTP協議中的GET和POST方法。二者主要區別如下：1、Get是用來從服務器上獲得數據，而Post是用來向服務器上傳遞數據。2、Get

SpringMVC from 表單標簽和 input 表單標簽

cape rep mission photo div eml wid arch ext 剛學習很懵不知道還有springmvc 自己的表單於是乎就上網查了一下這個真的好用多啦剛學習很懵不知道還有springmvc 自己的表單於是乎就上網查了一下這

功能表單之子功能集合字段類型的使用——JEPLUS軟件快速開發平臺

image 也有效果 spn ros 日常我們 IT html JEPLUS功能表單之子功能集合字段

功能表單之評星、進度條、顏色選擇器的使用——JEPLUS軟件快速開發平臺

cap vpd mil cor font 顏色選擇器分享圖片 self gif JEPLUS功能表單之評星、進度條、顏色選擇器的使用系統開發過程中為了讓數據的展示效果更加的清晰直觀我們會用一些特別的表單字段類型來展示數據，今天這篇筆記就講解一

功能表單之子功能集合字段類型的使用—JEPLUS軟件快速開發平臺

微軟 itl mic web oss 集合 alt 功能表 OS JEPLUS功能表單之子功能集合字段類型的使用主子功能的使用在日常的開發使用中比較常見，JEPLUS平臺針對主子功能也有相應的表單字段類型，這篇筆記就講解一下JEPLUS 平臺中子功能集合的字段類型的

html5新增表單控件和表單屬性

tps 特性普通 mit form表單 pan 頁面 inpu data 新的輸入性表單控件: email：電子郵箱文本框,跟普通的沒什麽區別 - 當輸入不是郵箱的時候,驗證不通過 - 移動端的鍵盤會發生變化 tel：電話號碼 url：網頁

JS 實現表單全選和全不選

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script> function checkAll(){

tp5表單的圖片和文字上傳

Html: <form enctype="multipart/form-data" > <label>標題：</label> <input type="text" class="input-text" value="" id="title" requ

<form>（表單）標籤和常用的型別

1.定義和用法 <form> 標籤用於為使用者輸入建立 HTML 表單。表單能夠包含 input 元素，比如文字欄位、複選框、單選框、提交按鈕等等。表單還可以包含 menus、textarea、fieldset、legend 和 label 元素。表單用於向伺服器傳輸

Extjs 表單之loadRecord和load用法示例

相關推薦