extjs4.2 重写combobox方法，使其下拉一个form

根据网上很多实例，

Ext.define('ComboBoxForm',{
	extend: 'Ext.form.ComboBox',
	alias: ['widget.comboboxForm'],	
	from: null,
	_txtValue: null,
	editable : false,// 是否编辑
	listConfig : {resizable:false,minWidth:200,maxWidth:450},
	callback : Ext.emptyFn, 
	
	initComponent: function() {
		this.form = Ext.create('Ext.form.Panel',{
			title: 'form',
			xtype: 'form',
			renderTo: this.formId, 
			buttonAlign: 'center',
			frame: true,
			fieldDefaults: {
				labelAlign: 'right',
				labelWidth: 70
			},
			items: [{
				xtype: 'textfield',
				name: "name", 
				fieldLabel: "姓名", 
				allowBlank: false ,
				emptyText: 'not empty'
			}],
			buttons: [{
				text: '保存',
				handler: function() {
					var form = this.up('form').getForm();
					var text = form.findField('name').getValue();
					//this.setValue(text);	
					//this.setValue(this._txtValue = text);					
				}
			}]
		});
		this.formId = Ext.id() + '-form';
		this.tpl = "<tpl><div id='"+this.formId+"'></div></tpl>";
		this.callParent(arguments); 	
        this.on({  
            'expand' : function(){  
                if(!this.form.rendered&&this.form&&!this.readOnly){  
                    Ext.defer(function(){  
                        this.form.render(this.formId);  
                    },100,this);  
                }  
			}      
		});
	},
	setValue: function(text) {		
        
	}
});

Ext.onReady(function(){
	
	var store = Ext.create('Ext.data.JsonStore',{
		proxy: {
			type: 'ajax',
			url: 'role.php',
			reader:{
				root:'userList',
				totalProperty: 'totalCount' 
			}
		},
		pageSize: 10,
		autoLoad: true,
		fields: [
	        {name: 'id',  type: 'int'},
	        {name: 'userName',   type: 'string'},
	        {name: 'password', type: 'string'},
	        {name: 'trueName', type: 'string'},
	        {name: 'tel', type: 'string'},
	        {name: 'stopFlag', type: 'boolean'},
	        {name: 'userMemo', type: 'string'},
	        {name: 'roles', type: 'string'},
	        {name: 'createTime', type: 'string'},
	        {name: 'creator', type: 'string'},
	        {name: 'cardID', type: 'string'},
	        {name: 'deptId', type:'string'},
	        {name: 'roleIds', type:'string'}
	    ] 
	});
	var contextmenu = Ext.create('Ext.menu.Menu', {
		items: [{
			text: 'regular item 1',
			menu: {
				xtype: 'menu',
				items: [
					{text: 'x1'},
					{text: 'x2'},
					{text: 'x3'}
				]
			}
		},{
			text: 'regular item 2',
			menu: {
				xtype: 'menu',
				items: [
					{text: 's1'},
					{text: 's2'},
					{text: 's3'}
				]
			}
		},{
			text: 'regular item 3',
			menu: {
				xtype: 'menu',
				items: [
					{text: 'g1'},
					{text: 'g2'},
					{text: 'g3'}
				]
			}
		}]
	});
	var rowEditing = Ext.create('Ext.grid.plugin.RowEditing', {
        clicksToMoveEditor: 1,
        autoCancel: false
    });
	var my_grid = Ext.create('Ext.grid.Panel',{
		xtype: 'grid',
		store: store,
		renderTo:Ext.getBody(),
		plugins: [rowEditing],
		columns: [ 
	    	new Ext.grid.RowNumberer(),
	        { text: '用户名', sortable : true, dataIndex: 'userName' ,
				editor: {
					xtype: 'comboboxForm'
				}
			},
	        { text: '姓名', sortable : true, dataIndex: 'trueName' }, 
	        { text: '角色',  sortable : true,dataIndex: 'roles' },
	        { text: '状态',sortable : true,  dataIndex: 'stopFlag',
	        	renderer : function(value){
	        		if(value==0){ 
	        			return "启用";  
	        		}else{
	        			return "<font color=red>停用</font>";
	        		}
	        	}
	        },
	        { text: '电话', sortable : true, dataIndex: 'tel' }, 
	        { text: '员工卡号', sortable : true, dataIndex: 'cardID', width:250 },
	        { text: '描述', sortable : true, dataIndex: 'userMemo', width:250 }
	    ],
		tbar :[{
			text:"修改",
			iconCls:"modify",
			handler:function(btn){   
				//editUser();
				Ext.example.msg('Button Click', 'You clicked the {0} button', btn);
			}
		}]
		
	});
	
});