ExtJs6 form回顯combo下拉框的值方法
一般grid加載出來值之後我們對某一行編輯時,開啟form會出現遠端查詢下拉框值不會回顯,也就是沒有值的情況,我們可以按照以下方法讓值回顯。
比如說後端返回實體類中有cityId和cityName兩個欄位。
大體思路就是,彈出form時手動載入下拉框store同時監聽load事件將id和name插到store裡。
combo下拉框元件部分:
Ext.define('App.textfield.CityField', {
extend: 'Ext.form.ComboBox',
alias: 'widget.cityfield',
emptyText : '輸入城市自動檢索' ,
displayField: 'name',
valueField: 'id',
minChars: 0,
queryMode: 'remote',
queryParam : 'param',
bind : {
store : '{cityStore}'
},
listConfig: {
itemTpl: [
'<div data-qtip="{name}: {ename}">{name} ({ename})</div>'
]
}
});
grid表格部分:
{
bind : {
text : '{cityId}'
},
dataIndex : 'cityId',
renderer : 'convertCity'
}
form部分(因為把下拉框策略寫成元件,所以form部分可以極大簡化程式碼而且方便重用,只需要引一個xtype即可):
{
xtype : 'cityfield',
bind : {
fieldLabel : '{cityId}'
},
name : 'cityId'
}
store部分(為了form回顯下拉框值需要加load監聽):
cityStore : {
model : 'App.model.City' ,
autoLoad : false,
pageSize : 15,
session : true,
proxy : {
type : 'ajax',
url : 'city/load.do',
reader : {
rootProperty : 'data'
}
},
listeners : {
load : 'onCityComboLoad'
}
},
controller部分:
比如說grid對某一行雙擊時彈出該行的form,所以grid監聽一個rowdbclick事件,以此為背景。
onRowdblclick : function(table, record, tr, rowIndex, e, eOpts){
var me = this,
store = me.getStore('cityStore'),
form = me.lookupReference('formpanel').getForm();
if(record){
form.loadRecord(record || {});
me.getViewModel().set('_rcd',record);
}
store.load();
},
onCityComboLoad : function(st){
var rcd = this.getViewModel().getData()['_rcd'],
rcddata = rcd.getData(),
cityId = rcddata['cityId '],
cityName = rcddata['cityName'];
st.insert(0,{
'name' : cityName ,
'id' : cityId
});
}
相關推薦
ExtJs6 form回顯combo下拉框的值方法
一般grid加載出來值之後我們對某一行編輯時,開啟form會出現遠端查詢下拉框值不會回顯,也就是沒有值的情況,我們可以按照以下方法讓值回顯。 比如說後端返回實體類中有cityId和cityName兩個
如何實現頁面一載入就將上一次選擇操作的下拉框值回顯出來
案例 —————————————————————— 頁面效果:(頁面載入完畢自動回顯的資料) Html程式碼: <select id="planId" style="width:180px;" onchange="changePlan();">
Spring MVC-表單(Form)標簽-下拉框(Dropdown)示例(轉載實踐)
getcount pap number ima mvc框架 ati 讓我 lec 第一個 以下內容翻譯自:https://www.tutorialspoint.com/springmvc/springmvc_dropdown.htm 說明:示例基於Spring MVC 4
thymeleaf單選回顯,多選回顯,下拉選回顯,預設選中第一個
thymeleaf單選回顯,多選回顯,下拉選回顯,預設選中第一個 //預設選中第一個 <input type ="radio" name="repaymentType" th:each ="repaymentType,repaymentState:${repay
InstallShield Limited Edition for Visual Studio 國內註冊時國家無下拉框解決方法
exe -i 添加 -s war value span 輸入 eval 註冊地址:http://learn.flexerasoftware.com/content/IS-EVAL-InstallShield-Limited-Edition-Visual-Studio 火狐打
vue獲取下拉框值
聲明 for 下拉 targe 賦值 bin 方式 div 解決 vue獲取下拉框的值,用vue-modle,只有點擊下拉框的值才會賦值到下拉框中,初始時下拉框沒有數據,而改用$event就不會出現這樣的問題,下面看代碼以及圖解: v-model解決方式: <!--
bootstrap中selectpicker下拉框使用方法例項
bootstrap selectpicker是bootstrap裡比較簡單的一個下拉框的元件,先看效果如下:下拉框的使用上基本操作一般是:單選、多選、模糊搜尋、動態賦值等,下面來看如何使用:使用方法如下1、首先需要引入的css和js: bootstrap.css
asp.net中js+jquery新增下拉框值和後臺獲取
<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <script src="Scripts
vuejs中select下拉框值的獲取
程式碼片段 {{myVal}} <select v-model="myVal"> <option v-for="item in options" :value="item.value"> {{item.nam
Swing容器中在jTable中新增combobox下拉框時,有關一個下拉框值改變,另一個下拉框值隨之改變的方法
在jTable中,我們經常會需要新增下拉框,一個下拉框很容易設定,但是兩個下拉框設定二級聯動就需要新增addItemListener監聽方法。 所要功能如下圖: 程式碼如下: //型別列表 comboboxType.removeAllItems();
thymeleaf的下拉框(select option)回顯選中
在開發一個足球聯賽管理系統中,需要在修改頁面使用thymeleaf模板引擎先從資料庫中取出資料顯示在頁面中,然後再對要修改的資料分別進行修改。 在input或者textarea的回顯都沒有什麼問題,只要之前傳了物件過來,那麼就在input標籤里加上例如th:value="*{startD
Ajax 的同步和非同步,下拉框 聯動 回顯第二個不能回顯成功
Ajax 的同步和非同步,下拉框 聯動 回顯第二個不能回顯成功 示例: 使用Ajax 實現下拉框聯動 回顯 出現呢只有第一個能夠回顯成功 其餘的都不能正常回顯。 原因 :使用了Ajax的非同步 select的賦值再 非同步之前導致的 ( 賦值前個彈出 可以暫停賦值的執行順序 先載入後賦值 )
下拉框 回顯
引入jstl <%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> 下拉框回顯 <select name="queryMySelect" class="texts"> <
select下拉框資料回顯,option去重
select下拉框資料回顯: 方法1 document.getElementById("province").value="${province}"; document.getElementById("province").options[${province}].s
freemaker中下拉框(動態下拉框和靜態下拉框)的塞值,回顯
靜態下拉,靜態的情況下把所有靜態的可能都列出來,判斷返回的值是否等於option中的值,如果相等就顯示那行,??是判斷不為空: <label class="control-label">所在端:</label>
freemarker 下拉框回顯
使用的是Boolean值,如果為flase,返回的則是 ' ' 空字串,否則返回 'true' 字串 <select id="hot" class="easyui-combobox" data-
關於單選框、下拉框、複選框的資料回顯問題以及全選和全不選
在列表顯示的介面中通常都有編輯操作,進行編輯操作時通常就牽涉到資料的回顯問題,本文中編輯介面和新增介面是在同一個介面。 頁面中使用了jstl中的c標籤,所以要先引用: <%@ taglib prefix="c" uri="http://java.sun.com/js
select下拉框回顯的幾種方法
第一種: jsp程式碼: <selectid="csrqnf"name="csrqnf"id="selecte"class="shortselect"value="${nfResult}">
省市區三級聯動select下拉框,下拉框資料回顯 Demo js指令碼實現帶指令碼與案例,整理好了的下載既可用
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html
回顯帶 forEach 迴圈的下拉框
<select class="combobox pull-left" id="updateProviderName" style="margin-left: 10px;width: 185px"> <c:forEach items="${provi