ExtJs4 combobox默认选中值的解决方案

网上说的天花乱坠，各种招儿都试了，都没用，其实非常的简单，只需要将要被默认选中的combobox设置一下value即可，但是有一点是需要注意的,看代码：

 

<script type="text/javascript">
 Ext.require([
             'Ext.data.*',
             'Ext.grid.*',
             'Ext.tree.*'
         ]);
 Ext.onReady(function() {

 

  Ext.define('ctreemodel', {
   extend: 'Ext.data.Model',
   fields: [
    {name:'id', type:'string'},
    {name:'path', type:'string'},
    {name:'text', type:'string'},
    {name:'parent', type:'string'},
    {name:'levKey', type:'string'},
    {name:'leaf', type:'boolean'},
    {name:'morder', type:'string'}
   ]
  });

 

//菜单等级数据模型
  Ext.define('menuLelModel', {
   extend: 'Ext.data.Model',
   fields: [
    {name: 'levKey', type: 'string'},
    {name: 'levValue', type: 'string'}
   ]
  });
    
  var store = Ext.create('Ext.data.TreeStore', {
   model: 'ctreemodel',
   proxy:{
    type: 'ajax',
    url: basePath +'auth/menu_load.do'
   }
  });

 

//菜单等级数据集

  var levStore = Ext.create('Ext.data.Store', {
   model: 'menuLelModel',
   data:[
    {levKey: 1, levValue: '一级菜单'},
    {levKey: 2, levValue: '二级菜单'}
   ]
  });
  
  var treeGridPanel = Ext.create('Ext.tree.Panel', {
   region: 'center',
   frame: true,
   split: true,
   title: '菜单信息列表',
         width: '100%',
         height: '100%',
         scroll: 'vertical',
         renderTo: Ext.getBody(),
         collapsible: true,
         useArrows: true,
         rootVisible: false,
         store: store,
         singleExpand: false,
         tbar: [{
                text: '修改',
                id: 'update',
                iconCls: 'option',
                ref: '../removeButton',
                handler: function(){
                 var records = treeGridPanel.getView().getChecked();
                 if(records.length != 1) {
                  Ext.Msg.alert('提示', '请您选择指定的一条记录');
                  return ;
                 }

                    //如果想将coMenuLevUpdate的值默认选中，只需要setValue即可

                    //但是需要注意的是模型中levKey必须为string,如果是int要转型: Number(records[0].get("levKey"))

                    Ext.getCmp("coMenuLevUpdate").setValue(records[0].get("levKey"));
                 update_win.show();
                }
            }],
         columns: [{
             xtype: 'treecolumn', //this is so we know which column will show the tree
             width: 100,
             text: '菜单名称',
             flex: 1,
             sortable: true,
             dataIndex: 'text'
         },{
          text: '菜单url',
          width: 300,
             flex: 1,
             dataIndex: 'path',
             sortable: true
         },{
          text: '显示顺序号',
             flex: 1,
             dataIndex: 'morder',
             sortable: true
         }]
  });
  
  var update_form = new Ext.FormPanel({
            labelWidth: 170,
            labelAlign: 'left',
            frame: true,
            defaults: {
                width: 170
            },
            bodyStyle: 'padding:10px 5px 0',
            defaultType: 'textfield',
            monitorValid: true,
            items: [{
             xtype: 'combo',
    name:'menuLevUpdate',
          id : 'coMenuLevUpdate',
          width: 200,
          fieldLabel:'菜单等级',
          labelAlign: 'left',
          labelWidth: 80,
          displayField:'levValue',
          valueField:'levKey',     //注意valueField levKey是string类型(类似"1" "2"这样的字符串。)
          store: levStore,
          triggerAction:'all',
          queryMode: 'local', 
          selectOnFocus:true,
          forceSelection: true,
          allowBlank: false,
          editable: true,
          //emptyText:'请选择菜单等级',
          //blankText : '请选择菜单等级',
          typeAhead: true,
          listeners:{   
              select:function(combo, record, eOpts){
               
              }
          }
            }],
            buttons: [{
                text: '关闭',
                iconCls: 'cancel',
                ref: '../addCancelButton',
                handler: function(){
                 update_form.getForm().reset();
                 update_win.hide();
                }
            }]
        });
  
  var update_win = new Ext.Window({
      el: 'add-win',
      title: '菜单信息添加',
      layout: 'fit',
      border: false,
      width: 350,
      height: 300,
      closable: false,
      resizable: false,
      modal: true, // 模态窗口
      items: [update_form]
  });
  
  Ext.create('Ext.container.Viewport', {
   layout: 'border', //使用border布局
   items: [treeGridPanel]
  });
 });
</script>

 

就是这么简单。