ExtJS 6.2.1快速入门
福生无量
自强不息,厚德载物。
展开
-
01_Ext JS入门
欢迎来到Ext JS快速开发指南!在这篇指南里,我们将大致讲解一下最重要的核心概念。这些核心概念是你成为一个高效的Ext JS开发者所需要理解的。在每一篇文章中,我们会分析一个能正常运行的示例,然后再讨论其它的新概念。我们会用每个部分的程序生成一个公司目录程序,你可以使用我们的Fiddle工具下载这个公司目录程序。 让我们看一下一个用Ext JS现代浏览器工发工具开发的简单程序,以此为开发翻译 2017-04-17 19:09:44 · 523 阅读 · 0 评论 -
06_数据表单
使用表单显示数据,是一种让用户查看并修改记录值的非常棒的途径。在这部分示例中,我们将通过显示一个窗体来对行的tap事件作出响应。最后,我们会用记录中的数据来填充表单。Ext.Viewport.add({ xtype: 'tabpanel', items: [{ title: 'Employee Directory', xtype: 'gr翻译 2017-04-27 11:11:47 · 446 阅读 · 0 评论 -
05_事件处理
事件是Ext JS框架中非常重要的一部分。“事件”通知我们在程序中已经发生了某些事情。这些通知可以由很多行为发出。Ext.Viewport.add({ xtype: 'tabpanel', items: [{ title: 'Employee Directory', xtype: 'grid', iconCls: 'x-翻译 2017-04-24 18:28:54 · 507 阅读 · 0 评论 -
04_展示数据
展示数据数据驱动组件是Ext JS最强大的特性之一,比如grid组件。通过将组件与数据源连接,你可以创建随数据改变而改变的动态程序。你可以用很多种方法为组件提供数据。其中一个简单的方法是直接使用内联数据。Ext.Viewport.add({ xtype: 'tabpanel', items: [{ title: 'Employee Directory',翻译 2017-04-24 14:04:59 · 343 阅读 · 0 评论 -
03_容器
在这一章节,我们将把panel组件换成tabpanel组件,并讨论容器的相关功能!容器也是组件,它是被设计用来盛放和管理它的子组件的。Ext.Viewport.add({ xtype: 'tabpanel', items: [{ title: 'Employee Directory', iconCls: 'x-fa fa-users'翻译 2017-04-21 16:26:29 · 324 阅读 · 0 评论 -
11_有用的资源
有用的资源在你自学之前,你或许想看一下这些有用的资源,以确认你的Ext JS学习之路会有强有力的资源支撑。Fiddle你可以通过Fiddle工具(http://fiddle.sencha.com/)深入检测框架。Fiddle允许你操作一个极其简单的入门应用,然后立即就可以在预览面板里看到所作的更改。为了寻找灵感,你可以通过检测我们的示例程序来作为Filldle的入门。示例我们的翻译 2017-05-02 19:44:13 · 543 阅读 · 0 评论 -
10_部署到生产环境
部署到生产环境或许你已经注意到,我们之前创建的应用都是用在线代码工具在一个页面生成的。作为入门开始,这是一个不错的选择。但真实应用并不需要加载框架中所有的类。例如,如果你不需要表格,你或许就不想浪费资料去加载框架中表格的源代码。幸运地是,我们为你准备了一套工具!它叫做Sencha Cmd。Cmd是一套工具系统,它允许你使用框架的子集创建应用程序,这个子集是基于你程序中实际用到的组件。通过做翻译 2017-05-02 19:18:29 · 1645 阅读 · 0 评论 -
02_组件(Components)
让我们从分析Ext JS内部的基本组件来开始学习Ext JS。Ext.Viewport.add({ xtype: 'panel', html: 'Hello World!'});上面的代码似乎看起来很熟悉。让我们继续研究一下这具代码的代表意义。你可以从我们的代码中看到,我们添加了一个对象到一个叫做Viewport的东西里(视窗,敬请期待后续说明)。这个被添加的对翻译 2017-04-20 13:45:13 · 443 阅读 · 0 评论 -
09_组合在一起
组合在一起从我们的’Hello World’程序开始,我们已经取得了很大进展!稍微发挥一点想象力并作一些调整,我们的程序将会成为一件十分有用的东西。让我们加快推进开发,让我们把这个程序变为一个更有用的公司目录程序。https://fiddle.sencha.com/#fiddle/1dma我们已经对前面的示例作了如下调整:l 调整了第二个tab选项卡以使它包含公司的关于信息。翻译 2017-05-02 14:20:39 · 359 阅读 · 0 评论 -
08_代码结构
Ext JS鼓励用户使用结构化的程序架构。在我们的示例中,我们使用了MVC(Model/View/Controller)的方式。这能让我们保持程序的数据,逻辑跟视图(即界面)相分离。Ext.define('Employees', { extend: 'Ext.data.Store', alias: 'store.employees', data: [{翻译 2017-04-28 18:48:46 · 624 阅读 · 0 评论 -
Ext.app.Application简介
版本:6.2.1简述:代表性的ExtJS应用程序,通常是用Ext.container.Viewport创建的经典的单页面应用程序。一个程序由一个或多个视图(View)组成。视图的行为表现由它对应的视图控制器(Ext.app.ViewController)和视图模型(Ext.app.ViewModel)管理。全局的活动是由控制器(Ext.app.Controller)来调整的,这翻译 2017-04-12 11:31:58 · 6266 阅读 · 0 评论 -
07_数据绑定
数据绑定(Data Binding)组件的绑定是将组件的配置与数据建立连接的一个过程。这能让数据的改变自动更新与之相关的组件的配置属性值。在一些情况下,这些配置值可以被终端用户操作而改变,比如文本框的值。这些属性默认情况下都是双向绑定的,以便配置属性的改变可以更新绑定数据的改变。任何组件的配置属性都可以被绑定,只要它有一个setter方法。此例中,我们将绑定我们记录的firstName字段翻译 2017-04-27 16:14:01 · 335 阅读 · 0 评论