当在页面中发现定义的ExtJS对象没有显示时,可以按一下步骤调试:
1.检查代码是否正确运行了。
2.现在网络面板中检查所需要的图片或数据是否已经下载。
3.检查数据是否正确。
4.如果只是在IE9之前的浏览器有问题,检查逗号问题。
5.使用元素选择功能检查元素是否生成。如果已经生成,则检查元素的高度和宽度,以及位置是否正确。如果没有生成,一般是因为代码没有正确执行。
显示问题最典型的情况就是Grid没有显示数据,具体检查步骤如下:
1.在Firebug面板中,检查服务器是否正确的返回了数据,很多时候都是服务器端代码出了问题。
2.确认服务器代码能够正确返回数据后,检查Store的Render是否已正确的将原始数据转换为以数据模型为基准的数据。如果没有正确转换,说明数据模型定义错误,可能是字段映射出了问题,也可能是返回的数据格式不正确,Render不能正确的从返回的文本中提取数据。
3.如果以上都没有问题,那么就是Grid的列定义和数据模型之间的映射存在问题,可以通过减少列定义的方法逐个排查。
还有一个典型的例子是组件不显示或显示不正确,例如不应该换行的换行了,则检查步骤如下:
1.如果是动态加载的组件,在网路面板中检查服务器是否已正确的返回了数据,检查返回的数据是否正确。
2.在HTML面板中检查组件的HTML代码是否已正确生成,如果没有,说明组件没有正确加载,可能因为代码没有被正确执行或代码存在错误。
3.如果HTML代码存在,那么请检查HTML代码的样式,看是否是宽度不够或被隐藏了。如果宽度不够,调整宽度;如果是被隐藏了,检查组件的配置对象。
4.如果还是存在问题,请减少组件的配置项,从尽可能小的配置开始,逐个添加配置项,就可以找出是哪个配置项导致了错误。