話題技術(shù)背景為：整個(gè)項(xiàng)目用Grails開源框架開發(fā)，前臺(tái)用Ext技術(shù)呈現(xiàn)。

如何將后臺(tái)數(shù)據(jù)（比如Customer對(duì)象）綁定到Ext的ComboBox中？

前臺(tái)Ext呈現(xiàn)ComboBox的代碼如下：

var customerFiedset = [{ bodyStyle: 'padding-right:5px;', items: { id: 'customerFiedset', xtype: 'fieldset', title: 'Customers', collapsible: true, autoHeight: true, defaultType: 'combo', collapsed: false, items: [{ store: customerStore, mode: 'local', triggerAction:'all', //請(qǐng)?jiān)O(shè)置為"all",否則默認(rèn)為"query"的情況下，你選擇某個(gè)值后，再次下拉時(shí)，只出現(xiàn)匹配選項(xiàng)，如果設(shè)為"all"的話，每次下拉均顯示全部選項(xiàng) forceSelection:true, //是否只能選擇下拉框的值，即不會(huì)取輸入的未在下拉框值域內(nèi)的值 typeAhead:true, //延時(shí)查詢，與下面的參數(shù)配合 typeAheadDelay:250, //默認(rèn)250 displayField: 'enName', valueField: 'id', name: 'combo-customer', fieldLabel: 'plz select a cutomer', emptyText: 'plz select a cutomer...', allowBlank: false }] } <br />

在ComboBox所有屬性中，最重要的是store屬性，它是ComboBox的數(shù)據(jù)源，在該例中，它可以描述如下：

var customerStore = new Ext.data.JsonStore({ autoLoad: true, root: 'customers', fields: [ 'id', 'enName', 'chName' ], proxy: new Ext.data.ScriptTagProxy({ url: '/shuxun/customer/store' }) });

從以上代碼得知，ComboBox的數(shù)據(jù)源是一個(gè)JsonStore，來(lái)源于'/shuxun/customer/store'。

熟知Grails UrlMapping的人都知道，customer是Grails的Controller，store是該Controller類的Action。查源碼知store的寫法如下：

def store = { [customerList : Customer.list(sort:"enName", order:"asc")] }

從該Action返回customerList給前臺(tái)，那么前臺(tái)如何將customerList組裝成Json格式的數(shù)據(jù)呢？代碼如下：

stcCallback1001({ "customers":[ <g:each in="${customerList}" status="i" var="customer"> <g:if test="${i > 0}"> , </g:if> { "id" :"${customer?.id?.encodeAsHTML()}", "enName":"${customer?.enName?.encodeAsHTML()}", "chName":"${customer?.chName?.encodeAsHTML()}" } </g:each> ] })

這樣，ComboBox就可以調(diào)用本地Json數(shù)據(jù)源了。

• JSON