extjs中grid中嵌入动态combobox的应用

今天需要在grid中嵌入combobox,在网上找了好久也没有找到一个正确可行的方法,可能是版本问题(我版本是extjs 3.0),没有继续研究其原因,自己查找资料,终于实现功能。现在分享一下代码。

拿combobox的数据

    comboDS = new Ext.data.JsonStore({
                url :  'test.do',
                fields : [{
                            name : 'id'
                        }, {
                            name : 'display'
                        }]
            });

combobox定义
              combobox 中的id必须要有,后面要跟据id取combobox值。
  
    var comboBox = new Ext.form.ComboBox({
                id : "cb", //必须有
                typeAhead : true,
                readOnly : true,
                allowBlank : false,
                autoScroll : true,
                selectOnFocus : true,
                emptyText : '请选择...',
                store : comboDS,
                forceSelection : true,
                triggerAction : 'all',
                displayField : 'display',
                valueField : 'id'
            });

grid 的定义:
    ds = new Ext.data.Store({
                baseparams : {
                    start : 0,
                    limit : RowCount
                },
                proxy : new Ext.data.HttpProxy({
                            url :'test2.do'
                        }),
                reader : new Ext.data.JsonReader({
                              root : 'data',
                               totalProperty : 'totalCount'
                           }, [{
                                     name : "bh"
                                  }, {
                                       name : "test"
                               }]);
                });
           var cm = new Ext.grid.ColumnModel([new Ext.grid.RowNumberer(), {
                header : "编号",
                dataIndex : "bh"
            }, {
                header : "测试",
                dataIndex : "test",
                renderer : renderer,
                editor : comboBox
            }]);
grid = new Ext.grid.EditorGridPanel({
        title : '测试',
        ds : ds,
        cm : cm,
        clicksToEdit : 1,
        viewConfig : {
            forceFit : true
        },        
        bbar : new Ext.PagingToolbar({
                    pageSize : RowCount,
                    store : ds,
                    displayInfo : true,
                    displayMsg : '显示第 {0} 条到 {1} 条记录,一共 {2} 条',
                    emptyMsg : "没有记录"
                })
    });


cm 的renderer函数
此方法为解决combobox修改后显示为id
function renderer(value, p, r) {
    var index = comboDS.find(Ext.getCmp('cb').valueField, value);
    var record = comboDS.getAt(index);
    var displayText = "";
    if (record == null) {
        displayText = value;
    } else {
        displayText = record.data.display;// 获取record中的数据集中的display字段的值
    }

posted @ 2010-12-30 19:41  WarrenHu  阅读(795)  评论(0编辑  收藏  举报