ExtJs之 ComboBox的陷阱

[size=xx-large]
    由于工作需要， 最近开始学习使用extjs框架。花了一个多星期将近两个星期的时间熟悉了一下这个东东，然后就开始干活了。
刚开始用，吃了很多没经验的亏， 比如， 一开始没有用函数封装生成面板的代码， 导致面板只能打开一次， 第二次就打不开了。调试，思考， 然后觉得可能是panel关闭后就被销毁的原因，然后看了一些资料， 也的确如此。还有表单面板的布局等各种问题， 让我花了大量的时间在调试上。在遇到的问题中， 最让人抓狂的是combobox。

    在使用combobox的过程中遇到两个问题：一、提交表单时， combobox传到服务器的值不是期望的valuefield属性，而是displayfield,或者传去一个字符串数组；二，调用它的setValue（val）函数将它初始化时，显示值不是val对应的displayfield， 而是直接将val显示出来。

    刚发现这两个bug时，我一个劲的去检查它的name、id、displayfield、valuefield等属性有没有写错， 结果呢，没结果。被逼无奈，向度娘求助，找到的解决办法是将name属性删除， 添加一个hiddenName属性。于是就这样改了， 还真有效果。API上说hiddenName这个属性可以自动创建一个以hiddenName属性值为name的隐藏表单域。 其实， 我最先想到的解决办法也是添加一个 hidden表单域， 在表单提交前将combo的值手动赋给它。combo组件少的时候这样做也行。

    第二个问题，我想应该是出在setValue（）和load的时间先后上：要等到load完成后再setValue（val）才会显示相应的displayfiled。所以我将原来的代码：

store.proxy=new Ext.data.HttpProxy({url:"..."});
store.load();
form.findField("cmbxxx").setValue(val);	

改为

store.proxy=new Ext.data.HttpProxy({url:"..."});
store.on("load", function(){ 
    form.findField("cmbxxx").setValue(val)
});

若在运行的过程中store的proxy属性不变，可正常运行；若store的proxy属性会发生变化，就会报错，我也不知道原因， firefox报出的错误是form.findField("cmbxxx") is null。
再次被向度娘求助，将代码改为：

store.proxy=new Ext.data.HttpProxy({url:"..."});
store.load({
    callback:function(){
        form.findField("cmbxxx").setValue(val);
     }
});

很神奇地对了。我觉得好没理由，因为这两段代码在理论上的效果都是load完以后执行function里的form.findField().setValue(), 为什么前者就不对呢。顺便用一个简单的场景补充下业务背景：学生信息表中有专业和班级属性；通过学生列表可以对每条记录进行修改操作 ；专业和班级的选择是二级联动的combobox：选择专业后加载班级；第二个问题就出在班级信息下拉列表显示值的初始化上。

[/size]

评论

2 楼 FX夜归人 2014-06-17  

这个也是自己设置 Field 值，就想问下：就想别的组建如可表单加载完成自动设置值呢，一直在寻找，可都没有结果，真抓狂

1 楼 xyzpool 2013-09-16  

代码一:

store.proxy=new Ext.data.HttpProxy({url:"..."});
store.on("load", function(){ 
    form.findField("cmbxxx").setValue(val)
});

代码二：

store.proxy=new Ext.data.HttpProxy({url:"..."});  
store.load({  
    callback:function(){  
        form.findField("cmbxxx").setValue(val);  
     }  
}); 

这两段代码在逻辑上不一样，代码二中的callback是异步加载后立即调用回调方法，所以可以设置值成功。而代码一中是在运行代码时注册load方法，所以可能在你注册这个事件的时候你调用的异步请求已经完成结束了。