- 1、本文档共18页,可阅读全部内容。
- 2、原创力文档(book118)网站文档一经付费(服务费),不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。
- 3、本站所有内容均由合作方或网友上传,本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺!文档内容仅供研究参考,付费前请自行鉴别。如您付费,意味着您自己接受本站规则且自行承担风险,本站不退款、不进行额外附加服务;查看《如何避免下载的几个坑》。如果您已付费下载过本站文档,您可以点击 这里二次下载。
- 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等,请点击“版权申诉”(推荐),也可以打举报电话:400-050-0827(电话支持时间:9:00-18:30)。
查看更多
Extjs 4.2.0 MVC教程
Extjs 4.2.0 MVC 架构内容:1. 文件结构2. 创建项目3. 定义控制器4. 定义视图5. 控制Grid6. 创建Model和Store7. 通过Model保存数据8. 保存到服务器端大型客户端程序通常都难写,难组织,难以维护。项目经常由于增加功能,增加开发人员而很快失控。Ext JS 4提出新的项目结构,不仅组织你的代码,并且减少代码量。我们的系统结构延续“类MVC模式”,第一次引入Models(模型)和Controllers(控制器)的概念。现在有很多MVC架构,他们或多或少有细微差别。以下是我们对MVC的定义:Model是字段和对应数据的组合(例如User Model有username和password两个字段)。Models知道如何通过数据包(data package)持久化,还可以通过associations(联系)同其他models关联。Models很类似于Ext Js 3里的Record类,通常与Stores一起将数据展现到grids和其他components上。View可以是任何类型的component,grids, trees和panels都是视图。Controllers是一个特殊的地方,用来放使application工作的代码 - 可以是渲染视图的,初始化models的,或者其他的应用逻辑。在这篇文档中我们将创建一个管理用户数据的简单应用,最终你将指导如何使用Ext JS 4应用架构去组织你的应用。对系统架构来说,提供结构和保持一致性,与实际的类和framework代码同样重要。遵循我们的惯例可以带来一系列非常重要的好处:所有的应用都以同一种方式工作,所以你只需要学习一次。不同应用之间可以共享代码,因为他们都以同种方式工作你可以用我们的build工具来创建你的系统的优化版本供production使用1. 文件结构------------------------------------------------------------------------------------------------------------Ext JS 4对所有应用定义相同的目录结构。关于应用的基本文件结构的详细解释请参考Getting Started Guide. 应用MVC结构,所有的类都在app/文件夹下,依次包含子文件夹来命名你的models, views, controllers和stores。以下是我们做完这个简单的例子后,最终的文件结构:在这个例子里,我们将整个application放到”account_manager”文件夹下,Ext JS 4 SDK里的必要文件放到 ext-4/文件夹下。因此我们的index.hmtl内容如下:htmlheadtitleAccount Manager/titlelinkrel=stylesheettype=text/csshref=ext-4/resources/css/ext-all.cssscripttype=text/javascriptsrc=ext-4/ext-debug.js/scriptscripttype=text/javascriptsrc=app.js/script/headbody/body/html2.在app.js里创建项目Ext JS 4的所有应用都以Application这个实例作为入口。Application里包含你的应用的全局设置(例如应用的名称),并且维护此应用中所有models, views 和controllers的引用。Application同事包含launch方法,这个方法在加载时自动运行。现在让我们创建一个简单的Account Manager应用来帮助我们管理用户账号。首先我们定义一个全局namespace。所有Ext JS的应用程序应该只使用一个单一的全局变量,应用所有的类都嵌套在这个全局变量中。通常我们希望这个全局变量短一点,所以在这个例子里我们使用“AM“:Ext.application({ requires: [Ext.container.Viewport], name: AM,appFolder: app, launch: function() {Ext.create(Ext.container.Viewport, { layout: fit, items: [ {xtype: panel, title: Users, html : List of users will go here }
您可能关注的文档
- Expressing names of Chinese Dishes如何表达中国菜名.ppt
- Extjs_4.2.0_MVC教程.docx
- extJS4中文API 学习教程.doc
- Extjs3.0 经典权威指南.doc
- EXTRA益达英语广告.ppt
- extreme sports 北师大版.ppt
- extreme sports 极限运动.ppt
- Extract from The Lion the Witch and the ward robe狮子女巫和衣橱.ppt
- extreme sports 专英ppt.ppt
- eye contact 广州版unit2 more practice.ppt
- 四川省德阳市罗江中学2025届高三考前热身化学试卷含解析.doc
- 山东省枣庄现代实验学校2025届高三下学期第五次调研考试化学试题含解析.doc
- 吉林省长春市十一高中等九校教育联盟2025届高三一诊考试生物试卷含解析.doc
- 2025届江苏省盐城市伍佑中学高考仿真模拟化学试卷含解析.doc
- 2025届广西贺州中学高考冲刺押题(最后一卷)生物试卷含解析.doc
- 安徽省池州市贵池区2025届高三第一次模拟考试生物试卷含解析.doc
- 宁夏银川一中2025届高三(最后冲刺)化学试卷含解析.doc
- 广东省广州市增城区四校联考2025届高考压轴卷化学试卷含解析.doc
- 2025届邯郸市第一中学高考生物必刷试卷含解析.doc
- 2025届安徽省安庆市石化第一中学高考仿真卷化学试卷含解析.doc
文档评论(0)