首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

我有一个关于ExtJs控制器和视图按钮事件的问题

ExtJs是一种基于JavaScript的前端框架,用于构建富客户端应用程序。它提供了丰富的UI组件和强大的数据处理能力,使开发人员能够快速构建交互性强、功能丰富的Web应用。

控制器(Controller)是ExtJs中用于处理用户交互事件和业务逻辑的组件。它负责监听视图(View)中的各种事件,并根据事件触发的情况执行相应的操作。控制器可以通过选择器(selector)来选择特定的视图组件,并为其绑定事件处理函数。

视图按钮事件是指在ExtJs的视图中,当用户点击按钮时触发的事件。可以通过控制器来监听这些按钮事件,并执行相应的操作。以下是一个示例代码:

代码语言:txt
复制
Ext.define('MyApp.controller.MyController', {
    extend: 'Ext.app.Controller',
    
    init: function() {
        this.control({
            'myview button[action=save]': {
                click: this.onSaveButtonClick
            },
            'myview button[action=cancel]': {
                click: this.onCancelButtonClick
            }
        });
    },
    
    onSaveButtonClick: function(button) {
        // 处理保存按钮点击事件的逻辑
    },
    
    onCancelButtonClick: function(button) {
        // 处理取消按钮点击事件的逻辑
    }
});

在上面的代码中,MyApp.controller.MyController是自定义的控制器类,通过extend关键字继承自Ext.app.Controller。在init方法中,通过this.control方法来监听视图中的按钮事件。'myview button[action=save]''myview button[action=cancel]'是选择器,用于选择视图中的保存按钮和取消按钮。click是按钮的点击事件,分别绑定到onSaveButtonClickonCancelButtonClick方法。

通过这种方式,当用户点击保存按钮或取消按钮时,对应的事件处理函数将会被调用,从而实现相应的业务逻辑。

推荐的腾讯云相关产品和产品介绍链接地址:

以上是对ExtJs控制器和视图按钮事件的简要介绍和示例代码,以及推荐的腾讯云相关产品。如需了解更多详情,请点击相应的链接进行查阅。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Ext JS 教程-MVC架构 原

它们真正做事情是监听事件(常常来自视图)然后做出一些动作。继续我们AccountManager应用程序,让我们创建一个控制器。...init方法是一个决定你控制器如何同视图交互好地方,而且它常常另外一个控制器函数control一起使用。 ...这并不是一个令人兴奋应用程序,但是它展示了使用开始获得结构良好代码多容易。现在让通过添加一个表格(grid)来丰富这个应用。...最后我们创建了两个按钮一个用来关闭窗口,另一个将被用来保存我们(对用户账户)做出更改。 我们现在需要做是:把视图添加到控制器中,渲染它并且把User加载到它里面。...上面定义编辑用户窗口包含一个表单(里面有姓名电子邮件域),一个保存按钮

3.3K10

产品前端重构(TypeScript、MVC框架设计)

这其中包括了各种不同类型代码:界面结构声明、界面样式代码、动态界面代码、事件监听代码、事件逻辑控制代码、JS实体声明代码、数据源声明代码、数据获取代码……大量不同类型逻辑与视图代码混合在一起,导致了一个模块代码文件越来越大...无法统一处理许多问题:这也是大量重复代码引发一个问题,项目组想要对统一页脚、页面的自适应、Ajax 请求等进行统一处理,都必须逐一页面进行修改。 可扩展性差:由于没有前期设计,可扩展性较差。...由于视图控件还是采用 EXTJS控件,所以这个 MVC 框架中 View 其实是图中 ViewBuilder,其职责为创建 EXTJS控件。...这样,就算重复 cId 控件,也不会有什么问题了。 另外,完成后框架,虽然带来了诸多好处,但是开发者第一感觉还是复杂了许多。...之前全都堆在一个文件中代码,现在要分为控制器视图,而且还需要基于统一底层框架来实现,框架中 Api 还需要慢慢熟悉,学习门槛高了不少。

1.9K80
  • Ext JS4 架构你应用 第3节 (官方文档翻译)

    在 refs 配置中,可以设置视图实例引用。允许你在控制器行为中检索操作页面组件。 可以使用 ComponentQuery 来获取组件引用。 另外如果你没在控制器中设置引用。...这就也为这如果你一个基于视图逻辑而且在页面中还没有存在,这样你就需要对逻辑进行检查只有getter 方法返回值时再执行。...Application 事件在多个控制器都需要处理同一个事件时候非常有用。不是在每个控制器里都监听同一个视图事件,而是只有一个控制器来监听视图事件然后触发一个由其他控制器监听应用范围事件。...这也允许控制器在不知道或者不依赖已经存在控制器情况下彼此通信。 在onStationSelect 行为中,我们触发一个叫stationstart应用事件。...总结 我们介绍了使用高级控制器技术实现逻辑视图分离,使得用用架构更加容易理解维护。 在此阶段,应用已经非常功能化。我们可以搜索添加新站点,还可以通过选择站点来播放站点。

    66620

    基于QTwebkit与ExtJs开发CBS结构企业应用管理系统

    这样做减少了磁盘IO网络消耗,保证了系统执行效率;服务端对业务逻辑程序依旧保持着很好控制权,保证了系统升级更新便利性     关于系统可扩展性,ExtJs就能很好处理,在下一节中会有详细描述...7.打开脚本调试器     调试javascript代码一直以来都是开发人员面临老大难问题,自从了FireBug谷歌浏览器自带javascript调试器之后,这个问题得到了很大程度解决...由于我们设计浏览器没有标题栏,所以视图titleBar就是系统标题栏,它包含了关闭、最小化按钮。  ...2.定制模块加载基址     Extjs一套独特模块加载机制,它可以通过js类名称空间来加载相应js代码文件,比如视图文件名称空间是UTMP.sys.menuTree,ExtJs框架会从...幸而ExtJs一个对象化程度较高js类库,使得这个问题能很容易解决。

    3.4K80

    Extjs mvc

    MVC模式,模型(Models)控制器(Controllers) Model模型 是字段和它们数据集合,例如User模型带有usernamepassword字段,模型知道如何持久化自己数据,...并且可以其他模型关联,模型跟ExtJS 3 中Record类有点像(区别是,Record只是单纯扁平结构,而Model可以nest),通常都用在Store中去展示grid其他组件数据 View...视图 是组件一种,专注于界面展示 - grid, tree, panel 都是view Controllers控制器 一个安放所有使你app正确工作代码位置,具体一点应该是所有动作,例如如何渲染...view,如何初始化model,app其他逻辑 目录结构如下图所示: ?...             items: [{                  xtype: 'studentlist'              }]          })      } }); View 定义一个视图

    2.4K50

    ExtJs一(Hello World)

    ref=extjs.org.cn 搭建ExtMVC环境  1.创建一个Asp.Net Mvc3.0Web空项目,视图引擎选择Razor。 ?...创建好项目后,要在解决方案资源管理器中进行处理:   将ContentScripts目录下文件全部删除。   再在Content目录下创建一个Images目录。...在app目录下,再创建controller、model、store view这4个目录,分别用来存放项目中Ext JS控制器、模型、Store视图文件。...再在ExtJS目录下创建一个ux目录,用来存放Ext JS扩展组件。 管理系统将使用Ext JS是4.1.1版本。...实现Hello World    1.在Controllers添加控制器HomeController,并在Index Action上直接添加视图(添加视图时记得  使用布局或母版页选项不勾)。

    91620

    Extjs MVC架构 (官方文档翻译)【带源码】

    View (视图):任意类型组件如grids, trees panels 都是视图。 Controller(控制器):是使你应用工作特殊逻辑文件。...它主要是监听事件(通常是来自视图做出某些行为。 配置我们Account Manage 应用,我们创建一个控制器。...init方法是设置你控制器视图相互作用主要场所,经常用来其他Controller 方法 - control相结合。...最后创建了两个按钮一个是关闭窗口一个是用来保存修改值。 现在需要做就是将此视图添加到控制器中,渲染并且将User 加载进去。...第一步我们修改控制器init方法来简单保存按钮事件: Ext.define('AM.controller.Users', { ...

    1.3K20

    ExtJs二(实现登录)

    一般登录窗口都包含用户名、密码验证码3个文本输入框,还包含有显示验证码图片、登录重置按钮。因而需要用到ExtJS控件包括表单面板、图片、工具栏、按钮和文本字段。...调用callParent方法是必须,不然组件运行会出问题,达不到预期效果。...第二句表示将表单面板向内压缩5像素,这样表单内组件就不会窗口内边框粘在一起,这个可根据个人喜好设置。第三句作用就是让表单面板背景颜色窗口融合在一起,而不是默认白色,这还是个人喜好问题。...代码中,验证码图片将VerifyCode控制器生成,这个暂时放下,会在后面讨论。 10.还要实现是单击图片刷新验证码,但是查API发现Img对象居然没单击事件。...登录按钮将调用onLogin方法。重置按钮很简单,只是简单调用onReset方法。 余下要完成是onLoginonReset方法。

    2.1K10

    Ext JS 4 架构你应用 第2节 (官方文档翻译)

    应用逻辑 在 Ext JS 3中,我们通常将应用逻辑添加在视图按钮处理器方法中,绑定子组件拓展视图时重写拓展视图方法。...他们负责监听来之视图或者其他控制器事件,并且实现对应事件逻辑。这样设计将带来很多好处。 一个好处是,你应用逻辑不绑定视图实例。...另外在Ext JS 3中,你也许要嵌套多个视图,每个视图都添加应用逻辑。通过将应用逻辑移到控制器,变得更加集中,使得应用维护修改变得更加容易。...如果想要了解哪些可用事件可以查询API 文档搜索events(事件)部分。 监听器配置值是一个事件发生时执行方法。这个方法范围一般是控制器自身。...不是在每个控制器中都监听同一个视图事件,只有一个控制器监听此视图事件出发一个应用范围事件,其他控制器来监听。 这也允许控制器在不知道或者不相互依赖情况下彼此交互。

    74710

    ExtJs二(实现登录)

    一般登录窗口都包含用户名、密码验证码3个文本输入框,还包含有显示验证码图片、登录重置按钮。因而需要用到ExtJS控件包括表单面板、图片、工具栏、按钮和文本字段。...调用callParent方法是必须,不然组件运行会出问题,达不到预期效果。...第二句表示将表单面板向内压缩5像素,这样表单内组件就不会窗口内边框粘在一起,这个可根据个人喜好设置。第三句作用就是让表单面板背景颜色窗口融合在一起,而不是默认白色,这还是个人喜好问题。...代码中,验证码图片将VerifyCode控制器生成,这个暂时放下,会在后面讨论。 10.还要实现是单击图片刷新验证码,但是查API发现Img对象居然没单击事件。...登录按钮将调用onLogin方法。重置按钮很简单,只是简单调用onReset方法。 余下要完成是onLoginonReset方法。

    1.9K20

    用纯 JavaScript 撸一个 MVC 框架

    控制器模型都不应该知道关于 DOM、HTML元素、CSS 或其中任何内容信息。任何与之相关内容都应该放在视图中。...接着在构造函数中,将为视图设置需要所有东西: 应用程序根元素 - #root 标题 h1 一个表单,输入框提交按钮,用于添加待办事项 - form, input, button 待办事项清单...当你提交新待办事项、单击删除按钮或单击待办事项复选框时,将触发一个事件视图必须侦听这些事件,因为它们是视图用户输入,它会将响应事件所要做工作分配给控制器。 我们将为事件创建 handler。...设置事件监听器 现在我们了这三个 handler ,但控制器仍然不知道应该什么时候调用它们。必须把事件侦听器放在视图 DOM 元素上。...我们在视图上有 displayTodos 方法来解决这个问题,但如前所述,模型视图不应该彼此了解。 就像侦听事件一样,模型应该回到控制器,让它知道发生了什么。

    3.3K41

    Mac开发跬步积累(二):NSViewController 转场动画精耕细作

    关于NSViewController基础细节,兴趣同学可以参考Mac开发基础教程这个系列教程,友情提示: 自学能力好同学可以参考github中课程代码.另外一门macOS 应用开发进阶课程...,供项目经验或对组件化感兴趣同学参考. 0x00 : extension NSViewController 在macOS 10.10之后,关于NSViewController,苹果公司专门在一个...添加需要切换控制器: RedController BlueController 为自定义两个控制器,仅显示不同视图颜色....自定义present 动画时,需要注意事件穿透问题: 由于显示出来控制器视图(Controller View)是通过addSubView方式添加到容器视图中,因此在控制器视图(Controller...View)上进行点击操作,可能会触发容器视图中控件(比如按钮)方法 解决办法: 给容器视图添加一层背景视图(自定义NSView, 重写mouseDown方法即可),通过背景视图屏蔽鼠标操作,防止事件穿透到容器视图

    2.7K40

    聊聊iOS开发之MVVM架构设计

    MVVM衍生于MVC,是对 MVC 一种演进, 它促进了 UI 代码与业务逻辑分离。 它正式规范了视图控制器紧耦合性质,并引入新组件。..., Controller可以当作一个重量级View(负责界面切换处理各类系统事件)。...3、视图控制器不要做事 发起登录网络请求 判定登录按钮有效性 来获取头像地址(PS:可能从本地数据库获取,也有可能通过网络请求来获取) ......视图控制器通过使用viewModel上bannersdataSource数组中对象来配置表格视图(tableView)tableViewHeadercell。...但是本文可能也存在错误之处,或者不足之处,希望大家看到问题地方在下方留言一起谈论学习,后续可能会持续更新更正本文。

    8.8K92

    【译】用纯JavaScript写一个简单MVC App

    不会再写更多关于CSS东西,因为它不是本文焦点。 好了,现在我们了HTMLCSS,所以是时候开始写这个应用程序了。 开始 我们将使它变得非常好用简单,以了解哪些类对应MVC哪部分。...将创建一个Model类,一个View类一个Controller类,它们将包含modelview。该应用是控制器一个实例。...当你提交新待办事项,单击删除按钮或单击待办事项复选框时,将触发一个事件视图必须监听那些事件,因为它是视图中用户输入,但是它将把响应该事件将要发生事情责任派发到控制器。...我们在视图上有displayTodos方法来解决此问题,但是如前所述,模型视图不互通。 就像监听起那样,模型应该触发回来控制器这里,以便其知道发生了某些事情。...决定在视图上创建一个方法,用新编辑值更新一个临时状态变量,然后在视图中创建一个方法,该方法在控制器中调用handleEditTodo方法来更新模型。

    2K10

    JQuery EasyUi之界面设计——前言与界面效果(一)

    世上没有完美的产品,而且其对IE6兼容性还存在一些问题,但相比extjs,其还是很方便阅读修改。 简单性。这既是优点也是缺点。...再比如组件使用,官方文档描述也就那么几页,使用起来,也就那么几个方法与事件,但基本够用了。 个人不喜欢固步自封,喜好使用对自己来说有点神秘陌生技术。...extjs一个行动不便美妇,其脚本太庞大,对象太丰富,并且不利于维护;ext.net如一个打扮得花枝招展裹脚妇女,其将extjs封装成服务器控件,虽然其维护起来不错,体验不错,使用方便,但是不喜欢使用服务器控件这种方式...,也不喜欢其包了一层一层外壳,调起问题来从ASP.NET到EXT.NET到extjs;而easyui,则如一个清纯少女,从外表即可窥探内心,清秀而不失美观。...首页样式是扒官网DEMO,但是与其不同是,其右侧是一个框架,这里右侧换成了一个tab,对于管理系统来说,使用tab更方便。 内容展现页面 ?

    1.5K40

    了解一下MVC

    MVC目的是将MV实现代码分离,从而使同一个程序可以使用不同视图,也就是说一个模型可以被多个视图重用。而控制器则是接收页面页面的事件,然后决定调用哪个模型去处理请求,最后确定用哪个视图显示。...每一个层都是独立,当你替换任何一个或者更新一个东西,对于另外两个都不影响。 现在公司.net询问了一下,他们使用都是MVC框架,通过Controller分发视图。...比如页面显示一个数字,一个按钮一个按钮,当我们点击加时候,视图通过控制器触发了模型方法,模型方法里面对这个数字进行操作,然后更新视图。...还有一个问题,一直说MVC数据流是单向问了.net一个开发很多年大佬,下面两种说不同角度理解都是正确: 自己也不确定哪种是正确。 ?...说了那么多,挺乱,自己理解MVC可以总结一下,就是视图模型是可重用、分离,通过控制器连接视图模型,达到代码重用,就是一个思想,具体实现并不需要那么统一方法。 (完)

    42030

    【网安学术】基于ExtJSV**管理系统设计与实现

    摘要:基于ExtJS设计了一个V**管理系统,主要应用于配网安全防护系统中主站加密装置,可实现对主站加密装置参数配置及运行维护。...1 ExtJS概述 1.1 ExtJS简介 ExtJS一个与后台技术无关前端Ajax框架,主要用于创建UI(User Interface用户界面),也被用来开发RIA(富客户端)Web应用。...2 管理系统设计 配网主站装置管理系统用于提供关于主站装置可视化系统操作及监测管理主要V**性能参数。该系统采用是现今流行B/S(Browser/Server,即浏览器/服务器)开发模式。...视图(views)即用户界面,选取ExtJS库中组件构成,其中内嵌少许PHP代码。控制器(controllers)即对模型操作,采用PHP语言编写。整个系统代码构成了MVC式网站组织模式。...在所有代码中,ExtJS构成用户视图与后台操作基本无关,这就实现了视图与操作分离,便于界面的维护。

    1K10

    【IOS开发基础系列】UIView专题

    (2).因为方法(1)存在一些问题,比如说控制器上面可能由按钮,需要监听按钮点击事件,如果是1,那么按钮事件应该由控制器来进行管理。...问题描述1:当view发生一些事件时候,通知控制器,但是控制器已经销毁了,所以可能出现未知错误。     问题描述2:添加一个开关按钮,让屏幕360度旋转(两者效果不一样)。...self.navigationItem.rightBarButtonItem = self.rightBarItem; }         问题:如果动画不放在按钮事件中,直接放到viewDidLoad...原因:出现这个问题是因为开机时候系统个动画,系统动画这个动画重复了。     解决方案:     1、将动画写在按钮事件中     2、利用定时器。...会不会把所有的事件拦截下来?这里就说到了另一个问题,UIResponder在知道需要处理事件时候,还是决定权,比如我可以决定让整个响应链继续走下去,或者直接中断掉整个响应链。

    62930
    领券