1. 程式人生 > >ExtJs6 form回顯combo下拉框的值方法

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 formcombo方法

一般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