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

ExtJS ComboBox 第一次不显示display的值
用ExtJS的ComboBox做下拉列表的时候,发现一个很奇怪的问题,

当你setValue的时候,第一次是不会显示display的值。


[code="js"]function getMailTypeComboBox(){
var mailTypeComboBox = null;
if (!mailTypeStore){
mailTypeStore = new Ext.data.Store({
autoLoad: true,
proxy: new Ext.data.HttpProxy({url: "mailTypeJson!list.action"}),
reader: new Ext.data.JsonReader({
root: "root",
totalProperty: "totalProperty"
}, [
{name: 'categoryId'},
{name: 'mailHandle'},
{name: 'handleName'},
{name: 'registration'}
])
            }
});
}

mailTypeStore.load({params:{limit:10,start:0}});

if (!mailTypeComboBox){
mailTypeComboBox = new Ext.form.ComboBox({
id: "typeID",
fieldLabel: '邮件类型',
hiddenName: 'categoryId',
store: mailTypeStore,
valueField: 'categoryId',
displayField: 'handleName',
typeAhead: true,
readOnly: true,
mode: 'local',
triggerAction: 'all',
blankText: '请选择邮件类型...',
emptyText: '请选择...',
selectOnFocus: true,
width: 200
});
}

return mailTypeComboBox;
}

一直搞不明白为什么,网上找了很久也没有答案,跟同事研究了一段时间也得不到结果


后来还是同事找了一个博文,增加一个监听器就好了

(http://www.cnblogs.com/simonhaninmelbourne/archive/2009/03/06/1404347.html)


修改后的代码


[code="js"]function getMailTypeComboBox(){
var mailTypeComboBox = null;
if (!mailTypeStore){
mailTypeStore = new Ext.data.Store({
autoLoad: true,
proxy: new Ext.data.HttpProxy({url: "mailTypeJson!list.action"}),
reader: new Ext.data.JsonReader({
root: "root",
totalProperty: "totalProperty"
}, [
{name: 'categoryId'},
{name: 'mailHandle'},
{name: 'handleName'},
{name: 'registration'}
]),
listeners: {
                load: function() {
                    mailTypeComboBox.setValue(mailTypeComboBox.getValue());
                }



            }
});
}

mailTypeStore.load({params:{limit:10,start:0}});

if (!mailTypeComboBox){
mailTypeComboBox = new Ext.form.ComboBox({
id: "typeID",
fieldLabel: '邮件类型',
hiddenName: 'categoryId',
store: mailTypeStore,
valueField: 'categoryId',
displayField: 'handleName',
typeAhead: true,
readOnly: true,
mode: 'local',
triggerAction: 'all',
blankText: '请选择邮件类型...',
emptyText: '请选择...',
selectOnFocus: true,
width: 200
});
}

return mailTypeComboBox;
}

增加的监听器

listeners: {

    load: function() {

        mailTypeComboBox.setValue(mailTypeComboBox.getValue());

    }

}