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-sdksencha generate app MyApp /path/to/www/myapp
生成模型MODEL
cd /path/to/www/myappsencha generate model User id:int,name,email
更新
cd /path/to/www/myappsencha 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: [ '
', '
', '欢迎来到【鱼的记忆】
', 'Hi, I\'m Tony, Welcome to my blog, may you will like it.', '
[1]联系方式: leegtang@126.com', '--鱼的记忆
' ].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: '(*为必填项)', height: 285, items: [ { xtype: 'textfield', label: '姓名*', name: 'name' }, { xtype: 'emailfield', label: 'Email*', name: 'email' }, { xtype: 'textareafield', label: '内容*', 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
5)增加contact.php
好了，项目完成。