没有合适的资源?快使用搜索试试~ 我知道了~
首页Sencha Touch 2 官方文档(英文)
资源详情
资源评论
资源推荐

Getting Started with Sencha Touch 2
Contents
1. What is Sencha Touch?
2. Things you'll need
3. Starting your app
4. Next Steps
What is Sencha Touch?
Sencha Touch enables you to quickly and easily create HTML-5 based mobile apps that
work on Android, iOS, and Blackberry devices and produce a native-app-like experience
inside a browser.
Things you'll need
Here's what you need to get started:
•
The free Sencha Touch 2.0 SDK, currently in beta
•
A web server running locally on your computer
•
A modern web browser; Chrome or Safari are recommended
Download and unzip the latest version of the SDK. Place the unzipped folder into your
web server's document root. If you don't have a web server or aren't sure, we recommend
using a simple one-click installer like WAMP or MAMP.
Once you have the folder in the right place just open your web browser, point it to
http://localhost/sencha-touch-folder (or wherever your web server is configured to serve
from) and you should see the Sencha Touch Welcome page. If that's all working you're
ready to start your first app.
Starting your app
Sencha Touch apps work best when they follow the simple application structure
guidelines we provide. This is a small set of conventions and classes that make writing
maintainable apps simpler, especially when you work as part of a team.
The first step is to set up the simple folder structure that will house the app. Initially all you
need is two files and a copy of Sencha Touch. By convention, these are:

•
index.html - a simple HTML file that includes Sencha Touch and your application file
•
app.js - a file where you define the app name, home screen icon, and what it's
supposed to do on launch
•
touch - a copy of the downloaded Sencha Touch folder
Let's start with the index.html file. Here's what it looks like:
<!DOCTYPE html>
<html>
<head>
<title>Getting Started</title>
<link rel="stylesheet"
href="touch/resources/css/sencha-touch.css"
type="text/css">
<script type="text/javascript"
src="touch/builds/sencha-touch-all-debug.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body></body>
</html>
This is probably one of the simplest HTML pages you'll ever write. All it does is include
Sencha Touch (the JavaScript file and its stylesheet), and your app.js. Note that the body
is empty - we'll let Sencha Touch fill that up.
Next, let's look at the contents of our app.js file. We'll keep things simple to start and just
call
alert
to make sure everything's working:
Code Editor
Live Preview
Select Code
Ext.application({
name: 'Sencha',
launch: function() {
alert('launched');
}
});
That's all you need to get started. Now, launch Safari or Chrome and make sure it works
as expected. You can also click the small Preview icon next to the example above to run it.

So far it doesn't do very much, but the fact that the alert message pops up means Sencha
Touch is on the page and the app launched.
The last thing we're going to do is create a Panel with the time-honored Hello World. This
is really simple, all we need to do is update our launch function to use Ext.create, like this:
Code Editor
Live Preview
Select Code
Ext.application({
name: 'Sencha',
launch: function() {
Ext.create('Ext.Panel', {
fullscreen: true,
html: 'Hello World'
});
}
});
Next Steps
Now that we've put together the simplest of pages and achieved Hello World, it's time to
create our first simple app. The next step is to go through the First Application guide,
which builds on what you've just done and builds a simple but powerful app in around 15
minutes.
If you'd like to skip ahead or find out more detailed information about other aspects of the
framework we recommend checking out the following guides and resources:
Guides
•
Components and Containers
•
Intro to Applications
•
The Layout System
•
The Data Package
•
What's New in Sencha Touch 2
Application Examples

•
Kitchen Sink
•
Twitter
•
Kiva
Component Examples
•
Carousel
•
Forms
•
Date Picker
Comments
View 2 comments
What's New in Sencha Touch 2.0
Contents
1. Welcome to Sencha Touch 2
2. Smaller, faster layout engine
3. Stronger, smarter core
4. Class system and apps
5. Improved MVC Capabilities
6. Much better Android support
7. Native packaging
8. Overhauled docs
Here's a list of the new features and functionality in Sencha Touch 2.0 that were not part
of the earlier versions.
Note: This guide is a work in progress and does not cover all new Sencha Touch 2
functionality. Check back frequently for updates. Sencha Touch 2 is currently in Developer
Preview. Expect there to be bugs, missing features, and incomplete documentation.
Welcome to Sencha Touch 2
Sencha Touch was the first HTML5 mobile framework and 2.0 is its most significant
upgrade. The foremost focus of the release is performance -- getting apps running fast on
as many devices as possible. Apps start up much faster, provide a much snappier initial
render and layout, and lay out again immediately when a device is roatated. Among the
other significant enhancements:
•
A brand new scroller, optimized for each platform and faster than ever - especially on
Android devices. We've optimized the rendering process and have applied
innovative techniques to reuse existing components without having to instantiate
new ones.

•
Many innovations from Ext JS 4, including the advanced new class system,
reconfigurable components, and improvements to application architecture.
•
Increased support for a wider range of devices with reduced emphasis on WebKit
and a more robust platform that we can use to support more devices over time.
Here's a closer look at these and other enhancements introduced with Sencha Touch 2.0.
Smaller, faster layout engine
Sencha Touch offers a very flexible layout system that makes it easy to lay out apps for a
variety of device shapes and sizes. Version 2 brings a layout engine that runs much more
like the browser's optimized CSS engine. The result is enormously improved performance
in several key areas:
•
Apps render and lay out faster on startup
•
Updating the screen after rotating the device is much faster than with Sencha Touch
1.x apps
•
Layout engine is much smaller, resulting in faster download
All of the layout configuration options from Sencha Touch 1 continue to work with the new
layout engine so you don't have to change a line of code.
The result is massively improved layout performance across the board. Screens pop onto
the page much faster when navigating through the app, giving a much more fluid
experience. The most dramatic improvement occurs when a device changes orientation.
The new layout engine is so fast we had to use a high-speed camera to measure it. Here’s
the Kitchen Sink buttons example running on 1.x and 2.x, slowed down to one quarter
speed:
Stronger, smarter core
剩余149页未读,继续阅读






安全验证
文档复制为VIP权益,开通VIP直接复制

评论2