用下拉组件写下拉框，修改参数的方法

把下拉框的代码写在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>'
        }