`
李成林_89
  • 浏览: 38198 次
  • 性别: Icon_minigender_2
社区版块
存档分类
最新评论

判断界面内容是否改变 Ext实现

阅读更多
前一段时间的工作中,Leader提出了一个新的功能需求,就是记录界面上所有的是否改动信息,如果界面被改动过,则保存按钮可以使用,否则保存按钮为灰色。At first,这个问题纠结了我很长一段时间,在Ext中也使用了各种个监听函数进行控制,可是效果总是差强人意,和同事商讨了好久,终于找到了一个好办法(我自己认为是个不错的方法,嘿嘿),再此,记录下来,供以后做参考,也提供给大家参考下。

如果要实现对整个界面的改动监听,我们可以在新建一个多余的store,如下:
Ext.define('HummerApp.store.mashup.MashupFlag', {
    extend	: 'Ext.data.Store',
    requires	: 'HummerApp.model.MashupFlag',
    model		: 'HummerApp.model.MashupFlag',
	data 	: [{layout: '',firstValue: '',secondValue:''}]
});


这三个字段是我项目中需要的,因为这个tab中我需要监听区域,这三个区域中在加载时,需要各自在这个公共的flag store中注册一个初始的值,如:
//当然,这里你也可以设置其他的值,只要你自己能够判断出改值是否被改变过就行
mashupFlag[0].set('layout','false');

然后在加载完成后,将该store提交一下
Ext.getStore('mashup.MashupFlag').commitChanges( );

这样,页面的原始状态我们就能够确定了,那个区域的值被改变过,只需要顺便修改一下flag    store中的相应区域的标识就行了,如果值又被改回来了,可以把这个标识在修改为以前的值,这样,我们对这个flag store 进行update(可能你也会使用到remove 和 add)监听就可以控制保存按钮的状态了。怎么样简单了吧?
当然,在你保存成功之后,不要忘记将这个flag store在commit一下,确保当前的状态是原始状态就行了。

不过,什么方法都有他特定的使用范围,对于那种只有很少个store的界面来说,完全没有必要按照这种方式来实现,你完全可以直接对你的store进行监听,设置一个公共的全局标识就行了,我之所以这么做,是因为我需要监听的数据非常分散,不是grid,只是简单的panel 和form 的组合,没有公共的store,因此才采用了这样的方法。如果你也遇到和我相似的情况,可以考虑下这种方法呀,嘿嘿
分享到:
评论

相关推荐

    Ext4.2可增删树例子

    在传统的Ext中,一旦树结构建立,其leaf属性(表示节点是否为叶子节点)通常是静态的,不易于在运行时进行修改。然而,在实际应用中,数据的动态变化是常态,因此这种限制往往限制了树组件的灵活性。 这个例子的...

    基于C语言实现的虚拟Ext文件系统.pdf

    这些命令的实现依赖于文件系统的多层架构,包括底层的文件流读写操作、中间层的目录解析和合法性判断,以及最上层的命令处理和用户交互界面。 在内存管理方面,系统维护了一些常驻内存的资源,例如工作目录和当前...

    EXT核心API详解.doc

    这是EXT中实现配置对象合并的一个常用方式。 3. `applyIf`: 类似于`apply`,但只会在目标对象上不存在相应属性时才复制来自配置对象的属性。这样可以避免覆盖已有的属性值。 4. `decode`: 这个函数将JSON格式的...

    ext异步跳转问题(解决过滤器的问题)

    这个过滤器可能会检查请求头中的特定字段,或者查看请求参数,判断是否需要进行页面跳转。如果发现需要跳转,过滤器可以设置响应状态码或响应头,告知前端进行跳转。 为了在Ext JS应用中处理这种情况,你需要监听`...

    基于ext的密码强度检测.

    本文将深入探讨如何使用基于ExtJS的扩展组件(Ext.ux)实现密码强度检测,以及如何通过颜色变化(从红色到绿色)为用户提供直观的反馈。 首先,ExtJS提供了一个强大的组件模型,允许开发者构建复杂的用户界面。"Ext...

    精通JS脚本之ExtJS框架.part1.rar

    14.1 利用Ext.extend实现继承 14.2 与ExtJS扩展相关的预备知识 14.2.1 定义命名空间 14.2.2 使用xtype 14.3 用户扩展和插件 14.3.1 编写自定义用户扩展 14.3.2 常用插件UploadDialog 14.3.3 常用插件...

    Ext修改GridPanel数据和字体颜色、css属性等

    总之,通过Ext JS提供的API,我们可以轻松地对GridPanel的数据和样式进行定制,以实现各种复杂的界面效果。无论是修改数据,还是调整字体颜色或应用CSS属性,都可以通过灵活的编程方式实现。在实际项目中,结合业务...

    解决Ext在火狐下显示小字体的问题

    在CSS中,可以利用火狐的用户代理字符串(User Agent String)来判断当前是否为火狐浏览器,并据此应用特定的样式修复。例如,`@-moz-document url-prefix()`可以用于只在火狐中生效的CSS规则。 8. **响应式设计**...

    精通JS脚本之ExtJS框架.part2.rar

    14.1 利用Ext.extend实现继承 14.2 与ExtJS扩展相关的预备知识 14.2.1 定义命名空间 14.2.2 使用xtype 14.3 用户扩展和插件 14.3.1 编写自定义用户扩展 14.3.2 常用插件UploadDialog 14.3.3 常用插件...

    linux试卷集合(包括选择,填空,判断是非,综合)

    1. Linux的发行版:Ubuntu、CentOS、Red Hat、Debian等都是流行的Linux发行版,它们在用户界面、软件包管理和更新策略上有所区别。 2. 文件系统:ext4是目前最常见的Linux文件系统,它提供了高速、稳定的文件存储和...

    java课程设计.pdf

    本篇内容主要围绕Java课程设计,涉及了两个核心项目:简单计算器的设计和手机信息管理系统的实现,这两个项目都是为了加深对Java编程基础理论知识的理解和应用。 1. **简单计算器设计** - 计算器的开发时间是2014...

    修改grid行或列颜色

    在本篇内容中,我们将详细探讨如何通过ExtJS框架来修改Grid中行或列的颜色,以便于实现更直观的数据展示效果。此方法适用于需要对数据进行视觉区分的应用场景,例如:高亮显示某些特定行或列,使得用户能够快速识别...

    extjs4.0desktop图标换行

    - 通过检查`bodyHeight`与`bottom`(即当前行的底部坐标)的关系来判断是否需要换行。如果剩余空间不足以放下下一个图标,则重新开始新的一列,并将`row`的坐标重置为初始内边距值。 2. **`createDataView`函数**...

    log4Net详解(共2讲)

    不过,最革命性的改变还是ExtJs中新增的Ext.Direct功能,它实现了服务器端的无关性。 在3.2版本中,Ext将增加移动组件,进军移动市场,这将是一次革命性的改进,同时在4.0版本中,除了对HTML5的支持外,还增加画布...

    extjs4 treepanel动态改变行高度示例

    接着,根据记录中的`outboundAmount`字段来判断是否需要为该行添加特定的CSS类(例如`x-grid-record-red`),从而达到改变行样式的视觉效果。 需要注意的是,上述的JavaScript代码片段与CSS代码一起工作,以达到...

    php文件管理

    它涉及到读取、写入、创建、删除、重命名以及移动文件和目录。...对于FileManger这个项目,可以基于以上概念设计一个功能完善的文件管理界面,实现对本地或远程文件的查看、编辑、上传、下载、删除等操作。

    ExtJs Grid选择行

    在实际应用中,经常需要根据用户交互来判断Grid中的行是否被选中,以便进行下一步的操作。本篇文章将详细探讨“ExtJs Grid选择行”的相关知识点。 首先,我们要了解ExtJs Grid中的选择模型(Selection Model)。...

    linux系统及编程基础课后答案.pdf

    - 文件名扩展:Linux 不依赖扩展名来判断文件类型,而是通过文件内容,Windows 则主要依赖扩展名。 - 重新引导:Linux 通常不需要频繁重启,除非必要,因为其设计允许更新和配置更改无需重启。 - 命令大小写敏感:...

Global site tag (gtag.js) - Google Analytics