Modifying the Application (修改application)
The application we've just created is extremely minimal: it only displays a message box! Even so, it is helpful to look at the generated code. If you look in "index.html" you won't see any visual HTML content. This is because Ext JS is a "JavaScript-first" framework. That is to say, the user interface and its logic are all defined in JavaScript. The necessary styling is provided by the various included themes (such as Material).
While direct authoring of HTML is not necessary, you can of course add Ext JS to existing pages and create components inside hand-written HTML documents. Since this is not necessary to create applications in Ext JS, this guide will not explore that approach further.
Ext JS is a class-based, object-oriented framework. There are many hundreds of classes provided by Ext JS that you can use or extend to create your application. These classes range from non-visual classes that manage data and server communication to user interface components that provide powerful functionality. By creating your own classes based on these components, you can concentrate on making a compelling application.
The starting point of an Ext JS application is app.js (as specified in app.json). The generated app.js file looks something like this:
刚刚我们创建的application实在是太小了：它只不过展示了一个详细框！尽管如此，观察一下生成的代码还是很有帮助的。如果你看了"index.html"，你会发现里面没有任何课件的HTML内容。这是因为Ext JS是一个"JavaScript-first"的框架。也就是说，用户界面和逻辑都是用JavaScript定义的。而必要的样式都是由主题提供的。
尽管直接编辑HTML没有必要，但是你当然可以把ExtJS添加进一个HTML页面并在手写的HTML文件中创建组件。但是那在ExtJS中是没有必要的，本文并不会在这个方面做延伸的探讨。
Ext JS是基于类，面对对象的框架。Ext JS提供了上百个类供你使用或者扩展，以此来创建你的application。这些类包括一些用来管理数据还有服务器 和 用户界面组件之间的通信，从而提供强大的功能的不可视的类。通过在这些组件的基础上创建属于你自己的类，你可以把注意力都放在构造一个引人入胜的application。
一个Ext JS程序最出发点是app.js(在app.json中指定)。生成的app.js代码参考(可能会有不同)如下：
Ext.application({
name: 'MyApp',
requires: [
'Ext.MessageBox'
],
launch: function () {
Ext.Msg.alert('Hello Ext JS', 'Hello! Welcome to Ext JS.');
}
});
The Ext.application method informs Ext JS about your application. In this case, this is just a name and a launch method. We also describe the classes we are using in the application with "requires".
Once the required classes are loaded and the browser is ready, the launch method is called. This is where the application performs its startup sequence. To get things started, let's define an application class and our main view.
Ext.application() 方法向Ext JS描述了你的程序。这种情况下，只有一个name属性和一个launch方法。我们把程序中要使用的类用requires属性来描述。
一当要使用的类被加载完成并且浏览器已经就绪，那么launch方法将会被调用。这就是application所展示的启动顺序。所以动起来，让我们定义一个application类和我们的主界面。
The Application Class (application 类)
By default the Ext.application() method creates a basic application instance, but most applications will need to customize this and provide their own top-level logic. For example, applications typically need to handle things like deep-linking and the browser's Forward and Back buttons (commonly called "routing"). While this guide will not address these issues, it is a best practice to have an Application class, so let's create a bare-bones version:
Ext.application() 方法默认创建一个基本的 application 实例，但是大多数的applications需要自定义这个实例，并提供上层逻辑。比如applications需要解决路由问题(浏览器的前进和后退按钮)。尽管本文并不会涉及这个问题，但是这确实是一个了解application很好的练习，所以让我们来创建一个大概的版本。
./app/Application.js
Ext.define('MyApp.Application', {
extend: 'Ext.app.Application',
mainView: 'MyApp.view.main.Main'
});
This application does not require special logic at launch, so we have replaced the launch method with the mainView config property. The inherited launch method will create an instance of this class.
Aside: Config properties are special properties declared by Ext JS classes that are similar to the attributes of HTML elements (such as "disabled" or "value"). These config properties (or just "configs") can be specified on the class body (as above) or passed in the "config object" which is the single argument to the constructor.
Now that we have an Application class, app.js should be changed to match:
这个application的lauch方法并不需要包含特定的逻辑，随之我们用mainView配置属性来替换lauch函数。继承的launch方法将会创建这个类的实例。
旁白：配置属性是由Ext JS类声明的特殊属性，和HTML元素的属性(比如 “disabled” ,“value”)很相似。这些配置属性(或者“配置”)可以在类的主体部分(就如上面代码的mainView配置属性)指定，或者传入作为构造器唯一的参数——“配置对象”当中。
由于我们有了这样一个application类，那么app.js也要相应地改变成下面这样子：
Ext.application({
name: 'MyApp',
extend: 'MyApp.Application', // <<== added
requires: [
'MyApp.*' // tell Cmd to include all app classes
]
});
The Main View (主页面)
The class name we've chosen for the main view is "MyApp.view.main.Main", so by convention we will create the JavaScript file './app/view/main/Main.js'. The "app" folder is where Sencha Cmd looks for application classes (as configured by app.json). Views are placed in "app/view". The reason for the "main" directory will become clear when we add a controller and styling to the view as these files will also be placed in this directory.
A common main view for many applications is a tab panel, so let's start by extending this class for our main view:
我们为主页面选择的类名为"MyApp.view.main.Main"，所以根据惯例，我们将创建 './app/view/main/Main.js' JavaScript 文件。Sencha Cmd在"app"文件夹中找寻application类(在app.json中配置好的)。页面被放置在"app/view"中。为什么是"main"目录而不是其他目录的呢？因为在我们把controller(控制器)和styling(样式)添加到页面上时这些文件也将同时被放置在"app/view"当中。
很多application的主页面是一个tab panel，所以让我们为主页面，而在这个类上做一些扩展。
./app/view/main/Main.js
Ext.define('MyApp.view.main.Main', {
extend: 'Ext.tab.Panel',
requires: [
'Ext.Button'
],
items: [{
title: 'Home',
html: '<h1 class="main-banner">Hello World!</h1>',
items: [{
xtype: 'button',
text: 'Go'
}]
}, {
title: 'Notifications'
}, {
title: 'Settings'
}]
});
A tab panel is a specialized container. A container is simply a component that contains other components. These child components (typically called "items") are added to the container by assigning the "items" config. In the above, the tab panel extends the basic container class and adds a tab bar to enable the user to switch between its child items.
一个tab panel是一个专门的容器(container)。一个容器就是一个可以包含其他组件(子组件)的组件。子组件(一般的称为"items")通过指定"items"属性来来添加到容器当中。在上面的代码中，tab panel继承了basic container 类并添加了一个tab bar使得用户可以在子组件中自由切换。效果图(MyApp.jpg)见下：
MyApp.jpg
Adding a Controller (添加一个控制器)
We've added some content to the Home tab: some HTML and a button component. This is also why we added the "requires" for the Ext.Button class. This allows us to use its "xtype" in the items of the Home tab. An "xtype" is a component alias much like the tag name of an HTML element.
This button, however, is rather inert. Clicks do nothing but ripple the button. To add logic, we need a handler method. With Ext JS we can write this handler directly in the view, but this is discouraged. Instead we put this code in a controller.
我们已经在Home tab添加了一些内容：一些HTML文本和一个按钮组件。这也是我们为什么为Ext.Button类添加requires属性。这也使得我们可以在Home tab的items属性中使用Ext.Button类的“xype”。“xtype”是组件的别名，很像HTML元素的标签名。
然而，这个按钮现在并没有什么卵用。点击它只是会让它波动一下而已。为了在按钮上加上逻辑，我们需要一个处理函数(handler mothod)。在Ext JS的帮助下，我们可以直接在view中编写处理函数，但是我们并不鼓励这样做。作为替代的，我们把处理函数写进一个控制器(controller)中。
./app/view/main/MainController.js
Ext.define('MyApp.view.main.MainController', {
extend: 'Ext.app.ViewController',
alias: 'controller.main',
requires: [
'Ext.MessageBox'
],
onGo: function () {
Ext.Msg.alert('Go', 'From main view controller');
}
});
This class extends ViewController and is thus a controller suitable for controlling views. We've also assigned it the alias "controller.main". This alias allows us to easily associate the controller to our main view:
这个类扩展了ViewController从而使得controller可以控制views。同时我们把它的别名指定为"controller.main"。这个别名使得我们可以很轻易地把控制器和我们的main view联系起来。
Ext.define('MyApp.view.main.Main', {
extend: 'Ext.tab.Panel',
controller: 'main', // <<== added
...
Now we can direct the Go button to the onGo handler in the controller:
现在我们可以把Go按钮指定给controller中的onGo处理函数。
...
items: [{
xtype: 'button',
text: 'Go',
handler: 'onGo' // <<== added
}]
This is very similar to how one would add an onclick attribute to a button HTML element. In this case, the method is located using the provided name and looking upwards (from the button) to find the controller.
这和把onclick属性添加到HTML按钮元素上十分类似。在这种情况下，方法使用给定的名字来定位，并向上层(从按钮开始)去寻找控制器。
网友评论