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"
- <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
- 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 元素。 表單用於向伺服器傳輸