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.'"}';
?>
好了，项目完成。
