把下拉框的代码写在js中
//数据字典下拉控件 Ext.ns('uc'); uc.cboTDicArea = function (config) { var storeTDicArea = Ext.create('Ext.data.Store', { autoLoad: true, fields: [{name: 'areacode'}, {name: 'areaname'}] , proxy: { url: rootUrl + 'Base/loadTDicArea', type: 'ajax', reader: { type: 'json', rootProperty: 'data' } }, listeners: { beforeload: function (store) { var params = { levelcode: config.levelcode, fareacode: config.fareacode, productid: config.productid }; Ext.apply(store.proxy.extraParams, params); }, load: function (store) { var data = {'areacode': '', 'areaname': '—请选择—'}; var rs = [new Ext.data.Record(data)]; store.insert(0, rs); } } }); var cbo = new Ext.form.field.ComboBox(Ext.apply({ store: storeTDicArea, triggerAction: 'all', queryMode: 'local', emptyText: '—请选择—', blankText: '-请选择-', valueField: 'areacode', displayField: 'areaname', editable: false, setfareacode:function(value){ config.fareacode=value; },
listConfig: { loadingText: '查找中...', emptyText: '没有找到匹配的信息...', width: 620, height:400, tpl: '<table style="width:100%;"><tr bgcolor="#e1e1e1" height="24" style="font-size: 14px"><td style="width:220px" align="center">医院名称</td><td style="width:150px" align="center">医院编号</td><td style="width:80px" align="center">定点类型</td><td style="width:180px" align="center">医院等级</td></tr>'+ '<tpl for="."><tr class="x-boundlist-item"><td align="center">{hosname}</td><td align="center">{hoscode}</td><td align="center">{bxtypename}</td><td align="center">{hosbxlevelname}</td></tr></tpl></table>' }
}, config)); return cbo; }
在页面用这种方式调用
<script type="text/javascript" src="<%=path%>/extjs/UserControl/cboTDicArea.js"></script>
var cboProvince = uc.cboTDicArea({ levelcode: 20, productid: 'e57a2d1b-761e-4e37-895a-c8267eb33a85', name: 'provincecode', fieldLabel: '省份', allowBlank: true, listeners: { select: function () { cboCity.reset(); cboCounty.reset(); cboTown.reset(); cboCommunity.reset(); cboCity.setfareacode(cboProvince.getValue()); cboCity.store.load(); cboCounty.store.load(); cboTown.store.load(); cboCommunity.store.load(); } } });
使用这种方式修改下拉框数据源
var cboProvince = uc.cboTDicArea({ levelcode: 20, productid: 'e57a2d1b-761e-4e37-895a-c8267eb33a85', name: 'provincecode', fieldLabel: '省份', allowBlank: true, listeners: { select: function () { cboCity.reset(); cboCounty.reset(); cboTown.reset(); cboCommunity.reset(); cboCity.setfareacode(cboProvince.getValue()); cboCity.store.load(); cboCounty.store.load(); cboTown.store.load(); cboCommunity.store.load(); } } });可以通过这种方式显示查询列表
listConfig: { loadingText: '查找中...', emptyText: '没有找到匹配的信息...', width: 620, height:400, tpl: '<table style="width:100%;"><tr bgcolor="#e1e1e1" height="24" style="font-size: 14px"><td style="width:220px" align="center">医院名称</td><td style="width:150px" align="center">医院编号</td><td style="width:80px" align="center">定点类型</td><td style="width:180px" align="center">医院等级</td></tr>'+ '<tpl for="."><tr class="x-boundlist-item"><td align="center">{hosname}</td><td align="center">{hoscode}</td><td align="center">{bxtypename}</td><td align="center">{hosbxlevelname}</td></tr></tpl></table>' }