Extjs4特性介绍二

a_alter — Fri, 06 Apr 2012 06:32:00 GMT

Mixins

官方文档介绍

This is a new approach to plugging custom functionality into existing classes. The new mixins config, included during instantiation of a class, allows you to "mix in" new capabilities to the class prototype. This is similar to the existing Ext.override function, although it does not replace existing methods like override does, it simply augments the prototype with whatever is new.

== java override ，不过支持多继承。相同方法取最后实现。

Statics

静态字段和方法定义块。

Ext.define('Person',{
   statics:{
      staticAttribute:'静态变量'，
      staticFunction:function(){
        // 静态方法
      }
   }
});

alert(Person.staticAttribute);

Config

这个理解为 java 的pojo中的变量，可以自动生成以下方法，以下代码摘官方文档。

usage

Ext.define('MyClass', {
    config: {
        title: 'Default Title'
    }
});

自动生成以下代码

title: 'Default Title',

getTitle: function() {
    return this.title;
},

resetTitle: function() {
    this.setTitle('Default Title');
},

setTitle: function(newTitle) {
   this.title = this.applyTitle(newTitle) || newTitle;
},

applyTitle: function(newTitle) {
    // custom code here
    // e.g. Ext.get('titleEl').update(newTitle);
}

检测用户的使用环境相关见API文档

Ext.env.Browser
Ext.env.FeatureDetector
Ext.env.OS

a_alter 2012-04-06 14:32 发表评论

ExtJS4 -- 动态加载

a_alter — Fri, 06 Apr 2012 05:25:00 GMT

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'],

});

a_alter 2012-04-06 13:25 发表评论

BlogJava-享受编程，融入其中，了解本质-文章分类-ExtJs