ExtJs中点击页面有时不加载的问题

最新推荐文章于 2023-04-07 11:26:09 发布

原创最新推荐文章于 2023-04-07 11:26:09 发布 · 660 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Ext

项目中遇到ExtJs点击菜单时页面不加载的问题，表现为浏览器不请求数据且呈现假死状态。问题根源在于ViewModel的alias重名，即使在view中使用requires保证引用正确，仍然可能出现此问题。当尝试加载其他页面时，由于alias冲突，浏览器不再请求加载，导致假死。解决方案是手动修改ViewModel的alias，避免重复，从而消除页面假死现象。

前段时间项目中遇到了一个问题，点击某个菜单浏览器不请求任何数据，也不加载页面内容，一度是“假死”状态，况且这种情况是不定时出现，纠结了很久。

经过很长一段时间发现原来是定义时ViewModel的alias重名问题导致：

Ext.define('ulooerp.view.sales.morgage.MorgageModel', {
    extend: 'Ext.app.ViewModel',
    alias: 'viewmodel.morgage',

在其他地方也有一个相同的alias定义“viewmodel.morgage”

Ext.define('ulooerp.view.sales.order.MorgageWindowViewModel', {
    extend: 'Ext.app.ViewModel',
    alias: 'viewmodel.morgage',

尽管在view中调用viewModel时添加了requires保证引用正确，但还是会出现“假死”

requires: [
    'ulooerp.view.sales.morgage.MorgageModel',
    'ulooerp.view.sales.morgage.MorgageController'
],

viewModel: {
    type: 'morgage'
},

这是因为现在extjs开发基本都用单页模式，如果上一个请求加载了

ulooerp.view.sales.morgage.MorgageModel

这时候再点击菜单请求加载另外一个

'ulooerp.view.sales.order.MorgageWindowViewModel'

由于view层的写法viewModel:{type:'morgage'}，这时候浏览器寻找alias:'morgage'发现已经存在，就不再请求加载了，导致了页面假死。

修改：

Ext.define('ulooerp.view.sales.morgage.MorgageModel', {
    extend: 'Ext.app.ViewModel',
    alias: 'viewmodel.morgageList',

结论: 开发过程中由于使用sencha extjs 插件自动生成viewModel，对于重名或者相似文件生成的ViewModel的alias可能会重复，这时候我们可以手动修改alias，防止出现假死状态。