<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Ext 4 Overview Guide</title>
<link rel="stylesheet" href="resources/css/screen.css" type="text/css" media="screen, projection">
<!--link rel="stylesheet" href="resources/css/fancy-type.css" type="text/css" media="screen"-->
<link rel="stylesheet" href="resources/css/link-icons.css" type="text/css" media="screen">
<link rel="stylesheet" href="resources/css/print.css" type="text/css" media="print">
<!--[if lt IE 8]>
<link rel="stylesheet" href="resources/css/ie.css" type="text/css" media="screen, projection">
<![endif]-->
<link rel="stylesheet" href="resources/css/ext-guide.css" type="text/css" media="screen, projection">
</head>
<body id="overview-guide">
<div class="container">
<div class="span-24" id="hd">
<img src="resources/images/logo-sencha-sm.png" alt="Sencha" height="50" width ="120" />
</div>
<div class="span-24">
<h1 id="intro">Ext 4 Overview Guide</h1>
<p>Ext 4 is a revolutionary step forward in web app development. Almost every major component within the framework has been improved, in many cases drastically so. There are also many components and subsystems that are brand new since Ext 3. This guide will provide an introduction to all major changes between Ext 3 and 4.</p>
<p>If you are migrating an application from Ext 3 we also have a detailed <a href="ext3-to-4-migration.html">Ext 3 to 4 Migration Guide</a>.</p>
<p id="forum-link">If you find any issues in this document or would like to provide feedback, please visit the <a href="http://www.sencha.com/forum/showthread.php?124015-Ext-3-to-4-Migration" title="Ext 3 to 4 Migration">Ext 3 to 4 Migration</a> thread in the Sencha forums.</p>
</div>
<div class="span-24">
<h1>General</h1>
<p>These changes apply across both <a href="#ext-core">Ext Core</a> and <a href="#extjs">Ext JS</a>.</p>
<h2 id="general-compat">Ext 3 Compatibility</h2>
<p>Ext 4 is by far the most comprehensive update to Ext JS that we've ever produced, and many changes were required that are not compatible with Ext 3. However, we've gone to great lengths to provide as much backwards-compatibility as possible.</p>
<h3>JS Compatibility Layer</h3>
<p>This is an optional JavaScript file that can be referenced after Ext 4 is loaded that will provide the aliases and overrides necessary to make the vast majority of Ext 3 code run correctly under Ext 4 as-is.</p>
<p><strong>NOTE:</strong> At the moment this compatibility layer is not yet available, but it will be prior to the final 4.0 release.</p>
<h3 id="general-sandbox">Sandbox Mode</h3>
<p>Ext 4 has introduced changes that now make it possible to completely sandbox previous versions of the framework alongside Ext 4 within the same page. On the JavaScript side, this is possible with the removal of all prototypal enhancements to core JavaScript objects in Ext 4. Now you can simply alias the global <tt>Ext</tt> object to a different name and be completely isolated from previous Ext versions.</p>
<p>On the markup/CSS side of things, Ext 4 now uses CSS generated from templates using Compass & SASS, so it is trivial to customize the prefix of all CSS rules defined by the framework. Combined with the new <tt>Ext.baseCSSPrefix</tt> property, it is now extremely easy to isolate markup generated from multiple versions of Ext on a single page.</p>
<h2 id="general-package">Package & Namespace Updates</h2>
<p>All classes and packages have been restructured according to a strict naming convention. This makes classes more consistent and easier to find. For example, in Ext 3 classes like Button, CycleButton and SplitButton are simply grouped under /widgets (along with many other classes). The classes are also defined directly on the global Ext object.</p>
<p>In Ext 4, every class has been consistently placed into packages and namespaces based on related functionality. This is not entirely new, but was never consistently enforced in Ext 3. Back to the Button example above, in Ext 4 these classes are now:</p>
<ul>
<li>Grouped into a single <tt>src/button/</tt> package at the file level</li>
<li>Grouped into a new <tt>Ext.button</tt> namespace in code</li>
<li>Renamed based on the new namspaces (e.g., <tt>Ext.SplitButton</tt> → <tt>Ext.button.Split</tt>)</li>
</ul>
<p>All classes that were reorganized are still available via the new <tt>alternateClassName</tt> property, so Ext 3 classnames will still work under Ext 4 if necessary (e.g. <tt>alternateClassName: 'Ext.SplitButton'</tt>). <em>Going forward with Ext 4 development it's recommended that you migrate to the new conventions in your own code</em>.</p>
</div>
<div class="span-24" id="ext-core">
<h1>Ext Core</h1>
<h2 id="class-system">New Class System</h2>
<div class="resource-box">
<h3>Resources</h3>
<p><a href="http://www.sencha.com/blog/countdown-to-ext-js-4-dynamic-loading-and-new-class-system">Overview blog post & demo</a></p>
</div>
<p>Ext of course is already built on a powerful prototype-based class system, which approximates a traditional OO-based class system. In Ext 4 we've taken our class system to a new level of flexibility with the addition of many key features, and best of all the changes are 100% backwards-compatible with the Ext 3 class system. The main new features are:</p>
<ul>
<li><tt>Ext.define</tt> to create class definitions within the new system</li>
<li>Automatic dependency management and dynamic class loading</li>
<li>Mixins</li>
<li>Statics</li>
<li>New <tt>config</tt> option for Automatic setter / getter generation</li>
</ul>
<img class="diagram" src="resources/images/ext4-class-system.jpg" alt="Ext 4 Class System" height="541" width="645" />
<h3 id="class-definition">Class Definition</h3>
<p>You can still use the tried and true <tt>new ClassName()</tt> syntax in Ext 4, but the preferred syntax going forward is to use the new <tt>Ext.define</tt> function to define new classes. By defining classes explicitly within the Ext class system all of the additional class features in the following sections become enabled. The <tt>new</tt> keyword will still work, but without those benefits.</p>
<p>An additional benefit of using <tt>Ext.define</tt> is that it will automatically detect and create new namespaces as needed, without the need for explicitly defining the namespaces separately from declaring the classes that use them.</p>
<p>Here's a simple example of the old and new syntax for how you would define a custom class that extends an existing Ext component:</p>
<pre><code>
// Ext 3:
Ext.ns('MyApp'); // required in Ext 3
MyApp.CustomerPanel = Ext.extend(Ext.Panel, {
// etc.
});
// Ext 4
Ext.define('MyApp.CustomerPanel', {
extend: 'Ext.panel.Panel',
// etc.
});
</code></pre>
<h3 id="class-loading">Class Loading</h3>
<p>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:</p>
<ul>
<li><strong>Dynamic loading</strong>: 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 <tt>include</tt> 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.</li>
<li><strong>Dynamic build generation</strong>: 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
ext-3-to-4-migration-pack.zip
4星 · 超过85%的资源 需积分: 9 40 浏览量
2014-05-16
08:15:52
上传
评论
收藏 310KB ZIP 举报 
ext-3-to-4-migration-pack.zip （57个子文件） 
compatibility guides 
ext3-to-4-migration.html 28KB index.html 44KB resources css 
print.css 1KB ext-guide.css 2KB ie.css 2KB icons 
pdf.png 591B doc.png 777B im.png 741B xls.png 663B email.png 641B feed.png 691B visited.png 46KB external.png 46KB screen.css 12KB fancy-type.css 2KB link-icons.css 1KB images 
._ext4-class-system.jpg 70B ext4-class-system.jpg 37KB
working-with-charts.gif 115KB logo-sencha-sm.png 2KB ._working-with-charts.gif 70B ext3-compat.js 133KB example 4.0 migration OrderWindow.js 2KB NavTree.js 1KB Dashboard.js 2KB OrdersTab.js 2KB App.js 4KB OrdersGrid.js 768B index.html 2KB shared app.css 624B app-logo.png 2KB nav-tree.json 131B 3.x-compat index.html 2KB classes MigrationDashboard.js 3KB MigrationNavTree.js 733B MigrationOrdersGrid.js 847B MigrationOrdersTab.js 2KB MigrationOrderWindow.js 2KB app.js 4KB 3.3.1 index.html 1KB classes MigrationDashboard.js 1KB MigrationNavTree.js 646B MigrationOrdersGrid.js 754B MigrationOrdersTab.js 1KB MigrationOrderWindow.js 2KB app.js 5KB images box corners.gif 1005B l.gif 810B r.gif 810B tb.gif 839B tb-blue.gif 851B l-blue.gif 810B corners-blue.gif 1010B r-blue.gif 810B ext3-core-compat.js 33KB README.html 1000B ext3-compat.css 3KB资源评论
ZaneZhou01252017-12-19下载看看.....- dali20032014-05-31还好吧，有一定的学习价值
