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

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的应用事件。...总结 我们介绍了使用高级的控制器技术实现逻辑和视图的分离,使得用用架构更加容易理解和维护。 在此阶段,应用已经非常功能化。我们可以搜索和添加新的站点,还可以通过选择站点来播放站点。

    67120

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

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

    3.4K80

    ExtJs一(Hello World)

    ref=extjs.org.cn 搭建ExtMVC环境  1.创建一个Asp.Net Mvc3.0的Web空项目,视图引擎选择Razor。 ?...创建好项目后,要在解决方案资源管理器中进行处理:   将Content和Scripts目录下的文件全部删除。   再在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上直接添加视图(添加视图时记得  使用布局或母版页的选项不勾)。

    92020

    Extjs mvc

    MVC的模式,模型(Models)和控制器(Controllers) Model模型 是字段和它们的数据的集合,例如User模型带有username和password字段,模型知道如何持久化自己的数据,...并且可以和其他模型关联,模型跟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 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方法。 余下要完成的是onLogin和onReset方法。

    2.1K10

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

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

    75110

    用纯 JavaScript 撸一个 MVC 框架

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

    3.3K41

    ExtJs二(实现登录)

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

    1.9K20

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

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

    2.8K40

    聊聊iOS开发之MVVM的架构设计

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

    8.8K92

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

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

    2K10

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

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

    1.6K40

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

    摘要:基于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

    了解一下MVC

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

    42130

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

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

    70630
    领券