Extjs store的loadData(data)方法在界面上一闪而过的原因

最新推荐文章于 2023-06-17 22:33:57 发布

渐行渐远渐无书啊

最新推荐文章于 2023-06-17 22:33:57 发布

阅读量8.6k

点赞数 1

CC 4.0 BY-SA版权

文章标签： extjs store的loadData方法 store数据加载数据一闪而过

本文链接：https://blog.youkuaiyun.com/kun525331194/article/details/39251149

在使用Extjs时，通过store的loadData(data)加载数据到视图后，发现数据在界面上出现后立即消失。原因是store在定义时未设置data属性，当loadData加载数据后，触发了datachange事件，由于store中data为空，导致视图再次刷新，数据无法显示。解决方法是在store中预定义data属性，即使为空值，以防止datachange事件导致的数据丢失。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

// 会出问题的写法
	var fileListStore = Ext.create('Ext.data.Store', {
    		autoLoad :true,
    		fields : ['wfSn','workItemId','fileName','fileExtName','filePath','fileSize','fileRemark','attachType' ]
		});
        //此处省略界面
        //数据加载如下 
         var data = [{...},{...}]
         fileListStore.loadData(data);

如上,在视图加载后调用loadData(data)方法将数据加载到所在组件上,界面上的数据会一闪而过,然后视图上的数据列表还是空的,

----原因所在----

经过测试,发现是因为store定义时候没有定义data参数,而data在store的构造方法中是有的,因而使用loadData(data)方法加载的时候,数据可以显示,

但是数据显示一下然后就消失了,这里的原因就涉及到面板的datachange事件,也就是说数据加载后,视图会刷新,而定义的store中并没有data的属性,

默认的构造则为空值,即datachange事件刷新视图->data重置为默认构造的空值->刷新视图->数据不显示

----解决方法----

在store中定义好data,可以为空值如下

	//正确写法
        var fileListStore = Ext.create('Ext.data.Store', {
    		autoLoad :true,
    		fields : ['wfSn','workItemId','fileName','fileExtName','filePath','fileSize','fileRemark','attachType' ],
	        data : []	
        });
        //此处省略界面
        //数据加载如下 
         var data = [{...},{...}]
         fileListStore.loadData(data);