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>
就是这么简单。