feed.xml

<?xml version="1.0" encoding="UTF-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
  <title>Blog Name</title>
  <subtitle>Blog subtitle</subtitle>
  <id>http://blog.url.com/</id>
  <link href="http://blog.url.com/"/>
  <link href="http://blog.url.com/feed.xml" rel="self"/>
  <updated>2012-09-03T00:00:00Z</updated>
  <author>
    <name>Blog Author</name>
  </author>
  <entry>
    <title>建立你的第一个Sencha Touch应用程序</title>
    <link rel="alternate" href="/blog/2012/09/03/building-your-first-sencha-touch-app/"/>
    <id>/blog/2012/09/03/building-your-first-sencha-touch-app/</id>
    <published>2012-09-03T00:00:00Z</published>
    <updated>2012-09-03T00:00:00Z</updated>
    <author>
      <name>Article Author</name>
    </author>
    <summary type="html">&lt;p&gt;&lt;strong&gt;声明&lt;/strong&gt;：本文翻译自Sencha Touch官方文档。&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;英文原版地址&lt;/strong&gt;：&lt;a href="http://docs.sencha.com/touch/2-0/#!/guide/first_app"&gt;http://docs.sencha.com/touch/2-0/#!/guide/first_app&lt;/a&gt;&lt;/p&gt;
&lt;h3 id='toc_'&gt;准备开始&lt;/h3&gt;
&lt;p&gt;本指南是建立在的&lt;a href="/blog/2012/08/31/getting-started-with-sencha-touch-2/"&gt;Sencha Touch 2入门指南&lt;/a&gt;基础上，能帮助你快速的设置好SDK，并确保你的环境工作正常。如果你还没有设置好SDK，建议去阅读&lt;a href="/blog/2012/08/31/getting-started-with-sencha-touch-2/"&gt;Sencha Touch 2入门指南&lt;/a&gt;（只需要花费你几分钟的时间），然后你就可以回到这里来创建你的第一个应用程序。&lt;/p&gt;
</summary>
    <content type="html">&lt;p&gt;&lt;strong&gt;声明&lt;/strong&gt;：本文翻译自Sencha Touch官方文档。&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;英文原版地址&lt;/strong&gt;：&lt;a href="http://docs.sencha.com/touch/2-0/#!/guide/first_app"&gt;http://docs.sencha.com/touch/2-0/#!/guide/first_app&lt;/a&gt;&lt;/p&gt;
&lt;h3 id='toc_'&gt;准备开始&lt;/h3&gt;
&lt;p&gt;本指南是建立在的&lt;a href="/blog/2012/08/31/getting-started-with-sencha-touch-2/"&gt;Sencha Touch 2入门指南&lt;/a&gt;基础上，能帮助你快速的设置好SDK，并确保你的环境工作正常。如果你还没有设置好SDK，建议去阅读&lt;a href="/blog/2012/08/31/getting-started-with-sencha-touch-2/"&gt;Sencha Touch 2入门指南&lt;/a&gt;（只需要花费你几分钟的时间），然后你就可以回到这里来创建你的第一个应用程序。&lt;/p&gt;
&lt;h3 id='toc_'&gt;我们要构建的是什么&lt;/h3&gt;
&lt;p&gt;今天，我们要构建一个简单的应用程序类似于移动网站，它可用于你公司的移动网站。我们将添加一个主页，联系方式和一个简单的列表来获取我们最近的博客文章，并让我们的访客可以在他们的手机进行阅读。&lt;/p&gt;

&lt;p&gt;这是我们要构建的（你可以自己尝试，这是很有必要的）&lt;/p&gt;
&lt;div class="highlight javascript"&gt;&lt;div class="ribbon"&gt;&lt;/div&gt;&lt;table class="CodeRay"&gt;&lt;tr&gt;
  &lt;td class="line-numbers" title="double click to toggle" ondblclick="with (this.firstChild.style) { display = (display == '') ? 'none' : '' }"&gt;&lt;pre&gt;1
2
3
4
5
6
7
8
9
&lt;strong&gt;10&lt;/strong&gt;
11
12
13
14
15
16
17
18
19
&lt;strong&gt;20&lt;/strong&gt;
21
22
23
24
25
26
27
28
29
&lt;strong&gt;30&lt;/strong&gt;
31
32
33
34
35
36
37
38
39
&lt;strong&gt;40&lt;/strong&gt;
41
42
43
44
45
46
47
48
49
&lt;strong&gt;50&lt;/strong&gt;
51
52
53
54
55
56
57
58
59
&lt;strong&gt;60&lt;/strong&gt;
61
62
63
64
65
66
67
68
69
&lt;strong&gt;70&lt;/strong&gt;
71
72
73
74
75
76
77
78
79
&lt;strong&gt;80&lt;/strong&gt;
81
82
83
84
85
86
87
88
89
&lt;strong&gt;90&lt;/strong&gt;
91
92
93
94
95
96
97
98
99
&lt;strong&gt;100&lt;/strong&gt;
101
102
103
104
105
106
107
108
109
&lt;strong&gt;110&lt;/strong&gt;
111
112
113
114
&lt;/pre&gt;&lt;/td&gt;
  &lt;td class="code"&gt;&lt;pre&gt;Ext.application({
    &lt;span class="key"&gt;name&lt;/span&gt;: &lt;span class="string"&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;span class="content"&gt;Sencha&lt;/span&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;/span&gt;,
    &lt;span class="function"&gt;launch&lt;/span&gt;: &lt;span class="keyword"&gt;function&lt;/span&gt;() {
        &lt;span class="comment"&gt;//The whole app UI lives in this tab panel&lt;/span&gt;
        Ext.Viewport.add({
            &lt;span class="key"&gt;xtype&lt;/span&gt;: &lt;span class="string"&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;span class="content"&gt;tabpanel&lt;/span&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;/span&gt;,
            &lt;span class="key"&gt;fullscreen&lt;/span&gt;: &lt;span class="predefined-constant"&gt;true&lt;/span&gt;,
            &lt;span class="key"&gt;tabBarPosition&lt;/span&gt;: &lt;span class="string"&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;span class="content"&gt;bottom&lt;/span&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;/span&gt;,
            &lt;span class="key"&gt;items&lt;/span&gt;: [
                &lt;span class="comment"&gt;// This is the home page, just some simple html&lt;/span&gt;
                {
                    &lt;span class="key"&gt;title&lt;/span&gt;: &lt;span class="string"&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;span class="content"&gt;Home&lt;/span&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;/span&gt;,
                    &lt;span class="key"&gt;iconCls&lt;/span&gt;: &lt;span class="string"&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;span class="content"&gt;home&lt;/span&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;/span&gt;,
                    &lt;span class="key"&gt;cls&lt;/span&gt;: &lt;span class="string"&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;span class="content"&gt;home&lt;/span&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;/span&gt;,
                    &lt;span class="key"&gt;html&lt;/span&gt;: [
                        &lt;span class="string"&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;span class="content"&gt;&amp;lt;img height=260 src=&amp;quot;http://staging.sencha.com/img/sencha.png&amp;quot; /&amp;gt;&lt;/span&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;/span&gt;,
                        &lt;span class="string"&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;span class="content"&gt;&amp;lt;h1&amp;gt;Welcome to Sencha Touch&amp;lt;/h1&amp;gt;&lt;/span&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;/span&gt;,
                        &lt;span class="string"&gt;&lt;span class="delimiter"&gt;&amp;quot;&lt;/span&gt;&lt;span class="content"&gt;&amp;lt;p&amp;gt;Building the Getting Started app&amp;lt;/p&amp;gt;&lt;/span&gt;&lt;span class="delimiter"&gt;&amp;quot;&lt;/span&gt;&lt;/span&gt;,
                        &lt;span class="string"&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;span class="content"&gt;&amp;lt;h2&amp;gt;Sencha Touch (2.0.0)&amp;lt;/h2&amp;gt;&lt;/span&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;/span&gt;
                    ].join(&lt;span class="string"&gt;&lt;span class="delimiter"&gt;&amp;quot;&lt;/span&gt;&lt;span class="delimiter"&gt;&amp;quot;&lt;/span&gt;&lt;/span&gt;)
                },
                &lt;span class="comment"&gt;// This is the recent blogs page. It uses a tree store to load its data from blog.json&lt;/span&gt;
                {
                    &lt;span class="key"&gt;xtype&lt;/span&gt;: &lt;span class="string"&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;span class="content"&gt;nestedlist&lt;/span&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;/span&gt;,
                    &lt;span class="key"&gt;title&lt;/span&gt;: &lt;span class="string"&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;span class="content"&gt;Blog&lt;/span&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;/span&gt;,
                    &lt;span class="key"&gt;iconCls&lt;/span&gt;: &lt;span class="string"&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;span class="content"&gt;star&lt;/span&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;/span&gt;,
                    &lt;span class="key"&gt;cls&lt;/span&gt;: &lt;span class="string"&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;span class="content"&gt;blog&lt;/span&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;/span&gt;,
                    &lt;span class="key"&gt;displayField&lt;/span&gt;: &lt;span class="string"&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;span class="content"&gt;title&lt;/span&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;/span&gt;,
                    &lt;span class="key"&gt;store&lt;/span&gt;: {
                        &lt;span class="key"&gt;type&lt;/span&gt;: &lt;span class="string"&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;span class="content"&gt;tree&lt;/span&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;/span&gt;,
                        &lt;span class="key"&gt;fields&lt;/span&gt;: [&lt;span class="string"&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;span class="content"&gt;title&lt;/span&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;/span&gt;, &lt;span class="string"&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;span class="content"&gt;link&lt;/span&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;/span&gt;, &lt;span class="string"&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;span class="content"&gt;author&lt;/span&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;/span&gt;, &lt;span class="string"&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;span class="content"&gt;contentSnippet&lt;/span&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;/span&gt;, &lt;span class="string"&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;span class="content"&gt;content&lt;/span&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;/span&gt;, {
                            &lt;span class="key"&gt;name&lt;/span&gt;: &lt;span class="string"&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;span class="content"&gt;leaf&lt;/span&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;/span&gt;,
                            &lt;span class="key"&gt;defaultValue&lt;/span&gt;: &lt;span class="predefined-constant"&gt;true&lt;/span&gt;
                        }],
                        &lt;span class="key"&gt;root&lt;/span&gt;: {
                            &lt;span class="key"&gt;leaf&lt;/span&gt;: &lt;span class="predefined-constant"&gt;false&lt;/span&gt;
                        },
                        &lt;span class="key"&gt;proxy&lt;/span&gt;: {
                            &lt;span class="key"&gt;type&lt;/span&gt;: &lt;span class="string"&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;span class="content"&gt;jsonp&lt;/span&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;/span&gt;,
                            &lt;span class="key"&gt;url&lt;/span&gt;: &lt;span class="string"&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;span class="content"&gt;https://ajax.googleapis.com/ajax/services/feed/load?v=1.0&amp;amp;q=http://feeds.feedburner.com/SenchaBlog&lt;/span&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;/span&gt;,
                            &lt;span class="key"&gt;reader&lt;/span&gt;: {
                                &lt;span class="key"&gt;type&lt;/span&gt;: &lt;span class="string"&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;span class="content"&gt;json&lt;/span&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;/span&gt;,
                                &lt;span class="key"&gt;rootProperty&lt;/span&gt;: &lt;span class="string"&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;span class="content"&gt;responseData.feed.entries&lt;/span&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;/span&gt;
                            }
                        }
                    },
                    &lt;span class="key"&gt;detailCard&lt;/span&gt;: {
                        &lt;span class="key"&gt;xtype&lt;/span&gt;: &lt;span class="string"&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;span class="content"&gt;panel&lt;/span&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;/span&gt;,
                        &lt;span class="key"&gt;scrollable&lt;/span&gt;: &lt;span class="predefined-constant"&gt;true&lt;/span&gt;,
                        &lt;span class="key"&gt;styleHtmlContent&lt;/span&gt;: &lt;span class="predefined-constant"&gt;true&lt;/span&gt;
                    },
                    &lt;span class="key"&gt;listeners&lt;/span&gt;: {
                        &lt;span class="function"&gt;itemtap&lt;/span&gt;: &lt;span class="keyword"&gt;function&lt;/span&gt;(nestedList, list, index, element, post) {
                            &lt;span class="local-variable"&gt;this&lt;/span&gt;.getDetailCard().setHtml(post.get(&lt;span class="string"&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;span class="content"&gt;content&lt;/span&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;/span&gt;));
                        }
                    }
                },
                &lt;span class="comment"&gt;// This is the contact page, which features a form and a button. The button submits the form&lt;/span&gt;
                {
                    &lt;span class="key"&gt;xtype&lt;/span&gt;: &lt;span class="string"&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;span class="content"&gt;formpanel&lt;/span&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;/span&gt;,
                    &lt;span class="key"&gt;title&lt;/span&gt;: &lt;span class="string"&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;span class="content"&gt;Contact Us&lt;/span&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;/span&gt;,
                    &lt;span class="key"&gt;iconCls&lt;/span&gt;: &lt;span class="string"&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;span class="content"&gt;user&lt;/span&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;/span&gt;,
                    &lt;span class="key"&gt;url&lt;/span&gt;: &lt;span class="string"&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;span class="content"&gt;contact.php&lt;/span&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;/span&gt;,
                    &lt;span class="key"&gt;layout&lt;/span&gt;: &lt;span class="string"&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;span class="content"&gt;vbox&lt;/span&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;/span&gt;,
                    &lt;span class="key"&gt;items&lt;/span&gt;: [
                        {
                            &lt;span class="key"&gt;xtype&lt;/span&gt;: &lt;span class="string"&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;span class="content"&gt;fieldset&lt;/span&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;/span&gt;,
                            &lt;span class="key"&gt;title&lt;/span&gt;: &lt;span class="string"&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;span class="content"&gt;Contact Us&lt;/span&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;/span&gt;,
                            &lt;span class="key"&gt;instructions&lt;/span&gt;: &lt;span class="string"&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;span class="content"&gt;Email address is optional&lt;/span&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;/span&gt;,
                            &lt;span class="key"&gt;items&lt;/span&gt;: [
                                {
                                    &lt;span class="key"&gt;xtype&lt;/span&gt;: &lt;span class="string"&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;span class="content"&gt;textfield&lt;/span&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;/span&gt;,
                                    &lt;span class="key"&gt;label&lt;/span&gt;: &lt;span class="string"&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;span class="content"&gt;Name&lt;/span&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;/span&gt;,
                                    &lt;span class="key"&gt;name&lt;/span&gt;: &lt;span class="string"&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;span class="content"&gt;name&lt;/span&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;/span&gt;
                                },
                                {
                                    &lt;span class="key"&gt;xtype&lt;/span&gt;: &lt;span class="string"&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;span class="content"&gt;emailfield&lt;/span&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;/span&gt;,
                                    &lt;span class="key"&gt;label&lt;/span&gt;: &lt;span class="string"&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;span class="content"&gt;Email&lt;/span&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;/span&gt;,
                                    &lt;span class="key"&gt;name&lt;/span&gt;: &lt;span class="string"&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;span class="content"&gt;email&lt;/span&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;/span&gt;
                                },
                                {
                                    &lt;span class="key"&gt;xtype&lt;/span&gt;: &lt;span class="string"&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;span class="content"&gt;textareafield&lt;/span&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;/span&gt;,
                                    &lt;span class="key"&gt;label&lt;/span&gt;: &lt;span class="string"&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;span class="content"&gt;Message&lt;/span&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;/span&gt;,
                                    &lt;span class="key"&gt;name&lt;/span&gt;: &lt;span class="string"&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;span class="content"&gt;message&lt;/span&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;/span&gt;,
                                    &lt;span class="key"&gt;height&lt;/span&gt;: &lt;span class="integer"&gt;90&lt;/span&gt;
                                }
                            ]
                        },
                        {
                            &lt;span class="key"&gt;xtype&lt;/span&gt;: &lt;span class="string"&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;span class="content"&gt;button&lt;/span&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;/span&gt;,
                            &lt;span class="key"&gt;text&lt;/span&gt;: &lt;span class="string"&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;span class="content"&gt;Send&lt;/span&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;/span&gt;,
                            &lt;span class="key"&gt;ui&lt;/span&gt;: &lt;span class="string"&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;span class="content"&gt;confirm&lt;/span&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;/span&gt;,
                            &lt;span class="comment"&gt;// The handler is called when the button is tapped&lt;/span&gt;
                            &lt;span class="function"&gt;handler&lt;/span&gt;: &lt;span class="keyword"&gt;function&lt;/span&gt;() {
                                &lt;span class="comment"&gt;// This looks up the items stack above, getting a reference to the first form it see&lt;/span&gt;
                                &lt;span class="keyword"&gt;var&lt;/span&gt; form = &lt;span class="local-variable"&gt;this&lt;/span&gt;.up(&lt;span class="string"&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;span class="content"&gt;formpanel&lt;/span&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;/span&gt;);
                                &lt;span class="comment"&gt;// Sends an AJAX request with the form data to the url specified above (contact.php).&lt;/span&gt;
                                &lt;span class="comment"&gt;// The success callback is called if we get a non-error response from the server&lt;/span&gt;
                                form.submit({
                                    &lt;span class="function"&gt;success&lt;/span&gt;: &lt;span class="keyword"&gt;function&lt;/span&gt;() {
                                        &lt;span class="comment"&gt;// The callback function is run when the user taps the 'ok' button&lt;/span&gt;
                                        Ext.Msg.alert(&lt;span class="string"&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;span class="content"&gt;Thank You&lt;/span&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;/span&gt;, &lt;span class="string"&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;span class="content"&gt;Your message has been received&lt;/span&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;/span&gt;, &lt;span class="keyword"&gt;function&lt;/span&gt;() {
                                            form.reset();
                                        });
                                    }
                                });
                            }
                        }
                    ]
                }
            ]
        });
    }
});&lt;/pre&gt;&lt;/td&gt;
&lt;/tr&gt;&lt;/table&gt;
&lt;/div&gt;&lt;h3 id='toc_'&gt;开始我们的应用程序&lt;/h3&gt;
&lt;p&gt;我们需要做的第一件事情就是建立我们的应用程序，就像我们在&lt;a href="/blog/2012/08/31/getting-started-with-sencha-touch-2/"&gt;Sencha Touch 2 入门指南&lt;/a&gt;中学习的一样。应用程序使用一个&lt;a href="http://docs.sencha.com/touch/2-0/#!/api/Ext.tab.Panel%5D"&gt;标签面板&lt;/a&gt;，面板中放置4个页面，现在让我们开始：&lt;/p&gt;
&lt;div class="highlight javascript"&gt;&lt;div class="ribbon"&gt;&lt;/div&gt;&lt;table class="CodeRay"&gt;&lt;tr&gt;
  &lt;td class="line-numbers" title="double click to toggle" ondblclick="with (this.firstChild.style) { display = (display == '') ? 'none' : '' }"&gt;&lt;pre&gt;1
2
3
4
5
6
7
8
9
&lt;strong&gt;10&lt;/strong&gt;
11
12
13
14
15
&lt;/pre&gt;&lt;/td&gt;
  &lt;td class="code"&gt;&lt;pre&gt;Ext.application({
    &lt;span class="key"&gt;name&lt;/span&gt;: &lt;span class="string"&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;span class="content"&gt;Sencha&lt;/span&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;/span&gt;,
    &lt;span class="function"&gt;launch&lt;/span&gt;: &lt;span class="keyword"&gt;function&lt;/span&gt;() {
        Ext.create(&lt;span class="string"&gt;&lt;span class="delimiter"&gt;&amp;quot;&lt;/span&gt;&lt;span class="content"&gt;Ext.tab.Panel&lt;/span&gt;&lt;span class="delimiter"&gt;&amp;quot;&lt;/span&gt;&lt;/span&gt;, {
            &lt;span class="key"&gt;fullscreen&lt;/span&gt;: &lt;span class="predefined-constant"&gt;true&lt;/span&gt;,
            &lt;span class="key"&gt;items&lt;/span&gt;: [
                {
                    &lt;span class="key"&gt;title&lt;/span&gt;: &lt;span class="string"&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;span class="content"&gt;Home&lt;/span&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;/span&gt;,
                    &lt;span class="key"&gt;iconCls&lt;/span&gt;: &lt;span class="string"&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;span class="content"&gt;home&lt;/span&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;/span&gt;,
                    &lt;span class="key"&gt;html&lt;/span&gt;: &lt;span class="string"&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;span class="content"&gt;Welcome&lt;/span&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;/span&gt;
                }
            ]
        });
    }
});&lt;/pre&gt;&lt;/td&gt;
&lt;/tr&gt;&lt;/table&gt;
&lt;/div&gt;
&lt;p&gt;如果你在浏览器中运行这个程序，在屏幕的顶部应该会出现一个&lt;a href="http://docs.sencha.com/touch/2-0/#!/api/Ext.tab.Panel%5D"&gt;标签面板&lt;/a&gt;。让我们给它添加一些内容，并将标签栏放在底部，使得这个主页更受欢迎。我们通过配置&lt;a href="http://docs.sencha.com/touch/2-0/#!/api/Ext.tab.Panel-cfg-tabBarPosition"&gt;tabBarPosition&lt;/a&gt;，并增加了一点的HTML内容来实现：&lt;/p&gt;
&lt;div class="highlight javascript"&gt;&lt;div class="ribbon"&gt;&lt;/div&gt;&lt;table class="CodeRay"&gt;&lt;tr&gt;
  &lt;td class="line-numbers" title="double click to toggle" ondblclick="with (this.firstChild.style) { display = (display == '') ? 'none' : '' }"&gt;&lt;pre&gt;1
2
3
4
5
6
7
8
9
&lt;strong&gt;10&lt;/strong&gt;
11
12
13
14
15
16
17
18
19
&lt;strong&gt;20&lt;/strong&gt;
21
22
&lt;/pre&gt;&lt;/td&gt;
  &lt;td class="code"&gt;&lt;pre&gt;Ext.application({
    &lt;span class="key"&gt;name&lt;/span&gt;: &lt;span class="string"&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;span class="content"&gt;Sencha&lt;/span&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;/span&gt;,
    &lt;span class="function"&gt;launch&lt;/span&gt;: &lt;span class="keyword"&gt;function&lt;/span&gt;() {
        Ext.create(&lt;span class="string"&gt;&lt;span class="delimiter"&gt;&amp;quot;&lt;/span&gt;&lt;span class="content"&gt;Ext.tab.Panel&lt;/span&gt;&lt;span class="delimiter"&gt;&amp;quot;&lt;/span&gt;&lt;/span&gt;, {
            &lt;span class="key"&gt;fullscreen&lt;/span&gt;: &lt;span class="predefined-constant"&gt;true&lt;/span&gt;,
            &lt;span class="key"&gt;tabBarPosition&lt;/span&gt;: &lt;span class="string"&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;span class="content"&gt;bottom&lt;/span&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;/span&gt;,
            &lt;span class="key"&gt;items&lt;/span&gt;: [
                {
                    &lt;span class="key"&gt;title&lt;/span&gt;: &lt;span class="string"&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;span class="content"&gt;Home&lt;/span&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;/span&gt;,
                    &lt;span class="key"&gt;iconCls&lt;/span&gt;: &lt;span class="string"&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;span class="content"&gt;home&lt;/span&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;/span&gt;,
                    &lt;span class="key"&gt;html&lt;/span&gt;: [
                        &lt;span class="string"&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;span class="content"&gt;&amp;lt;img src=&amp;quot;http://staging.sencha.com/img/sencha.png&amp;quot; /&amp;gt;&lt;/span&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;/span&gt;,
                        &lt;span class="string"&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;span class="content"&gt;&amp;lt;h1&amp;gt;Welcome to Sencha Touch&amp;lt;/h1&amp;gt;&lt;/span&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;/span&gt;,
                        &lt;span class="string"&gt;&lt;span class="delimiter"&gt;&amp;quot;&lt;/span&gt;&lt;span class="content"&gt;&amp;lt;p&amp;gt;You're creating the Getting Started app. This demonstrates how &lt;/span&gt;&lt;span class="delimiter"&gt;&amp;quot;&lt;/span&gt;&lt;/span&gt;,
                        &lt;span class="string"&gt;&lt;span class="delimiter"&gt;&amp;quot;&lt;/span&gt;&lt;span class="content"&gt;to use tabs, lists and forms to create a simple app&amp;lt;/p&amp;gt;&lt;/span&gt;&lt;span class="delimiter"&gt;&amp;quot;&lt;/span&gt;&lt;/span&gt;,
                        &lt;span class="string"&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;span class="content"&gt;&amp;lt;h2&amp;gt;Sencha Touch (2.0.0)&amp;lt;/h2&amp;gt;&lt;/span&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;/span&gt;
                    ].join(&lt;span class="string"&gt;&lt;span class="delimiter"&gt;&amp;quot;&lt;/span&gt;&lt;span class="delimiter"&gt;&amp;quot;&lt;/span&gt;&lt;/span&gt;)
                }
            ]
        });
    }
});&lt;/pre&gt;&lt;/td&gt;
&lt;/tr&gt;&lt;/table&gt;
&lt;/div&gt;
&lt;p&gt;现在你可以点击例子边上的预览按钮来查看（请访问原文出处查看），你应该能看到一些HTML内容，当它不太好看。我们将添加一个&lt;code&gt;cls&lt;/code&gt;配置，把它添加到面板上。通过增加一个CSS类，我们可以让这个网页的内容看起来更好看。我们添加的CSS在SDK的&lt;code&gt;examples/getting_started/index.html&lt;/code&gt;中。现在让我们刷新我们的页面，看现在变成什么样子了：&lt;/p&gt;
&lt;div class="highlight javascript"&gt;&lt;div class="ribbon"&gt;&lt;/div&gt;&lt;table class="CodeRay"&gt;&lt;tr&gt;
  &lt;td class="line-numbers" title="double click to toggle" ondblclick="with (this.firstChild.style) { display = (display == '') ? 'none' : '' }"&gt;&lt;pre&gt;1
2
3
4
5
6
7
8
9
&lt;strong&gt;10&lt;/strong&gt;
11
12
13
14
15
16
17
18
19
&lt;strong&gt;20&lt;/strong&gt;
21
22
23
&lt;/pre&gt;&lt;/td&gt;
  &lt;td class="code"&gt;&lt;pre&gt;Ext.application({
    &lt;span class="key"&gt;name&lt;/span&gt;: &lt;span class="string"&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;span class="content"&gt;Sencha&lt;/span&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;/span&gt;,
    &lt;span class="function"&gt;launch&lt;/span&gt;: &lt;span class="keyword"&gt;function&lt;/span&gt;() {
        Ext.create(&lt;span class="string"&gt;&lt;span class="delimiter"&gt;&amp;quot;&lt;/span&gt;&lt;span class="content"&gt;Ext.tab.Panel&lt;/span&gt;&lt;span class="delimiter"&gt;&amp;quot;&lt;/span&gt;&lt;/span&gt;, {
            &lt;span class="key"&gt;fullscreen&lt;/span&gt;: &lt;span class="predefined-constant"&gt;true&lt;/span&gt;,
            &lt;span class="key"&gt;tabBarPosition&lt;/span&gt;: &lt;span class="string"&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;span class="content"&gt;bottom&lt;/span&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;/span&gt;,
            &lt;span class="key"&gt;items&lt;/span&gt;: [
                {
                    &lt;span class="key"&gt;title&lt;/span&gt;: &lt;span class="string"&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;span class="content"&gt;Home&lt;/span&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;/span&gt;,
                    &lt;span class="key"&gt;iconCls&lt;/span&gt;: &lt;span class="string"&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;span class="content"&gt;home&lt;/span&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;/span&gt;,
                    &lt;span class="key"&gt;cls&lt;/span&gt;: &lt;span class="string"&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;span class="content"&gt;home&lt;/span&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;/span&gt;,
                    &lt;span class="key"&gt;html&lt;/span&gt;: [
                        &lt;span class="string"&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;span class="content"&gt;&amp;lt;img src=&amp;quot;http://staging.sencha.com/img/sencha.png&amp;quot; /&amp;gt;&lt;/span&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;/span&gt;,
                        &lt;span class="string"&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;span class="content"&gt;&amp;lt;h1&amp;gt;Welcome to Sencha Touch&amp;lt;/h1&amp;gt;&lt;/span&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;/span&gt;,
                        &lt;span class="string"&gt;&lt;span class="delimiter"&gt;&amp;quot;&lt;/span&gt;&lt;span class="content"&gt;&amp;lt;p&amp;gt;You're creating the Getting Started app. This demonstrates how &lt;/span&gt;&lt;span class="delimiter"&gt;&amp;quot;&lt;/span&gt;&lt;/span&gt;,
                        &lt;span class="string"&gt;&lt;span class="delimiter"&gt;&amp;quot;&lt;/span&gt;&lt;span class="content"&gt;to use tabs, lists and forms to create a simple app&amp;lt;/p&amp;gt;&lt;/span&gt;&lt;span class="delimiter"&gt;&amp;quot;&lt;/span&gt;&lt;/span&gt;,
                        &lt;span class="string"&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;span class="content"&gt;&amp;lt;h2&amp;gt;Sencha Touch 2&amp;lt;/h2&amp;gt;&lt;/span&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;/span&gt;
                    ].join(&lt;span class="string"&gt;&lt;span class="delimiter"&gt;&amp;quot;&lt;/span&gt;&lt;span class="delimiter"&gt;&amp;quot;&lt;/span&gt;&lt;/span&gt;)
                }
            ]
        });
    }
});&lt;/pre&gt;&lt;/td&gt;
&lt;/tr&gt;&lt;/table&gt;
&lt;/div&gt;&lt;h3 id='toc_'&gt;增加博客页面&lt;/h3&gt;
&lt;p&gt;现在，我们有一个看上去很不错的主页，让我们继续下一个页面。为了让每一个页面的代码都遵守相同的规则，我们每次创建一个选项卡，到最后再将它们组合在一起。&lt;/p&gt;

&lt;p&gt;现在，让我们删除第一个选项卡并用一个列表来取代它。我们将使用谷歌的&lt;a href="https://developers.google.com/feed/v1/reference"&gt;Feed API service&lt;/a&gt;来获取资料。这将有更多的代码参与这项工作中，让我们先来看一看它是如何完成的：&lt;/p&gt;
&lt;div class="highlight javascript"&gt;&lt;div class="ribbon"&gt;&lt;/div&gt;&lt;table class="CodeRay"&gt;&lt;tr&gt;
  &lt;td class="line-numbers" title="double click to toggle" ondblclick="with (this.firstChild.style) { display = (display == '') ? 'none' : '' }"&gt;&lt;pre&gt;1
2
3
4
5
6
7
8
9
&lt;strong&gt;10&lt;/strong&gt;
11
12
13
14
15
16
17
18
19
&lt;strong&gt;20&lt;/strong&gt;
21
22
23
24
25
26
27
28
29
&lt;strong&gt;30&lt;/strong&gt;
31
32
33
34
35
36
37
38
39
&lt;strong&gt;40&lt;/strong&gt;
41
42
43
44
45
&lt;/pre&gt;&lt;/td&gt;
  &lt;td class="code"&gt;&lt;pre&gt;Ext.application({
    &lt;span class="key"&gt;name&lt;/span&gt;: &lt;span class="string"&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;span class="content"&gt;Sencha&lt;/span&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;/span&gt;,
    &lt;span class="function"&gt;launch&lt;/span&gt;: &lt;span class="keyword"&gt;function&lt;/span&gt;() {
        Ext.create(&lt;span class="string"&gt;&lt;span class="delimiter"&gt;&amp;quot;&lt;/span&gt;&lt;span class="content"&gt;Ext.tab.Panel&lt;/span&gt;&lt;span class="delimiter"&gt;&amp;quot;&lt;/span&gt;&lt;/span&gt;, {
            &lt;span class="key"&gt;fullscreen&lt;/span&gt;: &lt;span class="predefined-constant"&gt;true&lt;/span&gt;,
            &lt;span class="key"&gt;tabBarPosition&lt;/span&gt;: &lt;span class="string"&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;span class="content"&gt;bottom&lt;/span&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;/span&gt;,
            &lt;span class="key"&gt;items&lt;/span&gt;: [
                {
                    &lt;span class="key"&gt;xtype&lt;/span&gt;: &lt;span class="string"&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;span class="content"&gt;nestedlist&lt;/span&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;/span&gt;,
                    &lt;span class="key"&gt;title&lt;/span&gt;: &lt;span class="string"&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;span class="content"&gt;Blog&lt;/span&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;/span&gt;,
                    &lt;span class="key"&gt;iconCls&lt;/span&gt;: &lt;span class="string"&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;span class="content"&gt;star&lt;/span&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;/span&gt;,
                    &lt;span class="key"&gt;displayField&lt;/span&gt;: &lt;span class="string"&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;span class="content"&gt;title&lt;/span&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;/span&gt;,
                    &lt;span class="key"&gt;store&lt;/span&gt;: {
                        &lt;span class="key"&gt;type&lt;/span&gt;: &lt;span class="string"&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;span class="content"&gt;tree&lt;/span&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;/span&gt;,
                        &lt;span class="key"&gt;fields&lt;/span&gt;: [
                            &lt;span class="string"&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;span class="content"&gt;title&lt;/span&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;/span&gt;, &lt;span class="string"&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;span class="content"&gt;link&lt;/span&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;/span&gt;, &lt;span class="string"&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;span class="content"&gt;author&lt;/span&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;/span&gt;, &lt;span class="string"&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;span class="content"&gt;contentSnippet&lt;/span&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;/span&gt;, &lt;span class="string"&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;span class="content"&gt;content&lt;/span&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;/span&gt;,
                            {&lt;span class="key"&gt;name&lt;/span&gt;: &lt;span class="string"&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;span class="content"&gt;leaf&lt;/span&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;/span&gt;, &lt;span class="key"&gt;defaultValue&lt;/span&gt;: &lt;span class="predefined-constant"&gt;true&lt;/span&gt;}
                        ],
                        &lt;span class="key"&gt;root&lt;/span&gt;: {
                            &lt;span class="key"&gt;leaf&lt;/span&gt;: &lt;span class="predefined-constant"&gt;false&lt;/span&gt;
                        },
                        &lt;span class="key"&gt;proxy&lt;/span&gt;: {
                            &lt;span class="key"&gt;type&lt;/span&gt;: &lt;span class="string"&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;span class="content"&gt;jsonp&lt;/span&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;/span&gt;,
                            &lt;span class="key"&gt;url&lt;/span&gt;: &lt;span class="string"&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;span class="content"&gt;https://ajax.googleapis.com/ajax/services/feed/load?v=1.0&amp;amp;q=http://feeds.feedburner.com/SenchaBlog&lt;/span&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;/span&gt;,
                            &lt;span class="key"&gt;reader&lt;/span&gt;: {
                                &lt;span class="key"&gt;type&lt;/span&gt;: &lt;span class="string"&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;span class="content"&gt;json&lt;/span&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;/span&gt;,
                                &lt;span class="key"&gt;rootProperty&lt;/span&gt;: &lt;span class="string"&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;span class="content"&gt;responseData.feed.entries&lt;/span&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;/span&gt;
                            }
                        }
                    },
                    &lt;span class="key"&gt;detailCard&lt;/span&gt;: {
                        &lt;span class="key"&gt;xtype&lt;/span&gt;: &lt;span class="string"&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;span class="content"&gt;panel&lt;/span&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;/span&gt;,
                        &lt;span class="key"&gt;scrollable&lt;/span&gt;: &lt;span class="predefined-constant"&gt;true&lt;/span&gt;,
                        &lt;span class="key"&gt;styleHtmlContent&lt;/span&gt;: &lt;span class="predefined-constant"&gt;true&lt;/span&gt;
                    },
                    &lt;span class="key"&gt;listeners&lt;/span&gt;: {
                        &lt;span class="function"&gt;itemtap&lt;/span&gt;: &lt;span class="keyword"&gt;function&lt;/span&gt;(nestedList, list, index, element, post) {
                            &lt;span class="local-variable"&gt;this&lt;/span&gt;.getDetailCard().setHtml(post.get(&lt;span class="string"&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;span class="content"&gt;content&lt;/span&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;/span&gt;));
                        }
                    }
                }
            ]
        });
    }
});&lt;/pre&gt;&lt;/td&gt;
&lt;/tr&gt;&lt;/table&gt;
&lt;/div&gt;
&lt;p&gt;你可以点击“代码编辑器”按钮来查看完整的例子代码（原文功能）。接下来，我们将一块一块来分析。我们使用&lt;a href="http://docs.sencha.com/touch/2-0/#!/api/Ext.dataview.NestedList"&gt;nestedlist&lt;/a&gt;来取代了面板，并从&lt;code&gt;sencha.com/blog&lt;/code&gt;中获取最新的博客。我们使用嵌套列表，这样我们通过点击博客题目就可以进入到博客的具体内容。&lt;/p&gt;

&lt;p&gt;让我们分析一下上面的代码，从列表本身开始：&lt;/p&gt;
&lt;div class="highlight javascript"&gt;&lt;div class="ribbon"&gt;&lt;/div&gt;&lt;table class="CodeRay"&gt;&lt;tr&gt;
  &lt;td class="line-numbers" title="double click to toggle" ondblclick="with (this.firstChild.style) { display = (display == '') ? 'none' : '' }"&gt;&lt;pre&gt;1
2
3
4
5
6
7
8
9
&lt;strong&gt;10&lt;/strong&gt;
11
12
13
14
15
16
17
18
19
&lt;strong&gt;20&lt;/strong&gt;
21
22
23
24
25
26
27
28
29
&lt;strong&gt;30&lt;/strong&gt;
31
32
33
34
35
&lt;/pre&gt;&lt;/td&gt;
  &lt;td class="code"&gt;&lt;pre&gt;Ext.application({
    &lt;span class="key"&gt;name&lt;/span&gt;: &lt;span class="string"&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;span class="content"&gt;Sencha&lt;/span&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;/span&gt;,
    &lt;span class="function"&gt;launch&lt;/span&gt;: &lt;span class="keyword"&gt;function&lt;/span&gt;() {
        Ext.create(&lt;span class="string"&gt;&lt;span class="delimiter"&gt;&amp;quot;&lt;/span&gt;&lt;span class="content"&gt;Ext.tab.Panel&lt;/span&gt;&lt;span class="delimiter"&gt;&amp;quot;&lt;/span&gt;&lt;/span&gt;, {
            &lt;span class="key"&gt;fullscreen&lt;/span&gt;: &lt;span class="predefined-constant"&gt;true&lt;/span&gt;,
            &lt;span class="key"&gt;tabBarPosition&lt;/span&gt;: &lt;span class="string"&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;span class="content"&gt;bottom&lt;/span&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;/span&gt;,
            &lt;span class="key"&gt;items&lt;/span&gt;: [
                {
                    &lt;span class="key"&gt;xtype&lt;/span&gt;: &lt;span class="string"&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;span class="content"&gt;nestedlist&lt;/span&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;/span&gt;,
                    &lt;span class="key"&gt;title&lt;/span&gt;: &lt;span class="string"&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;span class="content"&gt;Blog&lt;/span&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;/span&gt;,
                    &lt;span class="key"&gt;iconCls&lt;/span&gt;: &lt;span class="string"&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;span class="content"&gt;star&lt;/span&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;/span&gt;,
                    &lt;span class="key"&gt;displayField&lt;/span&gt;: &lt;span class="string"&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;span class="content"&gt;title&lt;/span&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;/span&gt;,
                    &lt;span class="key"&gt;store&lt;/span&gt;: {
                        &lt;span class="key"&gt;type&lt;/span&gt;: &lt;span class="string"&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;span class="content"&gt;tree&lt;/span&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;/span&gt;,
                        &lt;span class="key"&gt;fields&lt;/span&gt;: [
                            &lt;span class="string"&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;span class="content"&gt;title&lt;/span&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;/span&gt;, &lt;span class="string"&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;span class="content"&gt;link&lt;/span&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;/span&gt;, &lt;span class="string"&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;span class="content"&gt;author&lt;/span&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;/span&gt;, &lt;span class="string"&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;span class="content"&gt;contentSnippet&lt;/span&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;/span&gt;, &lt;span class="string"&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;span class="content"&gt;content&lt;/span&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;/span&gt;,
                            {&lt;span class="key"&gt;name&lt;/span&gt;: &lt;span class="string"&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;span class="content"&gt;leaf&lt;/span&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;/span&gt;, &lt;span class="key"&gt;defaultValue&lt;/span&gt;: &lt;span class="predefined-constant"&gt;true&lt;/span&gt;}
                        ],
                        &lt;span class="key"&gt;root&lt;/span&gt;: {
                            &lt;span class="key"&gt;leaf&lt;/span&gt;: &lt;span class="predefined-constant"&gt;false&lt;/span&gt;
                        },
                        &lt;span class="key"&gt;proxy&lt;/span&gt;: {
                            &lt;span class="key"&gt;type&lt;/span&gt;: &lt;span class="string"&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;span class="content"&gt;jsonp&lt;/span&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;/span&gt;,
                            &lt;span class="key"&gt;url&lt;/span&gt;: &lt;span class="string"&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;span class="content"&gt;https://ajax.googleapis.com/ajax/services/feed/load?v=1.0&amp;amp;q=http://feeds.feedburner.com/SenchaBlog&lt;/span&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;/span&gt;,
                            &lt;span class="key"&gt;reader&lt;/span&gt;: {
                                &lt;span class="key"&gt;type&lt;/span&gt;: &lt;span class="string"&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;span class="content"&gt;json&lt;/span&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;/span&gt;,
                                &lt;span class="key"&gt;rootProperty&lt;/span&gt;: &lt;span class="string"&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;span class="content"&gt;responseData.feed.entries&lt;/span&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;/span&gt;
                            }
                        }
                    }
                }
            ]
        });
    }
});&lt;/pre&gt;&lt;/td&gt;
&lt;/tr&gt;&lt;/table&gt;
&lt;/div&gt;
&lt;p&gt;我们为嵌套列表做几个简单的配置 —— title、iconCls和displayField —— 和一个复杂一些的配置&lt;a href="http://docs.sencha.com/touch/2-0/#!/api/Ext.dataview.NestedList-cfg-store"&gt;store&lt;/a&gt;。Store配置告诉嵌套列表如何获取它的数据。回过头来，让我们看一store的配置:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;&lt;code&gt;type: tree&lt;/code&gt;创建一个NestedList使用的&lt;a href="http://docs.sencha.com/touch/2-0/#!/api/Ext.data.TreeStore"&gt;tree store&lt;/a&gt;。&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;code&gt;fields&lt;/code&gt;指定Store哪些字段是我们在博客中期待读取的数据(如标题、内容、作者等)。&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;code&gt;proxy&lt;/code&gt;指定Store在哪去读取数据。关于&lt;code&gt;proxy&lt;/code&gt;我们会有更详细的讲解，在这就不做太多的解释了。&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;code&gt;root&lt;/code&gt;指定根节点，表明它不是一个叶节点。之前我们已经将叶节点的&lt;code&gt;defaultValue&lt;/code&gt;设置为&lt;code&gt;true&lt;/code&gt;，所以在此我们需要为根节点重新定义。&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;所有&lt;code&gt;Store&lt;/code&gt;的配置，&lt;code&gt;proxy&lt;/code&gt;将完成大部分工作。我们告诉&lt;code&gt;proxy&lt;/code&gt;如何的去使用谷歌的&lt;a href="https://developers.google.com/feed/v1/reference"&gt;Feed API服务&lt;/a&gt;上的资料，并以&lt;code&gt;JSON-P&lt;/code&gt;的格式返回我们的博客上需要的数据。这让我们能够通过我们的应用程序查看并攫取任何博客上的数据（例如将Sencha的博客地址换成&lt;a href="http://rss.slashdot.org/Slashdot/slashdot%EF%BC%8C%E5%B0%B1%E8%83%BD%E8%8E%B7%E5%8F%96Slashdot%E7%9A%84%E8%B5%84%E6%96%99)%E3%80%82"&gt;http://rss.slashdot.org/Slashdot/slashdot，就能获取Slashdot的资料)。&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;code&gt;proxy&lt;/code&gt;定义的最后部分是一个阅读器。阅读器完成的工作是将从Google返回的数据解码成可用的数据。当谷歌传回我们需要的博客数据，他们会把它们放在一个JSON对象里面，它看起来像这样：&lt;/p&gt;
&lt;div class="highlight javascript"&gt;&lt;div class="ribbon"&gt;&lt;/div&gt;&lt;table class="CodeRay"&gt;&lt;tr&gt;
  &lt;td class="line-numbers" title="double click to toggle" ondblclick="with (this.firstChild.style) { display = (display == '') ? 'none' : '' }"&gt;&lt;pre&gt;1
2
3
4
5
6
7
8
9
&lt;/pre&gt;&lt;/td&gt;
  &lt;td class="code"&gt;&lt;pre&gt;{
    &lt;span class="key"&gt;responseData&lt;/span&gt;: {
        &lt;span class="key"&gt;feed&lt;/span&gt;: {
            &lt;span class="key"&gt;entries&lt;/span&gt;: [
                {&lt;span class="key"&gt;author&lt;/span&gt;: &lt;span class="string"&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;span class="content"&gt;Bob&lt;/span&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;/span&gt;, &lt;span class="key"&gt;title&lt;/span&gt;: &lt;span class="string"&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;span class="content"&gt;Great Post&lt;/span&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;/span&gt;, &lt;span class="key"&gt;content&lt;/span&gt;: &lt;span class="string"&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;span class="content"&gt;Really good content...&lt;/span&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;/span&gt;}
            ]
        }
    }
}&lt;/pre&gt;&lt;/td&gt;
&lt;/tr&gt;&lt;/table&gt;
&lt;/div&gt;
&lt;p&gt;我们关心的是&lt;code&gt;entries&lt;/code&gt;数组，所以我们只需要将阅读器的&lt;a href="http://docs.sencha.com/touch/2-0/#!/api/Ext.data.reader.Json-cfg-rootProperty"&gt;rootProperty&lt;/a&gt;属性设置为“responseData.feed.entries&amp;#39;，让框架的完成其余的部分便可。&lt;/p&gt;
&lt;h3 id='toc_'&gt;数据的挖掘&lt;/h3&gt;
&lt;p&gt;现在，我们有了获取和显示数据的嵌套列表，我们需要做的最后一件事就是让用户点击一个标题进行阅读。我们只要添加另外两个配置，就能够让嵌套列表来完成这个功能：&lt;/p&gt;
&lt;div class="highlight javascript"&gt;&lt;div class="ribbon"&gt;&lt;/div&gt;&lt;table class="CodeRay"&gt;&lt;tr&gt;
  &lt;td class="line-numbers" title="double click to toggle" ondblclick="with (this.firstChild.style) { display = (display == '') ? 'none' : '' }"&gt;&lt;pre&gt;1
2
3
4
5
6
7
8
9
&lt;strong&gt;10&lt;/strong&gt;
11
12
13
14
&lt;/pre&gt;&lt;/td&gt;
  &lt;td class="code"&gt;&lt;pre&gt;{
    &lt;span class="key"&gt;xtype&lt;/span&gt;: &lt;span class="string"&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;span class="content"&gt;nestedlist&lt;/span&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;/span&gt;,
    &lt;span class="comment"&gt;//all other configurations as above&lt;/span&gt;
    &lt;span class="key"&gt;detailCard&lt;/span&gt;: {
        &lt;span class="key"&gt;xtype&lt;/span&gt;: &lt;span class="string"&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;span class="content"&gt;panel&lt;/span&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;/span&gt;,
        &lt;span class="key"&gt;scrollable&lt;/span&gt;: &lt;span class="predefined-constant"&gt;true&lt;/span&gt;,
        &lt;span class="key"&gt;styleHtmlContent&lt;/span&gt;: &lt;span class="predefined-constant"&gt;true&lt;/span&gt;
    },
    &lt;span class="key"&gt;listeners&lt;/span&gt;: {
        &lt;span class="function"&gt;itemtap&lt;/span&gt;: &lt;span class="keyword"&gt;function&lt;/span&gt;(nestedList, list, index, element, post) {
            &lt;span class="local-variable"&gt;this&lt;/span&gt;.getDetailCard().setHtml(post.get(&lt;span class="string"&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;span class="content"&gt;content&lt;/span&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;/span&gt;));
        }
    }
}&lt;/pre&gt;&lt;/td&gt;
&lt;/tr&gt;&lt;/table&gt;
&lt;/div&gt;
&lt;p&gt;这里我们刚刚建立了一个&lt;a href="http://docs.sencha.com/touch/2-0/#!/api/Ext.dataview.NestedList-cfg-detailCard"&gt;detailCard&lt;/a&gt;，这是嵌套列表一个很有用的功能，当一个用户点击一个标题的时候，会让你的嵌套列表来显示一个不同的试图。这里我们已经配置我们的&lt;code&gt;detailCard&lt;/code&gt;为一个可滚动&lt;a href="http://docs.sencha.com/touch/2-0/#!/api/Ext.Panel"&gt;Panel&lt;/a&gt;，使用&lt;a href="http://docs.sencha.com/touch/2-0/#!/api/Ext.Panel-cfg-styleHtmlContent"&gt;styleHtmlContent&lt;/a&gt;让文本看起来更友好。&lt;/p&gt;

&lt;p&gt;最后的难题是如何为&lt;a href="http://docs.sencha.com/touch/2-0/#!/api/Ext.dataview.NestedList-event-itemtap"&gt;itemtap&lt;/a&gt;添加事件一个侦听，每一次点击它都能够调用我们的函数。这个函数完成的功能是设置&lt;code&gt;detailCard&lt;/code&gt;的HTML为你点击的博客的内容，如何使用友好的方式将这个详细卡放入试图，并显示这篇博客则由框架来处理。这是为了让这个博客阅读器正常工作，我们必须写的一行代码。&lt;/p&gt;
&lt;h3 id='toc_'&gt;添加联系方式&lt;/h3&gt;
&lt;p&gt;The final thing we&amp;#39;re going to do for our app is create a contact form. We&amp;#39;re just going to take the user&amp;#39;s name, email address and a message, and use a FieldSet to make it look good. The code for this one is simple:&lt;/p&gt;

&lt;p&gt;最后，我们要为我们的应用程序添加一个联系方式。我们需要的是用户的姓名，电子邮件地址和一个消息，并使用&lt;a href="http://docs.sencha.com/touch/2-0/#!/api/Ext.form.FieldSet"&gt;FieldSet&lt;/a&gt;使其更加美观。下面是具体的代码部分：&lt;/p&gt;
&lt;div class="highlight javascript"&gt;&lt;div class="ribbon"&gt;&lt;/div&gt;&lt;table class="CodeRay"&gt;&lt;tr&gt;
  &lt;td class="line-numbers" title="double click to toggle" ondblclick="with (this.firstChild.style) { display = (display == '') ? 'none' : '' }"&gt;&lt;pre&gt;1
2
3
4
5
6
7
8
9
&lt;strong&gt;10&lt;/strong&gt;
11
12
13
14
15
16
17
18
19
&lt;strong&gt;20&lt;/strong&gt;
21
22
23
24
25
26
27
28
29
&lt;strong&gt;30&lt;/strong&gt;
31
32
33
34
35
36
37
38
39
&lt;strong&gt;40&lt;/strong&gt;
41
42
43
44
45
46
47
&lt;/pre&gt;&lt;/td&gt;
  &lt;td class="code"&gt;&lt;pre&gt;Ext.application({
    &lt;span class="key"&gt;name&lt;/span&gt;: &lt;span class="string"&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;span class="content"&gt;Sencha&lt;/span&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;/span&gt;,
    &lt;span class="function"&gt;launch&lt;/span&gt;: &lt;span class="keyword"&gt;function&lt;/span&gt;() {
        Ext.create(&lt;span class="string"&gt;&lt;span class="delimiter"&gt;&amp;quot;&lt;/span&gt;&lt;span class="content"&gt;Ext.tab.Panel&lt;/span&gt;&lt;span class="delimiter"&gt;&amp;quot;&lt;/span&gt;&lt;/span&gt;, {
            &lt;span class="key"&gt;fullscreen&lt;/span&gt;: &lt;span class="predefined-constant"&gt;true&lt;/span&gt;,
            &lt;span class="key"&gt;tabBarPosition&lt;/span&gt;: &lt;span class="string"&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;span class="content"&gt;bottom&lt;/span&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;/span&gt;,
            &lt;span class="key"&gt;items&lt;/span&gt;: [
                {
                    &lt;span class="key"&gt;title&lt;/span&gt;: &lt;span class="string"&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;span class="content"&gt;Contact&lt;/span&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;/span&gt;,
                    &lt;span class="key"&gt;iconCls&lt;/span&gt;: &lt;span class="string"&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;span class="content"&gt;user&lt;/span&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;/span&gt;,
                    &lt;span class="key"&gt;xtype&lt;/span&gt;: &lt;span class="string"&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;span class="content"&gt;formpanel&lt;/span&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;/span&gt;,
                    &lt;span class="key"&gt;url&lt;/span&gt;: &lt;span class="string"&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;span class="content"&gt;contact.php&lt;/span&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;/span&gt;,
                    &lt;span class="key"&gt;layout&lt;/span&gt;: &lt;span class="string"&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;span class="content"&gt;vbox&lt;/span&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;/span&gt;,
                    &lt;span class="key"&gt;items&lt;/span&gt;: [
                        {
                            &lt;span class="key"&gt;xtype&lt;/span&gt;: &lt;span class="string"&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;span class="content"&gt;fieldset&lt;/span&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;/span&gt;,
                            &lt;span class="key"&gt;title&lt;/span&gt;: &lt;span class="string"&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;span class="content"&gt;Contact Us&lt;/span&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;/span&gt;,
                            &lt;span class="key"&gt;instructions&lt;/span&gt;: &lt;span class="string"&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;span class="content"&gt;(email address is optional)&lt;/span&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;/span&gt;,
                            &lt;span class="key"&gt;items&lt;/span&gt;: [
                                {
                                    &lt;span class="key"&gt;xtype&lt;/span&gt;: &lt;span class="string"&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;span class="content"&gt;textfield&lt;/span&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;/span&gt;,
                                    &lt;span class="key"&gt;label&lt;/span&gt;: &lt;span class="string"&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;span class="content"&gt;Name&lt;/span&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;/span&gt;
                                },
                                {
                                    &lt;span class="key"&gt;xtype&lt;/span&gt;: &lt;span class="string"&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;span class="content"&gt;emailfield&lt;/span&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;/span&gt;,
                                    &lt;span class="key"&gt;label&lt;/span&gt;: &lt;span class="string"&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;span class="content"&gt;Email&lt;/span&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;/span&gt;
                                },
                                {
                                    &lt;span class="key"&gt;xtype&lt;/span&gt;: &lt;span class="string"&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;span class="content"&gt;textareafield&lt;/span&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;/span&gt;,
                                    &lt;span class="key"&gt;label&lt;/span&gt;: &lt;span class="string"&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;span class="content"&gt;Message&lt;/span&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;/span&gt;
                                }
                            ]
                        },
                        {
                            &lt;span class="key"&gt;xtype&lt;/span&gt;: &lt;span class="string"&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;span class="content"&gt;button&lt;/span&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;/span&gt;,
                            &lt;span class="key"&gt;text&lt;/span&gt;: &lt;span class="string"&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;span class="content"&gt;Send&lt;/span&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;/span&gt;,
                            &lt;span class="key"&gt;ui&lt;/span&gt;: &lt;span class="string"&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;span class="content"&gt;confirm&lt;/span&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;/span&gt;,
                            &lt;span class="function"&gt;handler&lt;/span&gt;: &lt;span class="keyword"&gt;function&lt;/span&gt;() {
                                &lt;span class="local-variable"&gt;this&lt;/span&gt;.up(&lt;span class="string"&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;span class="content"&gt;formpanel&lt;/span&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;/span&gt;).submit();
                            }
                        }
                    ]
                }
            ]
        });
    }
});&lt;/pre&gt;&lt;/td&gt;
&lt;/tr&gt;&lt;/table&gt;
&lt;/div&gt;
&lt;p&gt;这一次，我们创建一个&lt;a href="http://docs.sencha.com/touch/2-0/#!/api/Ext.form.Panel"&gt;Form&lt;/a&gt;，它包含一个&lt;a href="http://docs.sencha.com/touch/2-0/#!/api/Ext.form.FieldSet"&gt;fieldset&lt;/a&gt;。这个&lt;code&gt;fieldset&lt;/code&gt;包含三个字段：名字、电子邮件和消息。我们使用了&lt;a href="http://docs.sencha.com/touch/2-0/#!/api/Ext.layout.VBox"&gt;VBox&lt;/a&gt;布局，将这些控件垂直排列。&lt;/p&gt;

&lt;p&gt;在屏幕的底部，有一个与点击处理器绑定好的&lt;a href="http://docs.sencha.com/touch/2-0/#!/api/Ext.Button"&gt;Button&lt;/a&gt;。里面通过调用&lt;a href="http://docs.sencha.com/touch/2-0/#!/api/Ext.Container-method-up"&gt;up&lt;/a&gt;方法，获取到这个按钮所在的表单面板的对象。然后，我们只需要调用表单的&lt;a href="http://docs.sencha.com/touch/2-0/#!/api/Ext.form.Panel-method-submit"&gt;submit&lt;/a&gt;方法提交表单，就把表单发送到我们上面指定的URL（“contact.php”）。&lt;/p&gt;
&lt;h3 id='toc_'&gt;代码的集合&lt;/h3&gt;
&lt;p&gt;现在，我们要将我们在上面建立的单独的视图放在一起，这样就能完成我们的应用程序。&lt;/p&gt;
&lt;div class="highlight javascript"&gt;&lt;div class="ribbon"&gt;&lt;/div&gt;&lt;table class="CodeRay"&gt;&lt;tr&gt;
  &lt;td class="line-numbers" title="double click to toggle" ondblclick="with (this.firstChild.style) { display = (display == '') ? 'none' : '' }"&gt;&lt;pre&gt;1
2
3
4
5
6
7
8
9
&lt;strong&gt;10&lt;/strong&gt;
11
12
13
14
15
16
17
18
19
&lt;strong&gt;20&lt;/strong&gt;
21
22
23
24
25
26
27
28
29
&lt;strong&gt;30&lt;/strong&gt;
31
32
33
34
35
36
37
38
39
&lt;strong&gt;40&lt;/strong&gt;
41
42
43
44
45
46
47
48
49
&lt;strong&gt;50&lt;/strong&gt;
51
52
53
54
55
56
57
58
59
&lt;strong&gt;60&lt;/strong&gt;
61
62
63
64
65
66
67
68
69
&lt;strong&gt;70&lt;/strong&gt;
71
72
73
74
75
76
77
78
79
&lt;strong&gt;80&lt;/strong&gt;
81
82
83
84
85
86
87
88
89
&lt;strong&gt;90&lt;/strong&gt;
91
92
93
94
95
&lt;/pre&gt;&lt;/td&gt;
  &lt;td class="code"&gt;&lt;pre&gt;&lt;span class="comment"&gt;//We've added a third and final item to our tab panel - scroll down to see it&lt;/span&gt;
Ext.application({
    &lt;span class="key"&gt;name&lt;/span&gt;: &lt;span class="string"&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;span class="content"&gt;Sencha&lt;/span&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;/span&gt;,
    &lt;span class="function"&gt;launch&lt;/span&gt;: &lt;span class="keyword"&gt;function&lt;/span&gt;() {
        Ext.create(&lt;span class="string"&gt;&lt;span class="delimiter"&gt;&amp;quot;&lt;/span&gt;&lt;span class="content"&gt;Ext.tab.Panel&lt;/span&gt;&lt;span class="delimiter"&gt;&amp;quot;&lt;/span&gt;&lt;/span&gt;, {
            &lt;span class="key"&gt;fullscreen&lt;/span&gt;: &lt;span class="predefined-constant"&gt;true&lt;/span&gt;,
            &lt;span class="key"&gt;tabBarPosition&lt;/span&gt;: &lt;span class="string"&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;span class="content"&gt;bottom&lt;/span&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;/span&gt;,
            &lt;span class="key"&gt;items&lt;/span&gt;: [
                {
                    &lt;span class="key"&gt;title&lt;/span&gt;: &lt;span class="string"&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;span class="content"&gt;Home&lt;/span&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;/span&gt;,
                    &lt;span class="key"&gt;iconCls&lt;/span&gt;: &lt;span class="string"&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;span class="content"&gt;home&lt;/span&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;/span&gt;,
                    &lt;span class="key"&gt;cls&lt;/span&gt;: &lt;span class="string"&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;span class="content"&gt;home&lt;/span&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;/span&gt;,
                    &lt;span class="key"&gt;html&lt;/span&gt;: [
                        &lt;span class="string"&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;span class="content"&gt;&amp;lt;img width=&amp;quot;65%&amp;quot; src=&amp;quot;http://staging.sencha.com/img/sencha.png&amp;quot; /&amp;gt;&lt;/span&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;/span&gt;,
                        &lt;span class="string"&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;span class="content"&gt;&amp;lt;h1&amp;gt;Welcome to Sencha Touch&amp;lt;/h1&amp;gt;&lt;/span&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;/span&gt;,
                        &lt;span class="string"&gt;&lt;span class="delimiter"&gt;&amp;quot;&lt;/span&gt;&lt;span class="content"&gt;&amp;lt;p&amp;gt;You're creating the Getting Started app. This demonstrates how &lt;/span&gt;&lt;span class="delimiter"&gt;&amp;quot;&lt;/span&gt;&lt;/span&gt;,
                        &lt;span class="string"&gt;&lt;span class="delimiter"&gt;&amp;quot;&lt;/span&gt;&lt;span class="content"&gt;to use tabs, lists and forms to create a simple app&amp;lt;/p&amp;gt;&lt;/span&gt;&lt;span class="delimiter"&gt;&amp;quot;&lt;/span&gt;&lt;/span&gt;,
                        &lt;span class="string"&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;span class="content"&gt;&amp;lt;h2&amp;gt;Sencha Touch 2&amp;lt;/h2&amp;gt;&lt;/span&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;/span&gt;
                    ].join(&lt;span class="string"&gt;&lt;span class="delimiter"&gt;&amp;quot;&lt;/span&gt;&lt;span class="delimiter"&gt;&amp;quot;&lt;/span&gt;&lt;/span&gt;)
                },
                {
                    &lt;span class="key"&gt;xtype&lt;/span&gt;: &lt;span class="string"&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;span class="content"&gt;nestedlist&lt;/span&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;/span&gt;,
                    &lt;span class="key"&gt;title&lt;/span&gt;: &lt;span class="string"&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;span class="content"&gt;Blog&lt;/span&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;/span&gt;,
                    &lt;span class="key"&gt;iconCls&lt;/span&gt;: &lt;span class="string"&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;span class="content"&gt;star&lt;/span&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;/span&gt;,
                    &lt;span class="key"&gt;displayField&lt;/span&gt;: &lt;span class="string"&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;span class="content"&gt;title&lt;/span&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;/span&gt;,
                    &lt;span class="key"&gt;store&lt;/span&gt;: {
                        &lt;span class="key"&gt;type&lt;/span&gt;: &lt;span class="string"&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;span class="content"&gt;tree&lt;/span&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;/span&gt;,
                        &lt;span class="key"&gt;fields&lt;/span&gt;: [
                            &lt;span class="string"&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;span class="content"&gt;title&lt;/span&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;/span&gt;, &lt;span class="string"&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;span class="content"&gt;link&lt;/span&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;/span&gt;, &lt;span class="string"&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;span class="content"&gt;author&lt;/span&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;/span&gt;, &lt;span class="string"&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;span class="content"&gt;contentSnippet&lt;/span&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;/span&gt;, &lt;span class="string"&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;span class="content"&gt;content&lt;/span&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;/span&gt;,
                            {&lt;span class="key"&gt;name&lt;/span&gt;: &lt;span class="string"&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;span class="content"&gt;leaf&lt;/span&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;/span&gt;, &lt;span class="key"&gt;defaultValue&lt;/span&gt;: &lt;span class="predefined-constant"&gt;true&lt;/span&gt;}
                        ],
                        &lt;span class="key"&gt;root&lt;/span&gt;: {
                            &lt;span class="key"&gt;leaf&lt;/span&gt;: &lt;span class="predefined-constant"&gt;false&lt;/span&gt;
                        },
                        &lt;span class="key"&gt;proxy&lt;/span&gt;: {
                            &lt;span class="key"&gt;type&lt;/span&gt;: &lt;span class="string"&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;span class="content"&gt;jsonp&lt;/span&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;/span&gt;,
                            &lt;span class="key"&gt;url&lt;/span&gt;: &lt;span class="string"&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;span class="content"&gt;https://ajax.googleapis.com/ajax/services/feed/load?v=1.0&amp;amp;q=http://feeds.feedburner.com/SenchaBlog&lt;/span&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;/span&gt;,
                            &lt;span class="key"&gt;reader&lt;/span&gt;: {
                                &lt;span class="key"&gt;type&lt;/span&gt;: &lt;span class="string"&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;span class="content"&gt;json&lt;/span&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;/span&gt;,
                                &lt;span class="key"&gt;rootProperty&lt;/span&gt;: &lt;span class="string"&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;span class="content"&gt;responseData.feed.entries&lt;/span&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;/span&gt;
                            }
                        }
                    },
                    &lt;span class="key"&gt;detailCard&lt;/span&gt;: {
                        &lt;span class="key"&gt;xtype&lt;/span&gt;: &lt;span class="string"&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;span class="content"&gt;panel&lt;/span&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;/span&gt;,
                        &lt;span class="key"&gt;scrollable&lt;/span&gt;: &lt;span class="predefined-constant"&gt;true&lt;/span&gt;,
                        &lt;span class="key"&gt;styleHtmlContent&lt;/span&gt;: &lt;span class="predefined-constant"&gt;true&lt;/span&gt;
                    },
                    &lt;span class="key"&gt;listeners&lt;/span&gt;: {
                        &lt;span class="function"&gt;itemtap&lt;/span&gt;: &lt;span class="keyword"&gt;function&lt;/span&gt;(nestedList, list, index, element, post) {
                            &lt;span class="local-variable"&gt;this&lt;/span&gt;.getDetailCard().setHtml(post.get(&lt;span class="string"&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;span class="content"&gt;content&lt;/span&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;/span&gt;));
                        }
                    }
                },
                &lt;span class="comment"&gt;//this is the new item&lt;/span&gt;
                {
                    &lt;span class="key"&gt;title&lt;/span&gt;: &lt;span class="string"&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;span class="content"&gt;Contact&lt;/span&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;/span&gt;,
                    &lt;span class="key"&gt;iconCls&lt;/span&gt;: &lt;span class="string"&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;span class="content"&gt;user&lt;/span&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;/span&gt;,
                    &lt;span class="key"&gt;xtype&lt;/span&gt;: &lt;span class="string"&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;span class="content"&gt;formpanel&lt;/span&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;/span&gt;,
                    &lt;span class="key"&gt;url&lt;/span&gt;: &lt;span class="string"&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;span class="content"&gt;contact.php&lt;/span&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;/span&gt;,
                    &lt;span class="key"&gt;layout&lt;/span&gt;: &lt;span class="string"&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;span class="content"&gt;vbox&lt;/span&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;/span&gt;,
                    &lt;span class="key"&gt;items&lt;/span&gt;: [
                        {
                            &lt;span class="key"&gt;xtype&lt;/span&gt;: &lt;span class="string"&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;span class="content"&gt;fieldset&lt;/span&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;/span&gt;,
                            &lt;span class="key"&gt;title&lt;/span&gt;: &lt;span class="string"&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;span class="content"&gt;Contact Us&lt;/span&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;/span&gt;,
                            &lt;span class="key"&gt;instructions&lt;/span&gt;: &lt;span class="string"&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;span class="content"&gt;(email address is optional)&lt;/span&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;/span&gt;,
                            &lt;span class="key"&gt;items&lt;/span&gt;: [
                                {
                                    &lt;span class="key"&gt;xtype&lt;/span&gt;: &lt;span class="string"&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;span class="content"&gt;textfield&lt;/span&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;/span&gt;,
                                    &lt;span class="key"&gt;label&lt;/span&gt;: &lt;span class="string"&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;span class="content"&gt;Name&lt;/span&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;/span&gt;
                                },
                                {
                                    &lt;span class="key"&gt;xtype&lt;/span&gt;: &lt;span class="string"&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;span class="content"&gt;emailfield&lt;/span&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;/span&gt;,
                                    &lt;span class="key"&gt;label&lt;/span&gt;: &lt;span class="string"&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;span class="content"&gt;Email&lt;/span&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;/span&gt;
                                },
                                {
                                    &lt;span class="key"&gt;xtype&lt;/span&gt;: &lt;span class="string"&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;span class="content"&gt;textareafield&lt;/span&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;/span&gt;,
                                    &lt;span class="key"&gt;label&lt;/span&gt;: &lt;span class="string"&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;span class="content"&gt;Message&lt;/span&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;/span&gt;
                                }
                            ]
                        },
                        {
                            &lt;span class="key"&gt;xtype&lt;/span&gt;: &lt;span class="string"&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;span class="content"&gt;button&lt;/span&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;/span&gt;,
                            &lt;span class="key"&gt;text&lt;/span&gt;: &lt;span class="string"&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;span class="content"&gt;Send&lt;/span&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;/span&gt;,
                            &lt;span class="key"&gt;ui&lt;/span&gt;: &lt;span class="string"&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;span class="content"&gt;confirm&lt;/span&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;/span&gt;,
                            &lt;span class="function"&gt;handler&lt;/span&gt;: &lt;span class="keyword"&gt;function&lt;/span&gt;() {
                                &lt;span class="local-variable"&gt;this&lt;/span&gt;.up(&lt;span class="string"&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;span class="content"&gt;formpanel&lt;/span&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;/span&gt;).submit();
                            }
                        }
                    ]
                }
            ]
        });
    }
});&lt;/pre&gt;&lt;/td&gt;
&lt;/tr&gt;&lt;/table&gt;
&lt;/div&gt;
&lt;p&gt;你也可以在下载的Sencha 2.0 SDK的&lt;code&gt;examples/getting_started&lt;/code&gt;文件夹中找到这个入门应用的完整源代码。&lt;/p&gt;
</content>
  </entry>
  <entry>
    <title>使用和创建Sencha Touch 2构建</title>
    <link rel="alternate" href="/blog/2012/09/01/using-and-creating-sencha-touch-2-builds/"/>
    <id>/blog/2012/09/01/using-and-creating-sencha-touch-2-builds/</id>
    <published>2012-09-01T00:00:00Z</published>
    <updated>2012-09-01T00:00:00Z</updated>
    <author>
      <name>Article Author</name>
    </author>
    <summary type="html">&lt;p&gt;&lt;strong&gt;声明&lt;/strong&gt;：本文翻译自Sencha Touch官方文档。&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;英文原版地址&lt;/strong&gt;：&lt;a href="http://docs.sencha.com/touch/2-0/#!/guide/building"&gt;http://docs.sencha.com/touch/2-0/#!/guide/building&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Sencha Touch 2有一个全新的类系统，其特点是能够按需动态地加载类。在开发和生产过程中，这能带来许多的好处。&lt;/p&gt;
</summary>
    <content type="html">&lt;p&gt;&lt;strong&gt;声明&lt;/strong&gt;：本文翻译自Sencha Touch官方文档。&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;英文原版地址&lt;/strong&gt;：&lt;a href="http://docs.sencha.com/touch/2-0/#!/guide/building"&gt;http://docs.sencha.com/touch/2-0/#!/guide/building&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Sencha Touch 2有一个全新的类系统，其特点是能够按需动态地加载类。在开发和生产过程中，这能带来许多的好处。&lt;/p&gt;

&lt;p&gt;开发过程中，动态加载意味着你得到一个个文件的堆栈跟踪，这使得你能更容易调试应用程序中的问题。对于生产环境下，我们提供了一个构建工具，使你能够轻松地创建一个最小化的自定义构建，它只包括在应用程序中实际被使用的类，这意味着能为你的用户减少加载时间。&lt;/p&gt;
&lt;h3 id='toc_'&gt;选择一个构建&lt;/h3&gt;
&lt;p&gt;Sencha Touch 2提供了5个不同的构建。如果你只是想快速的搭建并运行一个Sencha Touch应用实例，那么最好的方法就是使用&lt;code&gt;sencha-touch-debug.js&lt;/code&gt;在本地进行应用开发，待部署到生成环境时，切换到&lt;code&gt;sencha-touch.js&lt;/code&gt;。其他三个构建有利于在生成环境下进行调试，或在没有自定义构建的情况下运行生成环境，又或是将1.x的应用程序迁移到2.x的应用程序。&lt;/p&gt;

&lt;p&gt;因为每个构建都有其特定的使用目标，所以每个构建都有不同的构建选项。下表可以简单的说明每个构建是被如何配置的：&lt;/p&gt;

&lt;p&gt;//此处为FROM表单图&lt;/p&gt;

&lt;p&gt;需要注意的是,最近3个版本都包含在下载的SDK的&lt;code&gt;builds&lt;/code&gt;目录下。如果上面的表不是让你理解的很明白，这里有一个更加详细的说明，说明每个选项的意思:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Type:&lt;/strong&gt; 是&lt;code&gt;Core&lt;/code&gt;或&lt;code&gt;All&lt;/code&gt; ——
&lt;code&gt;Core&lt;/code&gt;包括基类，不包括组件。&lt;code&gt;All&lt;/code&gt;则包含了所有。&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Loader:&lt;/strong&gt; 无论自动加载是否被激活。只有&lt;code&gt;sencha-touch.js&lt;/code&gt;默认激活。&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Minified:&lt;/strong&gt; 是指构建由YUI的压缩机进行压缩。&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Comments:&lt;/strong&gt;
是指构建依然包含JSDoc注释（为了在生产环境下的下载速度，注释通常会被删除）&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Debug:&lt;/strong&gt; 是指构建会给你提示你的错误信息，例如当你错误的配置了一个类时。&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Compat:&lt;/strong&gt; 是指与&lt;code&gt;Sencha Touch 1.x&lt;/code&gt;有了更好的兼容性。&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;最后，我们应该在开发环境中使用&lt;code&gt;sencha-touch-debug.js&lt;/code&gt;，然后在生产环境下切换到&lt;code&gt;sencha-touch.js&lt;/code&gt;或&lt;code&gt;sencha-touch-all.js&lt;/code&gt;，或者一个自定义的构建。&lt;/p&gt;
&lt;h3 id='toc_'&gt;创建你自己的构建&lt;/h3&gt;
&lt;p&gt;在生产的绝大多数情况下，一个Sencha Touch 2应用程序应该使用一个自定义构建，有二个主要原因:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;自定义构建只包括你的应用程序中实际使用的框架类，这样节省了下载时间。&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;一个自定义构建只创建一个文件，这个文件包括你所有的应用程序类，这意味着网络请求时只有一个网络请求。&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;原因二特别重要。大多数应用程序有大量的文件（有时会有数百个），请求时会将它们一个接一个的加载，在3G网络，这需要花很长时间。因为由于不同的网络环境，每个请求都有可能导致几百毫秒的延迟，这很容易你的应用程序的整体加载时间增加好几秒。&lt;/p&gt;

&lt;p&gt;为确保你的应用程序在生产环境中加载变快，我们创建了&lt;a href="Sencha%20SDK%20Tools"&gt;http://www.sencha.com/products/sdk-tools&lt;/a&gt;，其中包括一个构建脚本，该脚本会自动执行下面这些动能：&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;指出哪些框架类是在应用程序实际被使用的。&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;指出哪些应用程序类是在应用程序启动时要被加载的。&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;以类的正确顺序，将它们组合在一起放在同一个文件里。&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;删除了所有的JSDoc注释，减少文件的大小使其尽可能小。&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;h3 id='toc_sdk'&gt;安装SDK工具&lt;/h3&gt;
&lt;p&gt;如果你还没有安装&lt;code&gt;Sencha SDK Tool&lt;/code&gt;，那么你需要先安装，以便你可以创建一个构建。一个快速检验是否已经安装了SDK的方法是打开命令行终端，输入&lt;code&gt;sencha&lt;/code&gt; —— 如果已经安装SDK工具你应该可以看到类似如下的信息：&lt;/p&gt;

&lt;p&gt;//输入“sencha”有SDK工具就可以看到的内容。图&lt;/p&gt;

&lt;p&gt;如果你看到的是错误信息，那么可能是因为没有安装SDK工具。你只需点击下载链接&lt;a href="http://www.sencha.com/products/sdk-tools"&gt;http://www.sencha.com/products/sdk-tools&lt;/a&gt;，双击下载的文件安装，然后重试&lt;code&gt;sencha&lt;/code&gt;命令，这时所有的一切都应该能正常工作了。&lt;/p&gt;
&lt;h3 id='toc_'&gt;生成一个构建&lt;/h3&gt;
&lt;p&gt;&lt;strong&gt;注意：&lt;/strong&gt; 建立构建步骤预计将在下一个版本中被简化(2.0.0 Beta
2)，如果这个版本已经发布，请重新查看本文。&lt;/p&gt;

&lt;p&gt;我们将假设你已经有一个在本地可用的应用程序，你只是想为生产环境建立构建。如果你还没有一个应用程序或不知道这到底是怎么回事，请看&lt;a href="http://www.menglifang.org/blog/2012/08/31/getting-started-with-sencha-touch-2/"&gt;Sencha Touch 2入门&lt;/a&gt;。&lt;/p&gt;

&lt;p&gt;如果你已经有一个在本地工作的应用程序，那让我们继续。我们将使用&lt;code&gt;Sencha Touch SDK&lt;/code&gt;中的Twitter例子来说明这是如何工作的。首先，让我们熟悉这个文件例子的&lt;code&gt;index.html&lt;/code&gt;文件：&lt;/p&gt;
&lt;div class="highlight html"&gt;&lt;div class="ribbon"&gt;&lt;/div&gt;&lt;table class="CodeRay"&gt;&lt;tr&gt;
  &lt;td class="line-numbers" title="double click to toggle" ondblclick="with (this.firstChild.style) { display = (display == '') ? 'none' : '' }"&gt;&lt;pre&gt;1
2
3
4
5
6
7
8
9
&lt;strong&gt;10&lt;/strong&gt;
11
&lt;/pre&gt;&lt;/td&gt;
  &lt;td class="code"&gt;&lt;pre&gt;&lt;span class="doctype"&gt;&amp;lt;!DOCTYPE html&amp;gt;&lt;/span&gt;
&lt;span class="tag"&gt;&amp;lt;html&amp;gt;&lt;/span&gt;
&lt;span class="tag"&gt;&amp;lt;head&amp;gt;&lt;/span&gt;
  &lt;span class="tag"&gt;&amp;lt;meta&lt;/span&gt; &lt;span class="attribute-name"&gt;http-equiv&lt;/span&gt;=&lt;span class="string"&gt;&lt;span class="delimiter"&gt;&amp;quot;&lt;/span&gt;&lt;span class="content"&gt;Content-Type&lt;/span&gt;&lt;span class="delimiter"&gt;&amp;quot;&lt;/span&gt;&lt;/span&gt; &lt;span class="attribute-name"&gt;content&lt;/span&gt;=&lt;span class="string"&gt;&lt;span class="delimiter"&gt;&amp;quot;&lt;/span&gt;&lt;span class="content"&gt;text/html; charset=utf-8&lt;/span&gt;&lt;span class="delimiter"&gt;&amp;quot;&lt;/span&gt;&lt;/span&gt;&lt;span class="tag"&gt;&amp;gt;&lt;/span&gt;
  &lt;span class="tag"&gt;&amp;lt;title&amp;gt;&lt;/span&gt;Twitter&lt;span class="tag"&gt;&amp;lt;/title&amp;gt;&lt;/span&gt;
  &lt;span class="tag"&gt;&amp;lt;link&lt;/span&gt; &lt;span class="attribute-name"&gt;rel&lt;/span&gt;=&lt;span class="string"&gt;&lt;span class="delimiter"&gt;&amp;quot;&lt;/span&gt;&lt;span class="content"&gt;stylesheet&lt;/span&gt;&lt;span class="delimiter"&gt;&amp;quot;&lt;/span&gt;&lt;/span&gt; &lt;span class="attribute-name"&gt;href&lt;/span&gt;=&lt;span class="string"&gt;&lt;span class="delimiter"&gt;&amp;quot;&lt;/span&gt;&lt;span class="content"&gt;resources/css/application.css&lt;/span&gt;&lt;span class="delimiter"&gt;&amp;quot;&lt;/span&gt;&lt;/span&gt; &lt;span class="attribute-name"&gt;type&lt;/span&gt;=&lt;span class="string"&gt;&lt;span class="delimiter"&gt;&amp;quot;&lt;/span&gt;&lt;span class="content"&gt;text/css&lt;/span&gt;&lt;span class="delimiter"&gt;&amp;quot;&lt;/span&gt;&lt;/span&gt;&lt;span class="tag"&gt;&amp;gt;&lt;/span&gt;
  &lt;span class="tag"&gt;&amp;lt;script&lt;/span&gt; &lt;span class="attribute-name"&gt;type&lt;/span&gt;=&lt;span class="string"&gt;&lt;span class="delimiter"&gt;&amp;quot;&lt;/span&gt;&lt;span class="content"&gt;text/javascript&lt;/span&gt;&lt;span class="delimiter"&gt;&amp;quot;&lt;/span&gt;&lt;/span&gt; &lt;span class="attribute-name"&gt;src&lt;/span&gt;=&lt;span class="string"&gt;&lt;span class="delimiter"&gt;&amp;quot;&lt;/span&gt;&lt;span class="content"&gt;touch/sencha-touch-debug.js&lt;/span&gt;&lt;span class="delimiter"&gt;&amp;quot;&lt;/span&gt;&lt;/span&gt;&lt;span class="tag"&gt;&amp;gt;&lt;/span&gt;&lt;span class="tag"&gt;&amp;lt;/script&amp;gt;&lt;/span&gt;
  &lt;span class="tag"&gt;&amp;lt;script&lt;/span&gt; &lt;span class="attribute-name"&gt;type&lt;/span&gt;=&lt;span class="string"&gt;&lt;span class="delimiter"&gt;&amp;quot;&lt;/span&gt;&lt;span class="content"&gt;text/javascript&lt;/span&gt;&lt;span class="delimiter"&gt;&amp;quot;&lt;/span&gt;&lt;/span&gt; &lt;span class="attribute-name"&gt;src&lt;/span&gt;=&lt;span class="string"&gt;&lt;span class="delimiter"&gt;&amp;quot;&lt;/span&gt;&lt;span class="content"&gt;app.js&lt;/span&gt;&lt;span class="delimiter"&gt;&amp;quot;&lt;/span&gt;&lt;/span&gt;&lt;span class="tag"&gt;&amp;gt;&lt;/span&gt;&lt;span class="tag"&gt;&amp;lt;/script&amp;gt;&lt;/span&gt;
&lt;span class="tag"&gt;&amp;lt;/head&amp;gt;&lt;/span&gt;
&lt;span class="tag"&gt;&amp;lt;body&amp;gt;&lt;/span&gt;&lt;span class="tag"&gt;&amp;lt;/body&amp;gt;&lt;/span&gt;
&lt;span class="tag"&gt;&amp;lt;/html&amp;gt;&lt;/span&gt;&lt;/pre&gt;&lt;/td&gt;
&lt;/tr&gt;&lt;/table&gt;
&lt;/div&gt;
&lt;p&gt;注意，我们加载了&lt;code&gt;sencha-touch-debug.js&lt;/code&gt;和&lt;code&gt;app.js&lt;/code&gt;，这种组合能让我们的程序在开发环境中使用动态加载机制，并且是SDK工具可以生成一个最小化的构建的基础。一会儿我们将回到这个html文件的内容。&lt;/p&gt;

&lt;p&gt;回到命令行，首先你使用&lt;code&gt;cd&lt;/code&gt;进入到你的应用程序在硬盘上的目录：&lt;/p&gt;
&lt;div class="highlight bash"&gt;&lt;div class="ribbon"&gt;&lt;/div&gt;&lt;table class="CodeRay"&gt;&lt;tr&gt;
  &lt;td class="line-numbers" title="double click to toggle" ondblclick="with (this.firstChild.style) { display = (display == '') ? 'none' : '' }"&gt;&lt;pre&gt;
&lt;/pre&gt;&lt;/td&gt;
  &lt;td class="code"&gt;&lt;pre&gt;cd ~/path/to/my/app&lt;/pre&gt;&lt;/td&gt;
&lt;/tr&gt;&lt;/table&gt;
&lt;/div&gt;
&lt;p&gt;接下来，你需要为你的应用程序生成一个jsb文件。这个jsb文件列出了应用程序中用到的所有的类。你应该值得庆幸，SDK工具为你做了这件事：&lt;/p&gt;
&lt;div class="highlight bash"&gt;&lt;div class="ribbon"&gt;&lt;/div&gt;&lt;table class="CodeRay"&gt;&lt;tr&gt;
  &lt;td class="line-numbers" title="double click to toggle" ondblclick="with (this.firstChild.style) { display = (display == '') ? 'none' : '' }"&gt;&lt;pre&gt;
&lt;/pre&gt;&lt;/td&gt;
  &lt;td class="code"&gt;&lt;pre&gt;sencha create jsb -a index.html -p app.jsb3&lt;/pre&gt;&lt;/td&gt;
&lt;/tr&gt;&lt;/table&gt;
&lt;/div&gt;
&lt;p&gt;这个命令需要用到你的&lt;code&gt;index.html&lt;/code&gt;文件（在开发过程中，你会用浏览器去浏览的那个文件），找出所有的类的依赖关系并把它们写入到一个名为&lt;code&gt;app.jsb3&lt;/code&gt;的文件。到此，我们只需要再执行一个命令来生成这个构建：&lt;/p&gt;
&lt;div class="highlight bash"&gt;&lt;div class="ribbon"&gt;&lt;/div&gt;&lt;table class="CodeRay"&gt;&lt;tr&gt;
  &lt;td class="line-numbers" title="double click to toggle" ondblclick="with (this.firstChild.style) { display = (display == '') ? 'none' : '' }"&gt;&lt;pre&gt;
&lt;/pre&gt;&lt;/td&gt;
  &lt;td class="code"&gt;&lt;pre&gt;sencha build -p app.jsb3 -d ./&lt;/pre&gt;&lt;/td&gt;
&lt;/tr&gt;&lt;/table&gt;
&lt;/div&gt;
&lt;p&gt;这个最后的命令将jsb文件中列出的所有文件组合在一个文件中，并将其尽可能的最小化。该命令的输出是一个名为&lt;code&gt;all-classes.js&lt;/code&gt;的文件，这个文件包含了所有的框架类以及你的应用程序类。&lt;/p&gt;
&lt;h3 id='toc_html'&gt;更新你的HTML文件&lt;/h3&gt;
&lt;p&gt;最后一步，你需要更新你的应用程序在生产环境中使用的HTML文件，用&lt;code&gt;sencha-touch.js&lt;/code&gt; 代替&lt;code&gt;sencha-touch-debug.js&lt;/code&gt;，加载你新生成的&lt;code&gt;all-classes.js&lt;/code&gt;。这样我们就完成了Twitter示例:&lt;/p&gt;
&lt;div class="highlight html"&gt;&lt;div class="ribbon"&gt;&lt;/div&gt;&lt;table class="CodeRay"&gt;&lt;tr&gt;
  &lt;td class="line-numbers" title="double click to toggle" ondblclick="with (this.firstChild.style) { display = (display == '') ? 'none' : '' }"&gt;&lt;pre&gt;1
2
3
4
5
6
7
8
9
&lt;strong&gt;10&lt;/strong&gt;
11
12
&lt;/pre&gt;&lt;/td&gt;
  &lt;td class="code"&gt;&lt;pre&gt;&lt;span class="doctype"&gt;&amp;lt;!DOCTYPE html&amp;gt;&lt;/span&gt;
&lt;span class="tag"&gt;&amp;lt;html&amp;gt;&lt;/span&gt;
&lt;span class="tag"&gt;&amp;lt;head&amp;gt;&lt;/span&gt;
  &lt;span class="tag"&gt;&amp;lt;meta&lt;/span&gt; &lt;span class="attribute-name"&gt;http-equiv&lt;/span&gt;=&lt;span class="string"&gt;&lt;span class="delimiter"&gt;&amp;quot;&lt;/span&gt;&lt;span class="content"&gt;Content-Type&lt;/span&gt;&lt;span class="delimiter"&gt;&amp;quot;&lt;/span&gt;&lt;/span&gt; &lt;span class="attribute-name"&gt;content&lt;/span&gt;=&lt;span class="string"&gt;&lt;span class="delimiter"&gt;&amp;quot;&lt;/span&gt;&lt;span class="content"&gt;text/html; charset=utf-8&lt;/span&gt;&lt;span class="delimiter"&gt;&amp;quot;&lt;/span&gt;&lt;/span&gt;&lt;span class="tag"&gt;&amp;gt;&lt;/span&gt;
  &lt;span class="tag"&gt;&amp;lt;title&amp;gt;&lt;/span&gt;Twitter&lt;span class="tag"&gt;&amp;lt;/title&amp;gt;&lt;/span&gt;
  &lt;span class="tag"&gt;&amp;lt;link&lt;/span&gt; &lt;span class="attribute-name"&gt;rel&lt;/span&gt;=&lt;span class="string"&gt;&lt;span class="delimiter"&gt;&amp;quot;&lt;/span&gt;&lt;span class="content"&gt;stylesheet&lt;/span&gt;&lt;span class="delimiter"&gt;&amp;quot;&lt;/span&gt;&lt;/span&gt; &lt;span class="attribute-name"&gt;href&lt;/span&gt;=&lt;span class="string"&gt;&lt;span class="delimiter"&gt;&amp;quot;&lt;/span&gt;&lt;span class="content"&gt;resources/css/application.css&lt;/span&gt;&lt;span class="delimiter"&gt;&amp;quot;&lt;/span&gt;&lt;/span&gt; &lt;span class="attribute-name"&gt;type&lt;/span&gt;=&lt;span class="string"&gt;&lt;span class="delimiter"&gt;&amp;quot;&lt;/span&gt;&lt;span class="content"&gt;text/css&lt;/span&gt;&lt;span class="delimiter"&gt;&amp;quot;&lt;/span&gt;&lt;/span&gt;&lt;span class="tag"&gt;&amp;gt;&lt;/span&gt;
  &lt;span class="tag"&gt;&amp;lt;script&lt;/span&gt; &lt;span class="attribute-name"&gt;type&lt;/span&gt;=&lt;span class="string"&gt;&lt;span class="delimiter"&gt;&amp;quot;&lt;/span&gt;&lt;span class="content"&gt;text/javascript&lt;/span&gt;&lt;span class="delimiter"&gt;&amp;quot;&lt;/span&gt;&lt;/span&gt; &lt;span class="attribute-name"&gt;src&lt;/span&gt;=&lt;span class="string"&gt;&lt;span class="delimiter"&gt;&amp;quot;&lt;/span&gt;&lt;span class="content"&gt;touch/sencha-touch.js&lt;/span&gt;&lt;span class="delimiter"&gt;&amp;quot;&lt;/span&gt;&lt;/span&gt;&lt;span class="tag"&gt;&amp;gt;&lt;/span&gt;&lt;span class="tag"&gt;&amp;lt;/script&amp;gt;&lt;/span&gt;
  &lt;span class="tag"&gt;&amp;lt;script&lt;/span&gt; &lt;span class="attribute-name"&gt;type&lt;/span&gt;=&lt;span class="string"&gt;&lt;span class="delimiter"&gt;&amp;quot;&lt;/span&gt;&lt;span class="content"&gt;text/javascript&lt;/span&gt;&lt;span class="delimiter"&gt;&amp;quot;&lt;/span&gt;&lt;/span&gt; &lt;span class="attribute-name"&gt;src&lt;/span&gt;=&lt;span class="string"&gt;&lt;span class="delimiter"&gt;&amp;quot;&lt;/span&gt;&lt;span class="content"&gt;all-classes.js&lt;/span&gt;&lt;span class="delimiter"&gt;&amp;quot;&lt;/span&gt;&lt;/span&gt;&lt;span class="tag"&gt;&amp;gt;&lt;/span&gt;&lt;span class="tag"&gt;&amp;lt;/script&amp;gt;&lt;/span&gt;
  &lt;span class="tag"&gt;&amp;lt;script&lt;/span&gt; &lt;span class="attribute-name"&gt;type&lt;/span&gt;=&lt;span class="string"&gt;&lt;span class="delimiter"&gt;&amp;quot;&lt;/span&gt;&lt;span class="content"&gt;text/javascript&lt;/span&gt;&lt;span class="delimiter"&gt;&amp;quot;&lt;/span&gt;&lt;/span&gt; &lt;span class="attribute-name"&gt;src&lt;/span&gt;=&lt;span class="string"&gt;&lt;span class="delimiter"&gt;&amp;quot;&lt;/span&gt;&lt;span class="content"&gt;app.js&lt;/span&gt;&lt;span class="delimiter"&gt;&amp;quot;&lt;/span&gt;&lt;/span&gt;&lt;span class="tag"&gt;&amp;gt;&lt;/span&gt;&lt;span class="tag"&gt;&amp;lt;/script&amp;gt;&lt;/span&gt;
&lt;span class="tag"&gt;&amp;lt;/head&amp;gt;&lt;/span&gt;
&lt;span class="tag"&gt;&amp;lt;body&amp;gt;&lt;/span&gt;&lt;span class="tag"&gt;&amp;lt;/body&amp;gt;&lt;/span&gt;
&lt;span class="tag"&gt;&amp;lt;/html&amp;gt;&lt;/span&gt;&lt;/pre&gt;&lt;/td&gt;
&lt;/tr&gt;&lt;/table&gt;
&lt;/div&gt;
&lt;p&gt;为了不总是改变&lt;code&gt;index.html&lt;/code&gt;文件，通常的做法是创建一个名为&lt;code&gt;index-production.html&lt;/code&gt;的文件，该文件中包含如上所述的代码。许多开发人员会编写一个简单的部署脚本，将应用程序复制到一个部署文件夹中，并自动将&lt;code&gt;index-production.html&lt;/code&gt;重命名为&lt;code&gt;index.html&lt;/code&gt;，以便与这个构建可以很容易的上传。&lt;/p&gt;
&lt;h3 id='toc_'&gt;对于开发者来说的变化&lt;/h3&gt;
&lt;p&gt;虽然这只是几个步骤，我们期望下一个Sencha Touch版本能够同时改进工作流程和输出。如果你正在使用Sencha Touch 2.0 beta 1构建，当你升级了以后，请务必重新阅读该文档，因为它的步骤和输出可能会稍有变化。&lt;/p&gt;
</content>
  </entry>
  <entry>
    <title>Sencha Touch 2 入门指南</title>
    <link rel="alternate" href="/blog/2012/08/31/getting-started-with-sencha-touch-2/"/>
    <id>/blog/2012/08/31/getting-started-with-sencha-touch-2/</id>
    <published>2012-08-31T00:00:00Z</published>
    <updated>2012-08-31T00:00:00Z</updated>
    <author>
      <name>Article Author</name>
    </author>
    <summary type="html">&lt;p&gt;&lt;strong&gt;声明&lt;/strong&gt;：本文翻译自Sencha Touch官方文档。&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;英文原版地址&lt;/strong&gt;：&lt;a href="http://docs.sencha.com/touch/2-0/#!/guide/getting_started"&gt;http://docs.sencha.com/touch/2-0/#!/guide/getting_started&lt;/a&gt;&lt;/p&gt;
&lt;h3 id='toc_sencha-touch'&gt;什么是Sencha Touch&lt;/h3&gt;
</summary>
    <content type="html">&lt;p&gt;&lt;strong&gt;声明&lt;/strong&gt;：本文翻译自Sencha Touch官方文档。&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;英文原版地址&lt;/strong&gt;：&lt;a href="http://docs.sencha.com/touch/2-0/#!/guide/getting_started"&gt;http://docs.sencha.com/touch/2-0/#!/guide/getting_started&lt;/a&gt;&lt;/p&gt;
&lt;h3 id='toc_sencha-touch'&gt;什么是Sencha Touch&lt;/h3&gt;
&lt;p&gt;Sencha
Touch可以让你快速的开发出基于HTML5技术的移动应用，应用可以同时支持安卓、iOS和黑莓平台。并且使基于浏览器的应用能够提供与本地应用一样的用户体验。&lt;/p&gt;
&lt;h3 id='toc_'&gt;你需要的东西&lt;/h3&gt;
&lt;p&gt;首先，你要去Sencha官网下载&lt;a href="http://www.sencha.com/products/touch/download/"&gt;Sencha Touch 2 SDK&lt;/a&gt; 与&lt;a href="http://www.sencha.com/products/sdk-tools/download"&gt;SDK Tools&lt;/a&gt;（可以免费下载），除此之外你还需要：&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;能在本地计算机运行的WEB服务器&lt;/li&gt;
&lt;li&gt;WEB浏览器，推荐Chrome与Safari&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;如果你使用的是基于Windows的IIS，那请注意你必须将&lt;code&gt;application/x-json&lt;/code&gt;添加为MIME类型，以便Sencha Touch正常工作。下面的链接将指导你如何去完成：&lt;a href="http://stackoverflow.com/a/1121114/273985"&gt;http://stackoverflow.com/a/1121114/273985&lt;/a&gt;&lt;/p&gt;
&lt;h3 id='toc_'&gt;安装&lt;/h3&gt;
&lt;p&gt;首先，解压SDK文件到你的项目目录。通常应该配置HTTP服务器使其能够访问该文件夹。例如，你应该能够从你的Web浏览器访问&lt;code&gt;http://localhost/sencha-touch-2.0.0-gpl&lt;/code&gt;来查看Sencha Touch文档。&lt;/p&gt;

&lt;p&gt;你还需要运行SDK Tools安装程序。 SDK Tools会将&lt;code&gt;sencha&lt;/code&gt;这个命令行工具添加&lt;code&gt;path&lt;/code&gt;下，这样就可以通过&lt;code&gt;sencha&lt;/code&gt;命令生成一个新的应用程序模板。要检查你是否已经安装了SDK Tools，切换到Sencha Touch目录，并运行&lt;code&gt;sencha&lt;/code&gt;命令。例如：&lt;/p&gt;
&lt;div class="highlight bash"&gt;&lt;div class="ribbon"&gt;&lt;/div&gt;&lt;table class="CodeRay"&gt;&lt;tr&gt;
  &lt;td class="line-numbers" title="double click to toggle" ondblclick="with (this.firstChild.style) { display = (display == '') ? 'none' : '' }"&gt;&lt;pre&gt;1
2
3
4
5
&lt;/pre&gt;&lt;/td&gt;
  &lt;td class="code"&gt;&lt;pre&gt;cd ~/webroot/sencha-touch-2.0.0-gpl/
sencha
Sencha Command v2.0.0 for Sencha Touch 2
Copyright (c) 2012 Sencha Inc.
...&lt;/pre&gt;&lt;/td&gt;
&lt;/tr&gt;&lt;/table&gt;
&lt;/div&gt;
&lt;p&gt;&lt;strong&gt;注意：&lt;/strong&gt; 在执行Sencha Touch命令前，必须确保在SDK目录或者生成的Sencha Touch应用程序目录下。&lt;/p&gt;
&lt;h3 id='toc_'&gt;生成第一个应用程序&lt;/h3&gt;
&lt;p&gt;现在你已经成功安装Sencha Touch和SDK Tools，那我们现在就来创建一个应用程序。请确定你在Sencha Touch SDK目录下，并执行如下命令：&lt;/p&gt;
&lt;div class="highlight bash"&gt;&lt;div class="ribbon"&gt;&lt;/div&gt;&lt;table class="CodeRay"&gt;&lt;tr&gt;
  &lt;td class="line-numbers" title="double click to toggle" ondblclick="with (this.firstChild.style) { display = (display == '') ? 'none' : '' }"&gt;&lt;pre&gt;1
2
3
4
5
&lt;/pre&gt;&lt;/td&gt;
  &lt;td class="code"&gt;&lt;pre&gt;$ sencha generate app GS ../GS
[INFO] Created file /Users/nickpoulden/Projects/sencha/GS/.senchasdk
[INFO] Created file /Users/nickpoulden/Projects/sencha/GS/index.html
[INFO] Created file /Users/nickpoulden/Projects/sencha/GS/app.js
...&lt;/pre&gt;&lt;/td&gt;
&lt;/tr&gt;&lt;/table&gt;
&lt;/div&gt;
&lt;p&gt;这将目录../GS下（在Sencha Touch SDK的上一层目录）生成一个命名空间为GS（Getting Started的缩写）的Sencha Touch应用程序。生成的应用程序中包括你构建一个Touch应用程序需要的所有文件，其中包括默认的&lt;code&gt;index.html&lt;/code&gt;，一份Touch SDK的拷贝，CSS，图片和用于将你的应用程序打包成本地应用的配置文件。&lt;/p&gt;

&lt;p&gt;接着让我们来检查你的应用程序是否能成功在Web浏览器中打开。假设你将SDK解压到了你的web根目录，那么你应该能够通过&lt;code&gt;http://localhost/GS&lt;/code&gt;访问你生成的应用程序：&lt;/p&gt;

&lt;p&gt;&lt;img src="/images/blog/201208310101.png" alt=""&gt;&lt;/p&gt;
&lt;h3 id='toc_'&gt;代码构架的基本构成&lt;/h3&gt;
&lt;p&gt;用你最喜欢的IDE或文本编辑器打开GS目录，目录结构看起来应该像这样：&lt;/p&gt;

&lt;p&gt;//GS目录结构&lt;/p&gt;

&lt;p&gt;下面是目录和一些文件的具体描述&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;app - 应用程序目录，其中包含：模型，视图，控制器和存储。&lt;/li&gt;
&lt;li&gt;app.js - 应用程序的入口。&lt;/li&gt;
&lt;li&gt;app.json - 应用程序的配置文件 -
Builder用这个文件来生成压缩版的应用程序。&lt;/li&gt;
&lt;li&gt;index.html - 应用程序的HTML文件。&lt;/li&gt;
&lt;li&gt;packager.json - 配置文件，Packager使用该文件创建可以发布到应用商店的iOS和安卓的本地应用。&lt;/li&gt;
&lt;li&gt;resources - 资源目录，其中包含CSS和图像&lt;/li&gt;
&lt;li&gt;sdk - Sencha Touch SDK的一份拷贝。你应该不需要更改此文件夹里的内容。&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;在你的编辑器中打开app.js，这是应用程序的主入口点。
  
//此处为app.js文档&lt;/p&gt;

&lt;p&gt;&lt;code&gt;launch&lt;/code&gt;函数为应用程序的入口点。在默认的应用程序中，我们首先隐藏的应用程序加载指示器，然后创建一个主视图的实例，并把它添加到&lt;code&gt;Viewport&lt;/code&gt;中去。&lt;/p&gt;

&lt;p&gt;&lt;code&gt;Viewport&lt;/code&gt;是一个&lt;code&gt;Card layout&lt;/code&gt;, 你可以将组件添加到应用程序中。默认的应用程序将主视图添加到了&lt;code&gt;Viewport&lt;/code&gt;，所以它在屏幕上是可见的。让我们来看看在主视图里面的代码。&lt;/p&gt;

&lt;p&gt;在代码编辑器中打开&lt;code&gt;app/view/Main.js&lt;/code&gt;，并尝试编辑第10行的内容：&lt;/p&gt;
&lt;div class="highlight javascript"&gt;&lt;div class="ribbon"&gt;&lt;/div&gt;&lt;table class="CodeRay"&gt;&lt;tr&gt;
  &lt;td class="line-numbers" title="double click to toggle" ondblclick="with (this.firstChild.style) { display = (display == '') ? 'none' : '' }"&gt;&lt;pre&gt;
&lt;/pre&gt;&lt;/td&gt;
  &lt;td class="code"&gt;&lt;pre&gt;title: &lt;span class="string"&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;span class="content"&gt;Home Tab&lt;/span&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;/span&gt;&lt;/pre&gt;&lt;/td&gt;
&lt;/tr&gt;&lt;/table&gt;
&lt;/div&gt;
&lt;p&gt;现在编辑第19行内容：&lt;/p&gt;
&lt;div class="highlight javascript"&gt;&lt;div class="ribbon"&gt;&lt;/div&gt;&lt;table class="CodeRay"&gt;&lt;tr&gt;
  &lt;td class="line-numbers" title="double click to toggle" ondblclick="with (this.firstChild.style) { display = (display == '') ? 'none' : '' }"&gt;&lt;pre&gt;
&lt;/pre&gt;&lt;/td&gt;
  &lt;td class="code"&gt;&lt;pre&gt;title: &lt;span class="string"&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;span class="content"&gt;Woohoo!&lt;/span&gt;&lt;span class="delimiter"&gt;'&lt;/span&gt;&lt;/span&gt;&lt;/pre&gt;&lt;/td&gt;
&lt;/tr&gt;&lt;/table&gt;
&lt;/div&gt;
&lt;p&gt;另外，在编辑22-26行：&lt;/p&gt;
&lt;div class="highlight javascript"&gt;&lt;div class="ribbon"&gt;&lt;/div&gt;&lt;table class="CodeRay"&gt;&lt;tr&gt;
  &lt;td class="line-numbers" title="double click to toggle" ondblclick="with (this.firstChild.style) { display = (display == '') ? 'none' : '' }"&gt;&lt;pre&gt;1
2
3
&lt;/pre&gt;&lt;/td&gt;
  &lt;td class="code"&gt;&lt;pre&gt;html: [
  &lt;span class="string"&gt;&lt;span class="delimiter"&gt;&amp;quot;&lt;/span&gt;&lt;span class="content"&gt;I changed the default &amp;lt;b&amp;gt;HTML Contents&amp;lt;/b&amp;gt; to something different!&lt;/span&gt;&lt;span class="delimiter"&gt;&amp;quot;&lt;/span&gt;&lt;/span&gt;
].join(&lt;span class="string"&gt;&lt;span class="delimiter"&gt;&amp;quot;&lt;/span&gt;&lt;span class="delimiter"&gt;&amp;quot;&lt;/span&gt;&lt;/span&gt;)&lt;/pre&gt;&lt;/td&gt;
&lt;/tr&gt;&lt;/table&gt;
&lt;/div&gt;
&lt;p&gt;现在刷新应用程序，你将看到你对应用程序的修改。&lt;/p&gt;

&lt;p&gt;//浏览器刷新后的web&lt;/p&gt;
</content>
  </entry>
  <entry>
    <title>在Ubuntu Server 12.04 LTS AMD64下安装Moosefs</title>
    <link rel="alternate" href="/blog/2012/07/17/set-up-moosefs-on-ubuntu-12-04-server-amd64/"/>
    <id>/blog/2012/07/17/set-up-moosefs-on-ubuntu-12-04-server-amd64/</id>
    <published>2012-07-17T00:00:00Z</published>
    <updated>2012-07-17T00:00:00Z</updated>
    <author>
      <name>Article Author</name>
    </author>
    <summary type="html">&lt;h3 id='toc_mfs-master-server'&gt;mfs主控节点(master server)&lt;/h3&gt;&lt;h4 id='toc_'&gt;安装说明&lt;/h4&gt;
&lt;ul&gt;
&lt;li&gt;安装Ubuntu Server 12.04 LTS AMD64&lt;/li&gt;
&lt;li&gt;下载&lt;a href="http://www.moosefs.org/download.html"&gt;mfs-1.6.25.tar.gz&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;安装编译工具和依赖库&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;</summary>
    <content type="html">&lt;h3 id='toc_mfs-master-server'&gt;mfs主控节点(master server)&lt;/h3&gt;&lt;h4 id='toc_'&gt;安装说明&lt;/h4&gt;
&lt;ul&gt;
&lt;li&gt;安装Ubuntu Server 12.04 LTS AMD64&lt;/li&gt;
&lt;li&gt;下载&lt;a href="http://www.moosefs.org/download.html"&gt;mfs-1.6.25.tar.gz&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;安装编译工具和依赖库&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;/p&gt;
&lt;div class="highlight bash"&gt;&lt;div class="ribbon"&gt;&lt;/div&gt;&lt;table class="CodeRay"&gt;&lt;tr&gt;
  &lt;td class="line-numbers" title="double click to toggle" ondblclick="with (this.firstChild.style) { display = (display == '') ? 'none' : '' }"&gt;&lt;pre&gt;1
2
&lt;/pre&gt;&lt;/td&gt;
  &lt;td class="code"&gt;&lt;pre&gt;apt-get install build-essential
apt-get install zlib1g-dev&lt;/pre&gt;&lt;/td&gt;
&lt;/tr&gt;&lt;/table&gt;
&lt;/div&gt;
&lt;ul&gt;
&lt;li&gt;添加系统用户&lt;/li&gt;
&lt;/ul&gt;
&lt;div class="highlight bash"&gt;&lt;div class="ribbon"&gt;&lt;/div&gt;&lt;table class="CodeRay"&gt;&lt;tr&gt;
  &lt;td class="line-numbers" title="double click to toggle" ondblclick="with (this.firstChild.style) { display = (display == '') ? 'none' : '' }"&gt;&lt;pre&gt;1
2
&lt;/pre&gt;&lt;/td&gt;
  &lt;td class="code"&gt;&lt;pre&gt;groupadd mfs
useradd -g mfs mfs&lt;/pre&gt;&lt;/td&gt;
&lt;/tr&gt;&lt;/table&gt;
&lt;/div&gt;
&lt;ul&gt;
&lt;li&gt;编译并安装&lt;/li&gt;
&lt;/ul&gt;
&lt;div class="highlight bash"&gt;&lt;div class="ribbon"&gt;&lt;/div&gt;&lt;table class="CodeRay"&gt;&lt;tr&gt;
  &lt;td class="line-numbers" title="double click to toggle" ondblclick="with (this.firstChild.style) { display = (display == '') ? 'none' : '' }"&gt;&lt;pre&gt;1
2
3
4
5
6
7
&lt;/pre&gt;&lt;/td&gt;
  &lt;td class="code"&gt;&lt;pre&gt;cd /usr/src
tar zxvf mfs-1.6.25.tar.gz
cd mfs-1.6.25
./configure --prefix=/usr --sysconfdir=/etc --localstatedir=/var/lib
--with-default-user=mfs --with-default-group=mfs
--disable-mfschunkserver --disable-mfsmount
make &amp;amp;&amp;amp; make install&lt;/pre&gt;&lt;/td&gt;
&lt;/tr&gt;&lt;/table&gt;
&lt;/div&gt;
&lt;ul&gt;
&lt;li&gt;&lt;p&gt;配置服务器&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;通过配置模板创建缺省配置文件&lt;/li&gt;
&lt;/ul&gt;
&lt;div class="highlight bash"&gt;&lt;div class="ribbon"&gt;&lt;/div&gt;&lt;table class="CodeRay"&gt;&lt;tr&gt;
  &lt;td class="line-numbers" title="double click to toggle" ondblclick="with (this.firstChild.style) { display = (display == '') ? 'none' : '' }"&gt;&lt;pre&gt;1
2
3
4
&lt;/pre&gt;&lt;/td&gt;
  &lt;td class="code"&gt;&lt;pre&gt;cd /etc 
cp mfsmaster.cfg.dist mfsmaster.cfg
cp mfsmetalogger.cfg.dist mfsmetalogger.cfg
cp mfsexports.cfg.dist mfsexports.cfg&lt;/pre&gt;&lt;/td&gt;
&lt;/tr&gt;&lt;/table&gt;
&lt;/div&gt;
&lt;ul&gt;
&lt;li&gt;创建metadata文件&lt;/li&gt;
&lt;/ul&gt;
&lt;div class="highlight bash"&gt;&lt;div class="ribbon"&gt;&lt;/div&gt;&lt;table class="CodeRay"&gt;&lt;tr&gt;
  &lt;td class="line-numbers" title="double click to toggle" ondblclick="with (this.firstChild.style) { display = (display == '') ? 'none' : '' }"&gt;&lt;pre&gt;1
2
&lt;/pre&gt;&lt;/td&gt;
  &lt;td class="code"&gt;&lt;pre&gt;cd /var/lib/mfs
cp metadata.mfs.empty metadata.mfs&lt;/pre&gt;&lt;/td&gt;
&lt;/tr&gt;&lt;/table&gt;
&lt;/div&gt;
&lt;ul&gt;
&lt;li&gt;创建服务器名mfsmaster到IP地址的映射&lt;/li&gt;
&lt;/ul&gt;
&lt;div class="highlight "&gt;&lt;div class="ribbon"&gt;&lt;/div&gt;&lt;table class="CodeRay"&gt;&lt;tr&gt;
  &lt;td class="line-numbers" title="double click to toggle" ondblclick="with (this.firstChild.style) { display = (display == '') ? 'none' : '' }"&gt;&lt;pre&gt;1
2
3
&lt;/pre&gt;&lt;/td&gt;
  &lt;td class="code"&gt;&lt;pre&gt;vi /etc/hosts
# 例如：
192.168.1.81  mfsmaster&lt;/pre&gt;&lt;/td&gt;
&lt;/tr&gt;&lt;/table&gt;
&lt;/div&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;启动mfsmaster服务、&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;div class="highlight bash"&gt;&lt;div class="ribbon"&gt;&lt;/div&gt;&lt;table class="CodeRay"&gt;&lt;tr&gt;
  &lt;td class="line-numbers" title="double click to toggle" ondblclick="with (this.firstChild.style) { display = (display == '') ? 'none' : '' }"&gt;&lt;pre&gt;
&lt;/pre&gt;&lt;/td&gt;
  &lt;td class="code"&gt;&lt;pre&gt;/usr/sbin/mfsmaster start&lt;/pre&gt;&lt;/td&gt;
&lt;/tr&gt;&lt;/table&gt;
&lt;/div&gt;
&lt;ul&gt;
&lt;li&gt;启动Web监控服务&lt;/li&gt;
&lt;/ul&gt;
&lt;div class="highlight bash"&gt;&lt;div class="ribbon"&gt;&lt;/div&gt;&lt;table class="CodeRay"&gt;&lt;tr&gt;
  &lt;td class="line-numbers" title="double click to toggle" ondblclick="with (this.firstChild.style) { display = (display == '') ? 'none' : '' }"&gt;&lt;pre&gt;
&lt;/pre&gt;&lt;/td&gt;
  &lt;td class="code"&gt;&lt;pre&gt;/usr/sbin/mfscgiserv&lt;/pre&gt;&lt;/td&gt;
&lt;/tr&gt;&lt;/table&gt;
&lt;/div&gt;
&lt;ul&gt;
&lt;li&gt;通过浏览器访问监控服务，&lt;a href="http://mfsmaster:9425"&gt;http://mfsmaster:9425&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;h3 id='toc_mfs-metalogger'&gt;mfs备份节点(metalogger)&lt;/h3&gt;&lt;h4 id='toc_'&gt;安装说明&lt;/h4&gt;
&lt;ul&gt;
&lt;li&gt;安装Ubuntu Server 12.04 LTS AMD64&lt;/li&gt;
&lt;li&gt;下载&lt;a href="http://www.moosefs.org/download.html"&gt;mfs-1.6.25.tar.gz&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;安装编译工具和依赖库&lt;/li&gt;
&lt;/ul&gt;
&lt;div class="highlight bash"&gt;&lt;div class="ribbon"&gt;&lt;/div&gt;&lt;table class="CodeRay"&gt;&lt;tr&gt;
  &lt;td class="line-numbers" title="double click to toggle" ondblclick="with (this.firstChild.style) { display = (display == '') ? 'none' : '' }"&gt;&lt;pre&gt;1
2
&lt;/pre&gt;&lt;/td&gt;
  &lt;td class="code"&gt;&lt;pre&gt;apt-get install build-essential
apt-get install zlib1g-dev&lt;/pre&gt;&lt;/td&gt;
&lt;/tr&gt;&lt;/table&gt;
&lt;/div&gt;
&lt;ul&gt;
&lt;li&gt;添加系统用户&lt;/li&gt;
&lt;/ul&gt;
&lt;div class="highlight bash"&gt;&lt;div class="ribbon"&gt;&lt;/div&gt;&lt;table class="CodeRay"&gt;&lt;tr&gt;
  &lt;td class="line-numbers" title="double click to toggle" ondblclick="with (this.firstChild.style) { display = (display == '') ? 'none' : '' }"&gt;&lt;pre&gt;1
2
&lt;/pre&gt;&lt;/td&gt;
  &lt;td class="code"&gt;&lt;pre&gt;groupadd mfs
useradd -g mfs mfs&lt;/pre&gt;&lt;/td&gt;
&lt;/tr&gt;&lt;/table&gt;
&lt;/div&gt;
&lt;ul&gt;
&lt;li&gt;编译并安装&lt;/li&gt;
&lt;/ul&gt;
&lt;div class="highlight bash"&gt;&lt;div class="ribbon"&gt;&lt;/div&gt;&lt;table class="CodeRay"&gt;&lt;tr&gt;
  &lt;td class="line-numbers" title="double click to toggle" ondblclick="with (this.firstChild.style) { display = (display == '') ? 'none' : '' }"&gt;&lt;pre&gt;1
2
3
4
5
6
7
&lt;/pre&gt;&lt;/td&gt;
  &lt;td class="code"&gt;&lt;pre&gt;cd /usr/src
tar zxvf mfs-1.6.25.tar.gz
cd mfs-1.6.25
./configure --prefix=/usr --sysconfdir=/etc --localstatedir=/var/lib
--with-default-user=mfs --with-default-group=mfs
--disable-mfschunkserver --disable-mfsmount
make &amp;amp;&amp;amp; make install&lt;/pre&gt;&lt;/td&gt;
&lt;/tr&gt;&lt;/table&gt;
&lt;/div&gt;
&lt;ul&gt;
&lt;li&gt;&lt;p&gt;配置服务器&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;通过模板创建缺省的metalogger配置文件&lt;/li&gt;
&lt;/ul&gt;
&lt;div class="highlight bash"&gt;&lt;div class="ribbon"&gt;&lt;/div&gt;&lt;table class="CodeRay"&gt;&lt;tr&gt;
  &lt;td class="line-numbers" title="double click to toggle" ondblclick="with (this.firstChild.style) { display = (display == '') ? 'none' : '' }"&gt;&lt;pre&gt;1
2
&lt;/pre&gt;&lt;/td&gt;
  &lt;td class="code"&gt;&lt;pre&gt;cp /etc
cp mfsmetalogger.cfg.dist mfsmetalogger.cfg&lt;/pre&gt;&lt;/td&gt;
&lt;/tr&gt;&lt;/table&gt;
&lt;/div&gt;
&lt;ul&gt;
&lt;li&gt;配置mfsmaster的IP地址&lt;/li&gt;
&lt;/ul&gt;
&lt;div class="highlight bash"&gt;&lt;div class="ribbon"&gt;&lt;/div&gt;&lt;table class="CodeRay"&gt;&lt;tr&gt;
  &lt;td class="line-numbers" title="double click to toggle" ondblclick="with (this.firstChild.style) { display = (display == '') ? 'none' : '' }"&gt;&lt;pre&gt;1
2
3
&lt;/pre&gt;&lt;/td&gt;
  &lt;td class="code"&gt;&lt;pre&gt;vi /etc/hosts
# 例如
192.168.1.81  mfsmaster&lt;/pre&gt;&lt;/td&gt;
&lt;/tr&gt;&lt;/table&gt;
&lt;/div&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;启动mfsmetalogger服务&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;div class="highlight bash"&gt;&lt;div class="ribbon"&gt;&lt;/div&gt;&lt;table class="CodeRay"&gt;&lt;tr&gt;
  &lt;td class="line-numbers" title="double click to toggle" ondblclick="with (this.firstChild.style) { display = (display == '') ? 'none' : '' }"&gt;&lt;pre&gt;
&lt;/pre&gt;&lt;/td&gt;
  &lt;td class="code"&gt;&lt;pre&gt;/usr/sbin/mfsmetalogger start&lt;/pre&gt;&lt;/td&gt;
&lt;/tr&gt;&lt;/table&gt;
&lt;/div&gt;&lt;h3 id='toc_mfs-chunk-server'&gt;mfs数据节点(chunk server)&lt;/h3&gt;&lt;h4 id='toc_'&gt;安装说明&lt;/h4&gt;
&lt;ul&gt;
&lt;li&gt;安装Ubuntu Server 12.04 LTS AMD64&lt;/li&gt;
&lt;li&gt;下载&lt;a href="http://www.moosefs.org/download.html"&gt;mfs-1.6.25.tar.gz&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;安装编译工具和依赖库&lt;/li&gt;
&lt;/ul&gt;
&lt;div class="highlight bash"&gt;&lt;div class="ribbon"&gt;&lt;/div&gt;&lt;table class="CodeRay"&gt;&lt;tr&gt;
  &lt;td class="line-numbers" title="double click to toggle" ondblclick="with (this.firstChild.style) { display = (display == '') ? 'none' : '' }"&gt;&lt;pre&gt;1
2
&lt;/pre&gt;&lt;/td&gt;
  &lt;td class="code"&gt;&lt;pre&gt;apt-get install build-essential
apt-get install zlib1g-dev&lt;/pre&gt;&lt;/td&gt;
&lt;/tr&gt;&lt;/table&gt;
&lt;/div&gt;
&lt;ul&gt;
&lt;li&gt;添加系统用户&lt;/li&gt;
&lt;/ul&gt;
&lt;div class="highlight bash"&gt;&lt;div class="ribbon"&gt;&lt;/div&gt;&lt;table class="CodeRay"&gt;&lt;tr&gt;
  &lt;td class="line-numbers" title="double click to toggle" ondblclick="with (this.firstChild.style) { display = (display == '') ? 'none' : '' }"&gt;&lt;pre&gt;1
2
&lt;/pre&gt;&lt;/td&gt;
  &lt;td class="code"&gt;&lt;pre&gt;groupadd mfs
useradd -g mfs mfs&lt;/pre&gt;&lt;/td&gt;
&lt;/tr&gt;&lt;/table&gt;
&lt;/div&gt;
&lt;ul&gt;
&lt;li&gt;编译并安装&lt;/li&gt;
&lt;/ul&gt;
&lt;div class="highlight bash"&gt;&lt;div class="ribbon"&gt;&lt;/div&gt;&lt;table class="CodeRay"&gt;&lt;tr&gt;
  &lt;td class="line-numbers" title="double click to toggle" ondblclick="with (this.firstChild.style) { display = (display == '') ? 'none' : '' }"&gt;&lt;pre&gt;1
2
3
4
5
6
&lt;/pre&gt;&lt;/td&gt;
  &lt;td class="code"&gt;&lt;pre&gt;cd /usr/src
tar zxvf mfs-1.6.25.tar.gz
cd mfs-1.6.25
./configure --prefix=/usr --sysconfdir=/etc --localstatedir=/var/lib
--with-default-user=mfs --with-default-group=mfs --disable-mfsmaster
make &amp;amp;&amp;amp; make install&lt;/pre&gt;&lt;/td&gt;
&lt;/tr&gt;&lt;/table&gt;
&lt;/div&gt;
&lt;ul&gt;
&lt;li&gt;&lt;p&gt;配置服务器&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;通过模板创建缺省的配置文件&lt;/li&gt;
&lt;/ul&gt;
&lt;div class="highlight bash"&gt;&lt;div class="ribbon"&gt;&lt;/div&gt;&lt;table class="CodeRay"&gt;&lt;tr&gt;
  &lt;td class="line-numbers" title="double click to toggle" ondblclick="with (this.firstChild.style) { display = (display == '') ? 'none' : '' }"&gt;&lt;pre&gt;1
2
3
&lt;/pre&gt;&lt;/td&gt;
  &lt;td class="code"&gt;&lt;pre&gt;cp /etc
cp mfschunkserver.cfg.dist mfschunkserver.cfg
cp mfshdd.cfg.dist mfshdd.cfg&lt;/pre&gt;&lt;/td&gt;
&lt;/tr&gt;&lt;/table&gt;
&lt;/div&gt;
&lt;ul&gt;
&lt;li&gt;配置挂载的硬盘&lt;/li&gt;
&lt;/ul&gt;
&lt;div class="highlight bash"&gt;&lt;div class="ribbon"&gt;&lt;/div&gt;&lt;table class="CodeRay"&gt;&lt;tr&gt;
  &lt;td class="line-numbers" title="double click to toggle" ondblclick="with (this.firstChild.style) { display = (display == '') ? 'none' : '' }"&gt;&lt;pre&gt;1
2
3
4
&lt;/pre&gt;&lt;/td&gt;
  &lt;td class="code"&gt;&lt;pre&gt;vi /etc/mfshdd.conf
# 例如
/mnt/mfschunks1
/mnt/mfschunks2&lt;/pre&gt;&lt;/td&gt;
&lt;/tr&gt;&lt;/table&gt;
&lt;/div&gt;
&lt;ul&gt;
&lt;li&gt;配置挂载目录使用户mfs有写权限&lt;/li&gt;
&lt;/ul&gt;
&lt;div class="highlight bash"&gt;&lt;div class="ribbon"&gt;&lt;/div&gt;&lt;table class="CodeRay"&gt;&lt;tr&gt;
  &lt;td class="line-numbers" title="double click to toggle" ondblclick="with (this.firstChild.style) { display = (display == '') ? 'none' : '' }"&gt;&lt;pre&gt;1
2
&lt;/pre&gt;&lt;/td&gt;
  &lt;td class="code"&gt;&lt;pre&gt;chown -R mfs:mfs /mnt/mfschunks1
chown -R mfs:mfs /mnt/mfschunks2&lt;/pre&gt;&lt;/td&gt;
&lt;/tr&gt;&lt;/table&gt;
&lt;/div&gt;
&lt;ul&gt;
&lt;li&gt;配置mfsmaster的IP地址&lt;/li&gt;
&lt;/ul&gt;
&lt;div class="highlight bash"&gt;&lt;div class="ribbon"&gt;&lt;/div&gt;&lt;table class="CodeRay"&gt;&lt;tr&gt;
  &lt;td class="line-numbers" title="double click to toggle" ondblclick="with (this.firstChild.style) { display = (display == '') ? 'none' : '' }"&gt;&lt;pre&gt;1
2
3
&lt;/pre&gt;&lt;/td&gt;
  &lt;td class="code"&gt;&lt;pre&gt;vi /etc/hosts
# 例如
192.168.1.81  mfsmaster&lt;/pre&gt;&lt;/td&gt;
&lt;/tr&gt;&lt;/table&gt;
&lt;/div&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;启动mfschunkserver服务&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;div class="highlight bash"&gt;&lt;div class="ribbon"&gt;&lt;/div&gt;&lt;table class="CodeRay"&gt;&lt;tr&gt;
  &lt;td class="line-numbers" title="double click to toggle" ondblclick="with (this.firstChild.style) { display = (display == '') ? 'none' : '' }"&gt;&lt;pre&gt;
&lt;/pre&gt;&lt;/td&gt;
  &lt;td class="code"&gt;&lt;pre&gt;/usr/sbin/mfschunkserver start&lt;/pre&gt;&lt;/td&gt;
&lt;/tr&gt;&lt;/table&gt;
&lt;/div&gt;&lt;h3 id='toc_'&gt;客户端安装&lt;/h3&gt;&lt;h4 id='toc_'&gt;安装说明&lt;/h4&gt;
&lt;ul&gt;
&lt;li&gt;安装Ubuntu Server 12.04 LTS AMD64&lt;/li&gt;
&lt;li&gt;下载&lt;a href="http://sourceforge.net/projects/fuse/files/latest/download"&gt;fuse&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;下载&lt;a href="http://www.moosefs.org/download.html"&gt;mfs-1.6.25.tar.gz&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;安装编译工具和依赖库&lt;/li&gt;
&lt;/ul&gt;
&lt;div class="highlight bash"&gt;&lt;div class="ribbon"&gt;&lt;/div&gt;&lt;table class="CodeRay"&gt;&lt;tr&gt;
  &lt;td class="line-numbers" title="double click to toggle" ondblclick="with (this.firstChild.style) { display = (display == '') ? 'none' : '' }"&gt;&lt;pre&gt;1
2
&lt;/pre&gt;&lt;/td&gt;
  &lt;td class="code"&gt;&lt;pre&gt;apt-get install build-essential
apt-get install zlib1g-dev&lt;/pre&gt;&lt;/td&gt;
&lt;/tr&gt;&lt;/table&gt;
&lt;/div&gt;
&lt;ul&gt;
&lt;li&gt;编译并安装fuse&lt;/li&gt;
&lt;/ul&gt;
&lt;div class="highlight bash"&gt;&lt;div class="ribbon"&gt;&lt;/div&gt;&lt;table class="CodeRay"&gt;&lt;tr&gt;
  &lt;td class="line-numbers" title="double click to toggle" ondblclick="with (this.firstChild.style) { display = (display == '') ? 'none' : '' }"&gt;&lt;pre&gt;1
2
3
4
&lt;/pre&gt;&lt;/td&gt;
  &lt;td class="code"&gt;&lt;pre&gt;cd /usr/src
tar zxvf fuse-2.9.0.tar.gz
./configure
make &amp;amp;&amp;amp; make install&lt;/pre&gt;&lt;/td&gt;
&lt;/tr&gt;&lt;/table&gt;
&lt;/div&gt;
&lt;ul&gt;
&lt;li&gt;编译并安装mfs&lt;/li&gt;
&lt;/ul&gt;
&lt;div class="highlight bash"&gt;&lt;div class="ribbon"&gt;&lt;/div&gt;&lt;table class="CodeRay"&gt;&lt;tr&gt;
  &lt;td class="line-numbers" title="double click to toggle" ondblclick="with (this.firstChild.style) { display = (display == '') ? 'none' : '' }"&gt;&lt;pre&gt;1
2
3
4
5
6
7
&lt;/pre&gt;&lt;/td&gt;
  &lt;td class="code"&gt;&lt;pre&gt;cd /usr/src
tar zxvf mfs-1.6.25.tar.gz
cd mfs-1.6.25
./configure --prefix=/usr --sysconfdir=/etc --localstatedir=/var/lib
--with-default-user=mfs --with-default-group=mfs --disable-mfsmaster
--disable-mfschunkserver
make &amp;amp;&amp;amp; make install&lt;/pre&gt;&lt;/td&gt;
&lt;/tr&gt;&lt;/table&gt;
&lt;/div&gt;
&lt;ul&gt;
&lt;li&gt;配置mfsmaster的IP地址&lt;/li&gt;
&lt;/ul&gt;
&lt;div class="highlight bash"&gt;&lt;div class="ribbon"&gt;&lt;/div&gt;&lt;table class="CodeRay"&gt;&lt;tr&gt;
  &lt;td class="line-numbers" title="double click to toggle" ondblclick="with (this.firstChild.style) { display = (display == '') ? 'none' : '' }"&gt;&lt;pre&gt;1
2
3
&lt;/pre&gt;&lt;/td&gt;
  &lt;td class="code"&gt;&lt;pre&gt;vi /etc/hosts
# 例如
192.168.1.81  mfsmaster&lt;/pre&gt;&lt;/td&gt;
&lt;/tr&gt;&lt;/table&gt;
&lt;/div&gt;
&lt;ul&gt;
&lt;li&gt;挂载MFS文件系统&lt;/li&gt;
&lt;/ul&gt;
&lt;div class="highlight bash"&gt;&lt;div class="ribbon"&gt;&lt;/div&gt;&lt;table class="CodeRay"&gt;&lt;tr&gt;
  &lt;td class="line-numbers" title="double click to toggle" ondblclick="with (this.firstChild.style) { display = (display == '') ? 'none' : '' }"&gt;&lt;pre&gt;1
2
&lt;/pre&gt;&lt;/td&gt;
  &lt;td class="code"&gt;&lt;pre&gt;mkdir -p /mnt/mfs
/usr/bin/mfsmount /mnt/mfs -H mfsmaster&lt;/pre&gt;&lt;/td&gt;
&lt;/tr&gt;&lt;/table&gt;
&lt;/div&gt;
&lt;ul&gt;
&lt;li&gt;查看是否正确挂载&lt;/li&gt;
&lt;/ul&gt;
&lt;div class="highlight bash"&gt;&lt;div class="ribbon"&gt;&lt;/div&gt;&lt;table class="CodeRay"&gt;&lt;tr&gt;
  &lt;td class="line-numbers" title="double click to toggle" ondblclick="with (this.firstChild.style) { display = (display == '') ? 'none' : '' }"&gt;&lt;pre&gt;
&lt;/pre&gt;&lt;/td&gt;
  &lt;td class="code"&gt;&lt;pre&gt;df -h | grep mfs&lt;/pre&gt;&lt;/td&gt;
&lt;/tr&gt;&lt;/table&gt;
&lt;/div&gt;</content>
  </entry>
  <entry>
    <title>Ubuntu 12.04 LTS AMD64下搭建Ruby集成开发环境</title>
    <link rel="alternate" href="/blog/2012/07/12/set-up-ruby-ide-on-ubuntu-12-04-server-amd64/"/>
    <id>/blog/2012/07/12/set-up-ruby-ide-on-ubuntu-12-04-server-amd64/</id>
    <published>2012-07-12T00:00:00Z</published>
    <updated>2012-07-12T00:00:00Z</updated>
    <author>
      <name>Article Author</name>
    </author>
    <summary type="html">&lt;h3 id='toc_ubuntu'&gt;安装Ubuntu&lt;/h3&gt;
&lt;ul&gt;
&lt;li&gt;开机启动插入光盘，按F12进入启动设备选择，然后选择从光盘启动。&lt;/li&gt;
&lt;li&gt;选择语言为英语，然后检查准备情况，要求磁盘空间足够，直接点“继续”按钮。&lt;/li&gt;
&lt;li&gt;选择安装类型为删除全部并重新安装。&lt;/li&gt;
&lt;li&gt;接下来进入磁盘分区，此次安装共分四个分区，其各分区属性如下：&lt;br&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;</summary>
    <content type="html">&lt;h3 id='toc_ubuntu'&gt;安装Ubuntu&lt;/h3&gt;
&lt;ul&gt;
&lt;li&gt;开机启动插入光盘，按F12进入启动设备选择，然后选择从光盘启动。&lt;/li&gt;
&lt;li&gt;选择语言为英语，然后检查准备情况，要求磁盘空间足够，直接点“继续”按钮。&lt;/li&gt;
&lt;li&gt;选择安装类型为删除全部并重新安装。&lt;/li&gt;
&lt;li&gt;接下来进入磁盘分区，此次安装共分四个分区，其各分区属性如下：&lt;br&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;/p&gt;
&lt;div class="highlight "&gt;&lt;div class="ribbon"&gt;&lt;/div&gt;&lt;table class="CodeRay"&gt;&lt;tr&gt;
  &lt;td class="line-numbers" title="double click to toggle" ondblclick="with (this.firstChild.style) { display = (display == '') ? 'none' : '' }"&gt;&lt;pre&gt;1
2
3
4
5
&lt;/pre&gt;&lt;/td&gt;
  &lt;td class="code"&gt;&lt;pre&gt;挂载点     主分区/逻辑分区     文件类型      分区容量（MB）
/根分区       主分区           ext4         50000
/swap分区     主分区           swap         8000
/boot分区     主分区           ext2         200 
/home分区     主分区           ext4      余下所有容量&lt;/pre&gt;&lt;/td&gt;
&lt;/tr&gt;&lt;/table&gt;
&lt;/div&gt;
&lt;p&gt;然后进行具体操作，双击“free space”（空闲空间），点击“New partition”（新建分区），每个分区按此步骤利用上述信息进行分区，点击“OK”即可，全部设置完毕后点击“继续”。&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;此时询问地区，点击“继续”或选择从地图上选择地区。&lt;/li&gt;
&lt;li&gt;此时是键盘布局，选择“美式键盘”，点击继续。&lt;/li&gt;
&lt;li&gt;这一步输入用户的姓名及密码，输入完成点击“继续”。&lt;/li&gt;
&lt;li&gt;然后继续安装过程，此时Ubuntu会给出相应的系统介绍。&lt;/li&gt;
&lt;li&gt;此时安装完毕，选择重启系统。&lt;/li&gt;
&lt;/ul&gt;
&lt;h3 id='toc_rvm'&gt;安装RVM&lt;/h3&gt;
&lt;p&gt;RVM，是Ruby Version Manager的首字母简写，是个ruby版本管理器。如ubuntu系统之前安装了一个ruby，那在你安装了RVM之后还可以使用RVM来安装另一版本的Ruby（可以装很多个不同版本的ruby），然后RVM可以不同版本之间进行切换使用。开始安装rvm：&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;安装依赖的应用；&lt;/li&gt;
&lt;/ul&gt;
&lt;div class="highlight bash"&gt;&lt;div class="ribbon"&gt;&lt;/div&gt;&lt;table class="CodeRay"&gt;&lt;tr&gt;
  &lt;td class="line-numbers" title="double click to toggle" ondblclick="with (this.firstChild.style) { display = (display == '') ? 'none' : '' }"&gt;&lt;pre&gt;
&lt;/pre&gt;&lt;/td&gt;
  &lt;td class="code"&gt;&lt;pre&gt;sudo apt-get install curl git-core&lt;/pre&gt;&lt;/td&gt;
&lt;/tr&gt;&lt;/table&gt;
&lt;/div&gt;
&lt;ul&gt;
&lt;li&gt;安装RVM；&lt;/li&gt;
&lt;/ul&gt;
&lt;div class="highlight bash"&gt;&lt;div class="ribbon"&gt;&lt;/div&gt;&lt;table class="CodeRay"&gt;&lt;tr&gt;
  &lt;td class="line-numbers" title="double click to toggle" ondblclick="with (this.firstChild.style) { display = (display == '') ? 'none' : '' }"&gt;&lt;pre&gt;
&lt;/pre&gt;&lt;/td&gt;
  &lt;td class="code"&gt;&lt;pre&gt;curl -L https://get.rvm.io | bash -s stable&lt;/pre&gt;&lt;/td&gt;
&lt;/tr&gt;&lt;/table&gt;
&lt;/div&gt;&lt;h3 id='toc_ruby'&gt;安装Ruby&lt;/h3&gt;
&lt;ul&gt;
&lt;li&gt;安装Ruby依赖；通过运行&lt;code&gt;rvm
requirements&lt;/code&gt;来查看待安装发行版ruby的依赖安装方法，并安装；&lt;/li&gt;
&lt;li&gt;安装指定ruby发行版；如：&lt;/li&gt;
&lt;/ul&gt;
&lt;div class="highlight bash"&gt;&lt;div class="ribbon"&gt;&lt;/div&gt;&lt;table class="CodeRay"&gt;&lt;tr&gt;
  &lt;td class="line-numbers" title="double click to toggle" ondblclick="with (this.firstChild.style) { display = (display == '') ? 'none' : '' }"&gt;&lt;pre&gt;1
2
&lt;/pre&gt;&lt;/td&gt;
  &lt;td class="code"&gt;&lt;pre&gt;# 安装Ruby MRI 1.9.3
rvm install 1.9.3&lt;/pre&gt;&lt;/td&gt;
&lt;/tr&gt;&lt;/table&gt;
&lt;/div&gt;
&lt;ul&gt;
&lt;li&gt;设置默认的ruby版本。&lt;/li&gt;
&lt;/ul&gt;
&lt;div class="highlight bash"&gt;&lt;div class="ribbon"&gt;&lt;/div&gt;&lt;table class="CodeRay"&gt;&lt;tr&gt;
  &lt;td class="line-numbers" title="double click to toggle" ondblclick="with (this.firstChild.style) { display = (display == '') ? 'none' : '' }"&gt;&lt;pre&gt;
&lt;/pre&gt;&lt;/td&gt;
  &lt;td class="code"&gt;&lt;pre&gt;rvm --default use 1.9.3&lt;/pre&gt;&lt;/td&gt;
&lt;/tr&gt;&lt;/table&gt;
&lt;/div&gt;
&lt;p&gt;&lt;strong&gt;注意：&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;如果安装ruby的过程出现rubygems下载不成功（可能因为目标地址被墙），需要修改&lt;code&gt;~/.rvm/config/db&lt;/code&gt;文件，找到&lt;code&gt;rubygems&lt;/code&gt;下载路径配置项，将其修改为&lt;code&gt;http://rubyforge.org/frs/download.php/76073/rubygems-1.8.24.tgz&lt;/code&gt;。如果rubygems版本不一样，请做相应修改。&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;如果执行&lt;code&gt;rvm&lt;/code&gt;命令，出现如下提示：&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;div class="highlight "&gt;&lt;div class="ribbon"&gt;&lt;/div&gt;&lt;table class="CodeRay"&gt;&lt;tr&gt;
  &lt;td class="line-numbers" title="double click to toggle" ondblclick="with (this.firstChild.style) { display = (display == '') ? 'none' : '' }"&gt;&lt;pre&gt;
&lt;/pre&gt;&lt;/td&gt;
  &lt;td class="code"&gt;&lt;pre&gt;  RVM is not a function, selecting rubies with 'rvm use ...' will not work&lt;/pre&gt;&lt;/td&gt;
&lt;/tr&gt;&lt;/table&gt;
&lt;/div&gt;
&lt;p&gt;需要修改~/.bashrc，将&lt;code&gt;source ~/.rvm/scripts/rvm&lt;/code&gt;加入到文件最后，并执行&lt;code&gt;source .bashrc&lt;/code&gt;让配置生效。&lt;/p&gt;
&lt;h3 id='toc_janus'&gt;安装Janus&lt;/h3&gt;
&lt;ul&gt;
&lt;li&gt;安装vim；&lt;/li&gt;
&lt;/ul&gt;
&lt;div class="highlight bash"&gt;&lt;div class="ribbon"&gt;&lt;/div&gt;&lt;table class="CodeRay"&gt;&lt;tr&gt;
  &lt;td class="line-numbers" title="double click to toggle" ondblclick="with (this.firstChild.style) { display = (display == '') ? 'none' : '' }"&gt;&lt;pre&gt;
&lt;/pre&gt;&lt;/td&gt;
  &lt;td class="code"&gt;&lt;pre&gt;sudo apt-get install vim&lt;/pre&gt;&lt;/td&gt;
&lt;/tr&gt;&lt;/table&gt;
&lt;/div&gt;
&lt;ul&gt;
&lt;li&gt;安装工具；&lt;/li&gt;
&lt;/ul&gt;
&lt;div class="highlight bash"&gt;&lt;div class="ribbon"&gt;&lt;/div&gt;&lt;table class="CodeRay"&gt;&lt;tr&gt;
  &lt;td class="line-numbers" title="double click to toggle" ondblclick="with (this.firstChild.style) { display = (display == '') ? 'none' : '' }"&gt;&lt;pre&gt;
&lt;/pre&gt;&lt;/td&gt;
  &lt;td class="code"&gt;&lt;pre&gt;sudo apt-get install ack-grep ctags&lt;/pre&gt;&lt;/td&gt;
&lt;/tr&gt;&lt;/table&gt;
&lt;/div&gt;
&lt;ul&gt;
&lt;li&gt;安装Janus。&lt;/li&gt;
&lt;/ul&gt;
&lt;div class="highlight bash"&gt;&lt;div class="ribbon"&gt;&lt;/div&gt;&lt;table class="CodeRay"&gt;&lt;tr&gt;
  &lt;td class="line-numbers" title="double click to toggle" ondblclick="with (this.firstChild.style) { display = (display == '') ? 'none' : '' }"&gt;&lt;pre&gt;
&lt;/pre&gt;&lt;/td&gt;
  &lt;td class="code"&gt;&lt;pre&gt;curl -Lo- &amp;lt;https://bit.ly/janus-bootstrap&amp;gt; | bash&lt;/pre&gt;&lt;/td&gt;
&lt;/tr&gt;&lt;/table&gt;
&lt;/div&gt;&lt;h3 id='toc_oh-my-zsh'&gt;安装oh-my-zsh&lt;/h3&gt;
&lt;ul&gt;
&lt;li&gt;首先安装zsh；&lt;/li&gt;
&lt;/ul&gt;
&lt;div class="highlight bash"&gt;&lt;div class="ribbon"&gt;&lt;/div&gt;&lt;table class="CodeRay"&gt;&lt;tr&gt;
  &lt;td class="line-numbers" title="double click to toggle" ondblclick="with (this.firstChild.style) { display = (display == '') ? 'none' : '' }"&gt;&lt;pre&gt;
&lt;/pre&gt;&lt;/td&gt;
  &lt;td class="code"&gt;&lt;pre&gt;sudo apt-get install zsh&lt;/pre&gt;&lt;/td&gt;
&lt;/tr&gt;&lt;/table&gt;
&lt;/div&gt;
&lt;ul&gt;
&lt;li&gt;安装oh-my-zsh；&lt;/li&gt;
&lt;/ul&gt;
&lt;div class="highlight bash"&gt;&lt;div class="ribbon"&gt;&lt;/div&gt;&lt;table class="CodeRay"&gt;&lt;tr&gt;
  &lt;td class="line-numbers" title="double click to toggle" ondblclick="with (this.firstChild.style) { display = (display == '') ? 'none' : '' }"&gt;&lt;pre&gt;
&lt;/pre&gt;&lt;/td&gt;
  &lt;td class="code"&gt;&lt;pre&gt;curl -L https://github.com/robbyrussell/oh-my-zsh/raw/master/tools/install.sh | sh&lt;/pre&gt;&lt;/td&gt;
&lt;/tr&gt;&lt;/table&gt;
&lt;/div&gt;
&lt;ul&gt;
&lt;li&gt;配置启用的插件。修改~/.zshrc，设置：&lt;/li&gt;
&lt;/ul&gt;
&lt;div class="highlight bash"&gt;&lt;div class="ribbon"&gt;&lt;/div&gt;&lt;table class="CodeRay"&gt;&lt;tr&gt;
  &lt;td class="line-numbers" title="double click to toggle" ondblclick="with (this.firstChild.style) { display = (display == '') ? 'none' : '' }"&gt;&lt;pre&gt;
&lt;/pre&gt;&lt;/td&gt;
  &lt;td class="code"&gt;&lt;pre&gt;plugins=(git git-flow bundler github heroku rails rails3 ruby rvm gem rake vi-mode)&lt;/pre&gt;&lt;/td&gt;
&lt;/tr&gt;&lt;/table&gt;
&lt;/div&gt;</content>
  </entry>
</feed>