Posted on 2012-04-06 13:25
a_alter 閱讀(768)
評論(0) 編輯 收藏 所屬分類:
ExtJs
ExtJS4 新特性
- Ext.define to create class definitions within the new system
- Automatic dependency management and dynamic class loading
- Mixins
- Statics
- New config option for Automatic setter / getter generation
Library Inclusion methods
When you unzip the Ext JS 4 download, you will see the following files:
-
ext-debug.js - This file is only for use during development. It provides the minimum number of core Ext JS classes needed to get up and running. Any additional classes should be dynamically loaded as separate files as demonstrated above.
-
ext.js - same as ext-debug.js but minified for use in production. Meant to be used in combination with your application's app-all.js file. (see section 3)
-
ext-all-debug.js - This file contains the entire Ext JS library. This can be helpful for shortening your initial learning curve, however ext-debug.js is preferred in most cases for actual application development.
-
ext-all.js - This is a minified version of ext-all-debug.js that can be used in production environments, however, it is not recommended since most applications will not make use of all the classes that it contains. Instead it is recommended that you create a custom build for your production environment as described in section 3.
了解不同js的使用定位
Class Loading
Ext 4 now includes a robust dynamic class loading system that also provides integrated dependency management. Again, this is an optional feature, but provides a couple of key benefits:
-
Dynamic loading: Classes can be loaded dynamically and asynchronously at runtime simply based on the dependency tree that Ext manages internally. This means that you can stop managing brittle blocks of manual include tags in HTML pages and simply let the class loader figure out what your page needs to run. This is mostly useful in the development environment when dependency flexibility is more important than page load speed.
-
Dynamic build generation: For production, it's usually preferable still to compile down to a single (or few) build files. Since Ext now understands the entire dependency graph at runtime, it can easily output that graph as needed (for example, in the form of a custom build configuration). And even more importantly, this capability is not restricted to the Ext namespace. You can include any number of custom classes and namespaces in addition to Ext and as long as everything is defined using the class system Ext will be able to figure out how they all relate. In the very near future, any Ext developer will have one-click custom build capability that automatically manages the entire Ext + custom application class graph, even as it changes from one minute to the next, and only builds exactly what's actually needed by the app.
This dynamic loading is enabled simply by using Ext.define and by defining the dependencies in code using two new class properties:
- requires: The class dependencies required for a class to work. These are guaranteed to be loaded prior to the current class being instantiated.
- uses: Optional class dependencies that are used by, but not required by, a class. These can be loaded asynchronously and do not have to be available for the class to be instantiated.
第一種方式
Ext.require([
'Ext.grid.*',
'Ext.data.*',
'Ext.util.*',
]);
第二種方式
Ext.define('Ext.window.Window', {
extend: 'Ext.panel.Panel',
alternateClassName: 'Ext.Window',
requires: ['Ext.util.ComponentDragger', 'Ext.util.Region', 'Ext.EventManager'],
});