话题技术背景为：整个项目用Grails开源框架开发，前台用Ext技术呈现。

如何将后台数据（比如Customer对象）绑定到Ext的ComboBox中？

前台Ext呈现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', //请设置为"all",否则默认为"query"的情况下，你选择某个值后，再次下拉时，只出现匹配选项，如果设为"all"的话，每次下拉均显示全部选项 forceSelection:true, //是否只能选择下拉框的值，即不会取输入的未在下拉框值域内的值 typeAhead:true, //延时查询，与下面的参数配合 typeAheadDelay:250, //默认250 displayField: 'enName', valueField: 'id', name: 'combo-customer', fieldLabel: 'plz select a cutomer', emptyText: 'plz select a cutomer...', allowBlank: false }] } <br />

在ComboBox所有属性中，最重要的是store属性，它是ComboBox的数据源，在该例中，它可以描述如下：

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

从以上代码得知，ComboBox的数据源是一个JsonStore，来源于'/shuxun/customer/store'。

熟知Grails UrlMapping的人都知道，customer是Grails的Controller，store是该Controller类的Action。查源码知store的写法如下：

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

从该Action返回customerList给前台，那么前台如何将customerList组装成Json格式的数据呢？代码如下：

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就可以调用本地Json数据源了。

• JSON