刚接触ExtJS的新手们，你们有没有遇到过这种情况？明明给表格的ComboBox列配置了数据源，运行时却只看到空白单元格；或者下拉选项能展开，但选中后单元格里死活不显示文字？这种抓狂的感觉我太懂了！今天就带大家扒一扒EditorGridPanel里ComboBox列的八大常见显示问题，手把手教你怎么见招拆招。
配置错误绝对是新手最容易踩的坑。很多人在定义columns配置项时，会忘记给ComboBox列设置正确的editor属性。比如你给列头写了”性别”，但editor里没绑定对应的xtype:’combo’，这时候表格压根不会渲染下拉框。还有更隐蔽的——fieldLabel和name属性搞混了，这个错误能让你的ComboBox直接变成普通文本框。
数据源的问题就像个隐形杀手。假设你的Store里定义了valueField和displayField，但表格里的ComboBox却显示value值而不是对应的文字。这时候要检查三处：第一，Store是否真的加载了数据；第二，ComboBox的valueField和displayField是否与Store的字段名完全一致；第三，别忘了在ComboBox配置里加上hiddenName属性，这个属性决定了提交到后台的参数名。
渲染时机也是个大学问。遇到过页面刚加载时ComboBox显示正常，但刷新数据后就乱码的情况吗？八成是因为Store的加载是异步的。这时候需要用到Store的load事件回调，或者在渲染前先执行Store.load()。有个小窍门：在initComponent方法里预先加载Store，可以避免很多显示异常问题。
说到交互问题，最典型的就是修改值后单元格不更新。比如你从下拉列表选了”北京市”，表格里却还是显示空白的。这时候要检查renderer函数有没有正确返回显示值，或者在afteredit事件里是否调用了store.commitChanges()。记住，EditorGridPanel的修改需要显式提交才会生效。
现在重点说说那个让人抓耳挠腮的核心问题：为什么明明选了值，表格里就是显示不出来？这种情况九成是因为valueField和displayField的映射关系没处理好。假设你的Store里有个数据是[{id:1,name:’男’}]，那ComboBox必须同时配置valueField:’id’和displayField:’name’，同时确保columns里对应的dataIndex是’id’字段。这时候表格会自动用id值存储，但显示对应的name值。
这里有个经典错误案例：小王在columns配置里写了dataIndex:’gender’，但Store里实际字段是’sex’。结果他的ComboBox能正常下拉选择，选中后单元格却显示undefined。这种大小写或者拼写错误，足够让人排查半天。所以一定要养成对照字段名的习惯，最好直接复制粘贴字段名。
再来说说动态加载数据时的坑。有时候需要根据行数据动态改变ComboBox的选项，这时候光配置Store是不够的。需要在CellEditing插件的beforeedit事件里，动态修改ComboBox的Store。比如当编辑省份列时，动态加载对应城市数据。但千万记得，修改完Store后要调用ComboBox的bindStore方法重新绑定。
样式问题也不能忽视。遇到过下拉框被表格遮挡的情况吗？这是z-index层级的问题。ExtJS老版本需要给ComboBox配置listConfig:{zIndex:20000}，或者在全局CSS里调整。还有下拉选项显示不全的情况，记得设置typeAhead:true和minListWidth:200这些配置项。
最后给大家提个醒：多留意浏览器的控制台报错。ExtJS的很多显示问题其实在初始化时就会抛出JavaScript错误。比如看到”Uncaught TypeError: Cannot read property ‘internalId’ of null”这种错误，大概率是Store没有正确初始化。新手容易忽略这些红色报错信息，其实它们才是解决问题的金钥匙。
小编当年被这个问题折磨了整整三天，后来才发现是Store的autoLoad配置设成了false。现在看到新人遇到类似问题，真想穿越回去给自己装个实时debug工具。记住，ExtJS的显示问题就像找不同游戏，关键在细节。配置项多一个少一个逗号，字段名大小写不一致，这些魔鬼细节分分钟教你做人。
免责声明：网所有文字、图片、视频、音频等资料均来自互联网，不代表本站赞同其观点，内容仅提供用户参考，若因此产生任何纠纷，本站概不负责，如有侵权联系本站删除！邮箱:207985384@qq.com https://www.ainiseo.com/hosting/34914.html
