使用EXT实现ComboBox多列下拉列表

在C/S的开发中，用户在选择的时候一般会要求提供多列下拉列表，以便更好的参考所选择资料的正确性。但是EXT似乎不支持这个功能。但是可不可以通过其它方式达到这一效果呢？本人经过一天的尝试，终于达到的相关的效果，唯一美中不足的是，ComboBox在选择后，value和text好象有问题，只能显示value.好了，不说了，看代码：

var createStockDropDown=function(id){
	var stockname="";
	var itemno="";
	var spec="";
	var innerId="";
	var tpl='<tpl for="."><div style="height:200px"><div id="'+id+'"></div></div></tpl>'
 	this.StockDropDown = new Ext.form.ComboBox({  
    store:new Ext.data.SimpleStore({fields:['value','text'],data:[['','']]}),  
    editable:false,
	mode: 'local',
    listWidth:450,
    triggerAction:'all', 
    maxHeight: 300,
	valueField:'value',
	displayField:'text',
    tpl: tpl,
    selectedClass:'',  
    onSelect:Ext.emptyFn
	});

	this.StockDropDown.getItemNo=function()
	{
		return itemno;
	};

	this.StockDropDown.getStockName=function()
	{
		return stockname;
	};
	this.StockDropDown.getSpec=function()
	{
		return spec;
	};

    var StockDropDowncm = new Ext.grid.ColumnModel([
        {header:'编号',dataIndex:'id'},
        {header:'物料编号',dataIndex:'itemno'},
        {header:'物料名称',dataIndex:'stockname'},
        {header:'物料规格',dataIndex:'spec'},
        {header:'单位',dataIndex:'unit'}
    ]);
	var StockDropDownds = new Ext.data.Store({
        proxy: new Ext.data.HttpProxy({url:'resp/stockDropDown.jsp'}),
        reader: new Ext.data.JsonReader({ 
			totalProperty:'totalProperty',
			root:'root'},
		[
            {name: 'id'},
            {name: 'itemno'},
            {name: 'stockname'},
            {name: 'spec'},
            {name: 'unit'}
        ])
    });

	var StockDropDownPanel=new Ext.grid.GridPanel({
			ds: StockDropDownds,
			cm: StockDropDowncm,
			sm: new Ext.grid.RowSelectionModel({singleSelect:true}),
			title:'',
			region:'center',
			height:300,
			bbar:new Ext.PagingToolbar({
				pageSize:20,
				store:StockDropDownds,
				displayInfo:false,
				displayMsg:'显示第{1}条记录,一共有{2}条',
				emptyMsg:'没有记录'
			})
	});
	StockDropDown.on("expand",function(){
		StockDropDownPanel.render(id);
		StockDropDownds.load({params:{start:0,limit:20}});
	});

	StockDropDownPanel.on('rowclick', function(grid, rowIndex, event) {
		var sm=grid.getSelectionModel();
		var record=sm.getSelected();
		itemno=record.get("itemno");
		stockname=record.get("stockname");
		spec=record.get("spec");
		innerId=record.get("id");
		StockDropDown.setValue(itemno);
                //此处想用setRawValue设置StockDropDown的值是innerId,显示为itemno,但是不成功。有无人知道怎么回事？
                //StockDropDown.setRowValue(itemno);
                //StockDropDown.setValue(innerId);
		StockDropDown.collapse();
    });
	return StockDropDown;
 };

//call

var std=createStockDropDown("StockDropDownID");
var sd=createSupplierDropDown("SupplierDropDownID");
	var poplancm = new Ext.grid.ColumnModel([
        {header:'编号',dataIndex:'id',editor:new Ext.grid.GridEditor(new Ext.form.TextField({allowBlank:true,disabled:true}))},
        {header:'物料编号',dataIndex:'itemno',editor:std},
        {header:'物料名称',dataIndex:'itemname',editor:new Ext.grid.GridEditor(new Ext.form.TextField({allowBlank:false,disabled:true}))},
        {header:'物料规格',dataIndex:'spec',editor:new Ext.grid.GridEditor(new Ext.form.TextField({allowBlank:false,disabled:true}))},
        {header:'供应商名称',dataIndex:'supplier',editor:sd},
        {header:'每个用量',dataIndex:'perqty',editor:new Ext.grid.GridEditor(new Ext.form.TextField({allowBlank:false,disabled:false}))},
        {header:'总用量',dataIndex:'totalqty',editor:new Ext.grid.GridEditor(new Ext.form.TextField({allowBlank:false,disabled:true}))},
        {header:'计划用量',dataIndex:'planqty',editor:new Ext.grid.GridEditor(new Ext.form.TextField({allowBlank:false,disabled:false}))},
        {header:'单价',dataIndex:'price',editor:new Ext.grid.GridEditor(new Ext.form.TextField({allowBlank:false,disabled:true}))},
        {header:'成本',dataIndex:'cost',editor:new Ext.grid.GridEditor(new Ext.form.TextField({allowBlank:false,disabled:true}))},
        {header:'仓存可用数',dataIndex:'stockqty',editor:new Ext.grid.GridEditor(new Ext.form.TextField({allowBlank:false,disabled:true}))},
        {header:'需订货数量',dataIndex:'orderqty',editor:new Ext.grid.GridEditor(new Ext.form.TextField({allowBlank:false,disabled:true}))},
        {header:'总金额',dataIndex:'grandtotal',editor:new Ext.grid.GridEditor(new Ext.form.TextField({allowBlank:false,disabled:true}))},
        {header:'交货日期',dataIndex:'deliverydate',editor:new Ext.grid.GridEditor(new Ext.form.DateField({allowBlank:false,disabled:false}))},
        {header:'税率(%)',dataIndex:'tax',editor:new Ext.grid.GridEditor(new Ext.form.TextField({allowBlank:false,disabled:false}))},
        {header:'备注',dataIndex:'description',editor:new Ext.grid.GridEditor(new Ext.form.TextField({allowBlank:false,disabled:false}))}
    ]);

//加入事件侦听
	std.on("collapse",function(){
		var sm1=poplangrid.getSelectionModel();
		var cell1=sm1.getSelectedCell();
		var rec1=poplands.getAt(cell1[0]);
		rec1.set("itemname",std.getStockName());
		rec1.set("spec",std.getSpec());
		std.focus();
	});

效果图：
[img]/upload/attachment/102774/d7e920e0-f5b8-3e56-a694-302ca3842024.jpg[/img]

[img]/upload/attachment/102776/02a258d4-d922-31d2-8a01-7ca72d350c22.jpg[/img]