ExtJS调试--显示问题调试

当在页面中发现定义的ExtJS对象没有显示时，可以按一下步骤调试：

 

    1.检查代码是否正确运行了。

 

    2.现在网络面板中检查所需要的图片或数据是否已经下载。

 

    3.检查数据是否正确。

 

    4.如果只是在IE9之前的浏览器有问题，检查逗号问题。

 

    5.使用元素选择功能检查元素是否生成。如果已经生成，则检查元素的高度和宽度，以及位置是否正确。如果没有生成，一般是因为代码没有正确执行。

 

 

 

显示问题最典型的情况就是Grid没有显示数据，具体检查步骤如下：

 

    1.在Firebug面板中，检查服务器是否正确的返回了数据，很多时候都是服务器端代码出了问题。

 

    2.确认服务器代码能够正确返回数据后，检查Store的Render是否已正确的将原始数据转换为以数据模型为基准的数据。如果没有正确转换，说明数据模型定义错误，可能是字段映射出了问题，也可能是返回的数据格式不正确，Render不能正确的从返回的文本中提取数据。

 

    3.如果以上都没有问题，那么就是Grid的列定义和数据模型之间的映射存在问题，可以通过减少列定义的方法逐个排查。

 

 

还有一个典型的例子是组件不显示或显示不正确，例如不应该换行的换行了，则检查步骤如下：

 

    1.如果是动态加载的组件，在网路面板中检查服务器是否已正确的返回了数据，检查返回的数据是否正确。

 

    2.在HTML面板中检查组件的HTML代码是否已正确生成，如果没有，说明组件没有正确加载，可能因为代码没有被正确执行或代码存在错误。

 

    3.如果HTML代码存在，那么请检查HTML代码的样式，看是否是宽度不够或被隐藏了。如果宽度不够，调整宽度；如果是被隐藏了，检查组件的配置对象。

 

 

    4.如果还是存在问题，请减少组件的配置项，从尽可能小的配置开始，逐个添加配置项，就可以找出是哪个配置项导致了错误。