日期:2014-05-16  浏览次数:20377 次

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"这样的字