ExtJs6 form回显combo下拉框的值方法

最新推荐文章于 2021-07-08 09:28:32 发布

是guava不是瓜娃啊

最新推荐文章于 2021-07-08 09:28:32 发布

阅读量4.6k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： ExtJs6 文章标签： extjs

本文链接：https://blog.youkuaiyun.com/eumenides_/article/details/51568766

ExtJs6 专栏收录该内容

16 篇文章

订阅专栏

本文介绍如何解决ExtJS中Grid编辑时下拉框值无法正确回显的问题。通过手动加载下拉框store并监听load事件，将id和name插入store，确保编辑时值能正常显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一般grid加载出来值之后我们对某一行编辑时，打开form会出现远程查询下拉框值不会回显，也就是没有值的情况，我们可以按照以下方法让值回显。
比如说后端返回实体类中有cityId和cityName两个字段。
大体思路就是，弹出form时手动加载下拉框store同时监听load事件将id和name插到store里。

combo下拉框组件部分：
Ext.define('App.textfield.CityField', {
    extend: 'Ext.form.ComboBox',
    alias: 'widget.cityfield',
    emptyText : '输入城市自动检索',
    displayField: 'name',
    valueField: 'id',
    minChars: 0,
    queryMode: 'remote',
    queryParam : 'param',
    bind : {
        store : '{cityStore}'
    },
    listConfig: {
        itemTpl: [
            '<div data-qtip="{name}: {ename}">{name} ({ename})</div>'
        ]
    }
});
grid表格部分：
{
    bind : {
        text : '{cityId}'
    },
    dataIndex : 'cityId',
    renderer : 'convertCity'
}
form部分(因为把下拉框策略写成组件，所以form部分可以极大简化代码而且方便重用，只需要引一个xtype即可)：
{
    xtype : 'cityfield',
    bind : {
        fieldLabel : '{cityId}'
    },
    name : 'cityId'
}
store部分(为了form回显下拉框值需要加load监听)：
cityStore : {
    model : 'App.model.City',
    autoLoad : false,
    pageSize : 15,
    session : true,
    proxy : {
        type : 'ajax',
        url : 'city/load.do',
        reader : {
            rootProperty : 'data'
        }
    },
    listeners : {
        load : 'onCityComboLoad'
    }
},
controller部分：
比如说grid对某一行双击时弹出该行的form，所以grid监听一个rowdbclick事件，以此为背景。
onRowdblclick : function(table, record, tr, rowIndex, e, eOpts){
    var me = this,
        store = me.getStore('cityStore'),
        form = me.lookupReference('formpanel').getForm();
    if(record){
        form.loadRecord(record || {});
        me.getViewModel().set('_rcd',record);
    }
    store.load();
},
onCityComboLoad : function(st){
    var rcd = this.getViewModel().getData()['_rcd'],
        rcddata = rcd.getData(),
        cityId = rcddata['cityId '],
        cityName = rcddata['cityName'];
    st.insert(0,{
        'name' : cityName ,
        'id' : cityId 
    });
}