Sencha Touch Guide

 1.一些命令

创建APP

#  Make sure the current working directory is the Sencha Touch 2 SDK 例如D:\Program Files\wamp\www\sencha-touch-2.1.1-commercial

cd /path/to/sencha-touch-2-sdk

sencha generate app MyApp /path/to/www/myapp

　　

生成模型MODEL

cd /path/to/www/myapp

sencha generate model User id:int,name,email

更新

cd /path/to/www/myapp

sencha app upgrade /path/to/new_version_of_sdk

2.Demo实例　　

根据官方的指导手册，使用Sencha Cmd我们可以快速的创建一个App.

我们首先预览一下改进的界面：

Pic-1 首页

pic-2 音乐

pic-3 视频

pic-4 blog

pic-5 联系我们

1）修改 MyApp\app\view目录下的MainView.js 文件

Ext.define('MyApp.view.Main', {
    extend: 'Ext.tab.Panel',
    xtype: 'main',
    requires: [
        'Ext.TitleBar',
        'Ext.Video',
        'Ext.dataview.NestedList',
        'Ext.data.proxy.JsonP',
        'Ext.form.Panel',
        'Ext.Audio',
        'Ext.form.FieldSet',
        'Ext.field.Email'
    ],
    config: {
    	 xtype: 'tabpanel',
         fullscreen: true,
         tabBarPosition: 'bottom',

        items: [
            {
                title: '首页',
                iconCls: 'home',
                scrollable: true,
                cls: 'home',

                html: [
                        '<p> </p>',
						'<img height=260 src="resources/icons/yu.png" />',
						'<h1>欢迎来到【鱼的记忆】</h1>',
						'<p>Hi, I\'m Tony, Welcome to my blog, may you will like it.',
						'<br/>[1]联系方式: leegtang@126.com</p>',
						'<h2>--鱼的记忆</h2>'
                ].join("")
            },
            {
            	 title: '音乐',
                 iconCls: 'volume',
                 displayField: 'title',
                 xtype: 'audio',
                 url  : 'resources/audio/adq.mp3'

            },
            {
           	 	title: '视频',
                iconCls: 'video',
                xtype    : 'video',
                x        : 600,
                y        : 300,
                width    : 428,
                height   : 320,
                url      : "resources/audio/dby.mp4",
                posterUrl: 'resources/audio/dby.png' 

           },
            {
            	 xtype: 'nestedlist',
                 title: '博客',
                 iconCls: 'star',
                 displayField: 'title',

                 store: {
                     type: 'tree',

                     fields: [
                         'title', 'link', 'author', 'contentSnippet', 'content',
                         {name: 'leaf', defaultValue: true}
                     ],

                     root: {
                         leaf: false
                     },

                     proxy: {
                         type: 'jsonp',
                         url: 'blog.php',
                         //url: 'https://ajax.googleapis.com/ajax/services/feed/load?v=1.0&q=http://feeds.feedburner.com/SenchaBlog',
                         reader: {
                             type: 'json',
                             rootProperty: 'responseData.feed.entries'
                         }
                     }
                 },
                 detailCard: {
                     xtype: 'panel',
                     scrollable: true,
                     styleHtmlContent: true
                 },

                 listeners: {
                     itemtap: function(nestedList, list, index, element, post) {
                         this.getDetailCard().setHtml(post.get('content'));
                     }
                 }
            },
            {
                title: '联系我们',
                iconCls: 'user',
                xtype: 'formpanel',
                url: 'contact.php',
                layout: 'vbox',

                items: [
                    {
                        xtype: 'fieldset',
                        title: '联系我们',
                        instructions: '(<font color="red">*</font>为必填项)',
                        height: 285,
                        items: [
                                {
                                    xtype: 'textfield',
                                    label: '姓名<font color="red">*</font>',
                                    name: 'name'
                                },
                                {
                                    xtype: 'emailfield',
                                    label: 'Email<font color="red">*</font>',
                                    name: 'email'
                                },
                                {
                                    xtype: 'textareafield',
                                    label: '内容<font color="red">*</font>',
                                    name: 'message',
                                    height: 90
                                }
                        ]
                    },
                    {
                    	 xtype: 'button',
                         text: '提交',
                         ui: 'confirm',

                         // The handler is called when the button is tapped
                         handler: function() {

                             // This looks up the items stack above, getting a reference to the first form it see
                             var form = this.up('formpanel');

	                             // Sends an AJAX request with the form data to the url specified above (contact.php).
	                             // The success callback is called if we get a non-error response from the server
	                             form.submit({
	                            	 waitMsg: '正在提交...',
	                                 success: function() {
	                                     // The callback function is run when the user taps the 'ok' button
	                                     Ext.Msg.alert('非常感谢', '您的内容已经提交，我们会尽快联系你。', function() {
	                                         form.reset();
	                                     });
	                                 },
	                                 failure: function(form,action){
	                                	 Ext.Msg.alert('内容提交失败', action.errormsg);
	                                 }
	                             });
                         }
                    }
                ]
            }
        ]
    }
});

2）修改MyApp\resources\css目录下的 app.css，增加一下内容

.home {
	text-align: center;
}

.home h1 {
	font-weight: bold;
	font-size: 1.2em
}

.home p {
	color: #666;
	font-size: 0.8em;
	line-height: 1.6em;
	margin: 10px 20px 20px 20px
}

.home img {
	margin-top: -10px
}

.home h2 {
	color: #999;
	font-size: 0.7em
}

.blog p {
	color: #555;
	padding: 20px 20px 0 20px;
	font-size: 1em;
	line-height: 1.4em
}
.x-tab .x-button-icon.volume:before,.x-button .x-button-icon.volume:before {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	text-align: center;
	font-family: "Pictos";
	content: "B";
}

.x-tab .x-button-icon.video:before,.x-button .x-button-icon.video:before {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	text-align: center;
	font-family: "Pictos";
	content: "V";
}

3）增加MainView.js中涉及的资源文件

4）添加blog.php

<?php
/**
 * Blog feed data
 *
 */
/**
 * {
    responseData: {
        feed: {
            entries: [
                {author: 'Bob', title: 'Great Post', content: 'Really good content...'}
            ]
        }
    }
}
 */

/**
 * http://localhost/MyApp/blog.php?_dc=1396706826288&node=ext-data-treestore-1-root&page=1&start=0&limit=25&callback=Ext.data.JsonP.callback1
 */
header("Content-type:application/json;charset=utf8;");
$jsonp=$_GET['callback'].'({"responseData":{"feed":{"entries":[';

for($i=1;$i<21;$i++){
	$author=json_encode('leegtang');
	$title=json_encode('今天的博文标题'.$i);
	$content=json_encode('博文'.$i.'内容');
	$contentSnippet=json_encode('博文'.$i.'内容简介');
	$link='blogv.php?id='.$i;
	$jsonp.='{"author":'.$author.',"title":'.$title.',"content":'.$content.',"link":"'.$link.'","contentSnippet":'.$contentSnippet.'}';
	if($i!=20)$jsonp.=',';
}

$jsonp.=']}},"responseStatus": 200});';
echo $jsonp;
?>

5)增加contact.php

<?php

$flag='false';
$msg='';
if($_POST['name'] == ''){
	$msg='请填写姓名';
}else if( $_POST['email'] == '' ){
	$msg='请填写Email';
}else if($_POST['message'] == ''){
	$msg='请填写内容';
}else{
	// 保存反馈信息
	// ....
	$flag='true'; 

}

echo '{"success":'.$flag.',"errormsg":"'.$msg.'"}';
?>

好了，项目完成。