下次自动登录
现在的位置:
& 综合 & 正文
零基础学习Sencha Touch（资料和教程集合）
译者注：本篇为开发者提供了零基础使用Sencha Touch的一些资料。
Sencha Touch是专门为移动设备开发应用的Javascrt框架。通过Sencha Touch你可以创建非常像native app的web app，用户界面组件和数据管理全部基于HTML5和CSS3的web标准，全面兼容Android和Apple iOS。
在本系列中我们将会创建一个应用，允许该应用的用户做笔记，并且在运行的时候把笔记存储在设备上。
官方文件和示例
在这篇文章中，我们将会讲到开发你的第一个应用时会用到的基础知识，显示历史悠久的“”。
简易浏览模式下的一些非常好的例子。
译文来源：/
WebAppTrend是一个独立的技术博客，关注Web App前瞻和实践，以及智能浏览器发展
请大家在关注CSDN的同时，关注我们的新浪微博@WebAppTrend ：/webapptrend，QQ群见官方博客右侧。
&&&&推荐文章:
【上篇】【下篇】当前位置:&&
本页文章导读:
&&&&?sencha touch2学习札记(四)-panel容器 &&&&&& sencha touch2学习笔记(四)---panel容器
原文链接： /blog/1555211
在sencha touch2中，panel就是一个容器，可以容纳很多组件，可以控制布局。代码如下
Ext.application(
name:"......&&&&? Dialog式样 &&&&&& Dialog样式
styles.xml
&style name="Dialog" parent="android:style/Theme.Dialog"&
&item name="android:windowNoTitle"&true&/item&
&item name="android:windowFrame"&@null&/item& &!--边框--&
&item ......&&&&? 【转】一个容易的游戏服务器框架&&&&&& 【转】一个简单的游戏服务器框架
最近一段时间不是很忙，就写了一个自己的游戏服务器框架雏形，很多地方还不够完善，但是基本上也算是能够跑起来了。我先从上层结构说起，一直到......
&&&&&&最新IT科技资讯推荐:
[1]sencha touch2学习札记(四)-panel容器
&&&&来源:&互联网& 发布时间:&
sencha touch2学习笔记(四)---panel容器
原文链接： /blog/1555211
在sencha touch2中，panel就是一个容器，可以容纳很多组件，可以控制布局。代码如下
Ext.application(
name:"sencha",
launch:function()
var button = Ext.create('Ext.Button', {
text: 'Button',
id: 'rightButton'
Ext.create('Ext.Container', {
fullscreen: true,
docked: 'top',
xtype: 'titlebar',
Ext.create('Ext.Panel', {
html: 'Floating Panel',
padding: 10
}).showBy(button);
docked:'top'表示工具栏位置在上。这只是个hello world式的例子 。如果想了解复杂的应用，可以参看文档的介绍哦。
[2] Dialog式样
&&&&来源:&互联网& 发布时间:&
Dialog样式
styles.xml
&style name="Dialog" parent="android:style/Theme.Dialog"&
&item name="android:windowNoTitle"&true&/item&
&item name="android:windowFrame"&@null&/item& &!--边框--&
&item name="android:windowIsFloating"&true&/item& &!--是否浮现在activity之上--&
&item name="android:windowIsTranslucent"&true&/item&&!--半透明--&
&item name="android:background"&@android:color/transparent&/item&&!--背景透明--&
&item name="android:windowBackground"&@android:color/transparent&/item&&!--背景透明--&
&item name="android:backgroundDimEnabled"&true&/item& &!--蒙版- 模糊 --&
样式二：styles.xml
&style name="RecordAudioDialogSytle"&
&item name="android:windowContentOverlay"&@null&/item&
&item name="android:windowAnimationStyle"&@null&/item&
&item name="android:windowNoTitle"&true&/item&
&item name="android:windowNoDisplay"&true&/item&
&item name="android:windowIsFloating"&true&/item&
&item name="android:windowFrame"&@null&/item&
&item name="android:windowIsTranslucent"&false&/item&
&item name="android:windowBackground"&@drawable/filled_box&/item&
&item name="android:backgroundDimEnabled"&false&/item&
圆角设置：
filled_box.xml
&shape xmlns:android="/apk/res/android"&
&solid android:color="#ffffffff"/&
&stroke android:width="1dip" color="@android:color/transparent"/&
&corners android:radius="7dip" /&
&padding android:left="0dip" android:top="0dip"
android:right="0dip" android:bottom="0dip" /&
Dialog dialog = new Dialog(this,R.style.RecordAudioDialogSytle);
dialog.setCancelable(false);
dialog.setContentView(R.layout.main);
dialog.show();
android4.0设置状态栏:
private void setStatusBarState(boolean statusBarState){
StatusBarManager sbm = (StatusBarManager) mActivity.getSystemService("statusbar");
if(statusBarState){
sbm.disable(sbm.DISABLE_NONE);
sbm.disable(sbm.DISABLE_MASK);
&uses-permission android:name="android.permission.STATUS_BAR"/&
&uses-permission android:name="android.permission.DISABLE_STATUS_BAR"/&
[3] 【转】一个容易的游戏服务器框架
&&&&来源:&互联网& 发布时间:&
【转】一个简单的游戏服务器框架
最近一段时间不是很忙，就写了一个自己的游戏服务器框架雏形，很多地方还不够完善，但是基本上也算是能够跑起来了。我先从上层结构说起，一直到实现细节吧，想起什么就写什么。第一部分 服务器逻辑服务器这边简单的分为三个部分，客户端的连接首先到达网关服务器，网关这里有个线程用来监听来自与客户端的连接，然后在将这些数据发送到游戏逻辑服务器上，这个逻辑游戏服务器上，数据的交互就是通过与数据服务器进行交互。RecordServer专门用来处理与数据库的连接，查询这些事情。当然为了游戏服务器能够最大程度的不卡，肯定就得规定好网关服务器上的连接数量，免得像我们号称流畅的铁道部订票网络一样做个卡B，想想玩一局dota被卡的悲剧吧。当我们要做一个大型网游时，这三个服务器显然不够。当然在自己写的小游戏的时候就无所谓了，几个服务器全部架设在自己的破笔记本上，不就是启动几个程序而已。这个感觉写得就差不多了，到细节吧。第二部分 实现细节这个就比较乱了，零零散散的，随便写了。这里很多都是对各种工具的封装，以便于自己 在项目的使用1.make项目这么多目录，这么多子目录，肯定得用工具去编译了，使用aclocal,automake,autoconf,make,就把我们的程序编译好了，编写自己configure.in文件，定义编译选项、链接库等等一系列乱七八糟的东西，然后对每个需要编译的子项目编写Makefile.am,有的需要要编译成库的，比如base等基类这些，其他的都编译成可执行文件了，GatewayServer,LogicalServer,RecordServer。2.套接字封装，epoll使用linux里，我们使用socket来读写网络上的数据，这个很简单了，gateway上一个客户端连接过来，我们就为它分配一个socket 描述符了，在网关上，一个线程用来accept,一个线程用来做数据的处理，当accept一个连接请求后，放到数据处理的线程，接受到一个数据，然后直接转发到logical server上，我们使用epoll_wait，来处理套接上的读写处理。每n ms处理一次循环，每次循环中使用一次epoll_wait，一次把这些有事件的socket取出来。3.数据加密解密，压缩解压对网络上的数据，为了保证安全性，必须对它们进行加密解密处理，这个简单了，网上各种内容，这里就不说了（全部写完了，有时间再写）。对数据进行压缩，能减少带宽吞吐，就是简单的调用几个zlib函数的调用，不细说，在前面转发的《zlib使用》中有讲，发现自己太懒，实在是懒得打字了。4.线程封装，互斥量，读写锁这些都是简单的使用RAII或其他方式，对这些东西进行一次本地封装。（应该得写一个线程池去管理这些线程，todo）5.数据库封装使用mysql,使用mysql的C API函数，这个必须得封装一下，不是每次数据的处理，都得去做很多事情，实现一个本地的数据的Field(列),Record（记录）,Table（表）,DataBase（数据库）,RecordSet(查询结果集)。制作一个数据库连接句柄MysqlHandle，处理对数据库的连接，处理等，实现一个HandlerPool,，每次从Pool中取出一个句柄来对数据库进行查询，免得每次都去重新连接，什么的。6.自己的内存池在之前分享的文章中《内存池技术详解》《编写自己的内存分配器》，自己的《内存池应用》，已经很详细的说明了，内存池的制作，当然我在这里还是有一些改动的，但是大概思路就是这些了。7.有一个状态机的实现这个也在自己之前写的那个状态机相关的文章里，也做记录了。哈哈，实在是不想继续码字了，但是还是坚持下去。8.lua与c++交互框架这个暂时写了一半，等全部完成了，再来弄，反正就是像npc处理这些，脚本处理这些，使用tolua++。9.tinyxml封装，正则表达式封装tinyxml一个轻量级的xml解析器，很简单，反正是把这些现成的东西拿来自己用。正则表达式没有进入c++标准，但是还是很多现成的正则表达式的处理，直接用linux库下的regex.h,就是编译正则表达式，匹配结果这些，10.log系统一个项目怎么能没有自己的日志系统呢，反正就是打日志，往文件里面写东西，用std::fstream轻松搞定，定义好日志级别:error / debug / fatel / info这些11.时间封装这个必须有，否则自己还每次去调用get_clocktime,gmtime,time各种函数呀。12.使用boost库里的，Noncopyable,Singleton这些设计方法，来写我们的代码13.定义好各种信号句柄，信号发生时采用什么策略，如SIGPIPE，做忽略处理待续。。。。。。。。（睡觉了）游戏服务器技术应该算来已经很成熟了，相比客户端，它的技术更新速度很慢了。客户端这边，技术很多，各种游戏引擎比如3D的虚幻这些，什么粒子引擎，声音这些，页游的flash, html5,utility,，太多了，搞不过来呀。我先把服务器这边好好专专，其他的等以后再说吧。转自/zh-cn/blogs///?cid=sw:prccsdn2203
最新技术文章:
特别声明:169IT网站部分信息来自互联网,如果侵犯您的权利,请及时告知,本站将立即删除！
(C)2012-,站长邮箱:www_169it_(请将#改为@)当前访客身份：游客 [
已有文章 2086 篇
当前位置：
Sencha Touch 和 jQuery Mobile 的比较
英文原文：
0人收藏此文章,
推荐于 2年前 (共 7 段, 翻译完成于 08-02) ()
参与翻译(1人)：
很多人问我&(百度百科译者加) 和哪个更好。事实上，它两的区别就像是Web后台编程，PHP和Java。它们都能完成同样的功能，但其实它们是为不同的目的而创造的。
Sencha Touch基于web-kit浏览器并做了优化，而jQuery Mobile适用于一般浏览器。因为Sencha Touch做了优化，很多人觉得它比jQuery Mobile更棒。混合移动应用(类似用用Webview编程，译者注)会让Sencha Touch熠熠生辉，它会让移动应用非常流畅就像是用原生API开发的一样。但jQuery Mobile也会在不同的地方发光发彩的。与Sencha Touch只支持web-kit不同，jQuery Mobile在支持HTML5的浏览器工作的也是相当的漂亮。无论你是使用Windows，MAC OS，Android或是iOS系统，jQuery Mobile都能吸引你的眼球。
&翻译的不错哦!
Sencha Touch vs jQuery Mobile
下面我将以我个人经验来谈谈它们的不同，这也许不会很客观。就个人而言我不会偏袒任何一方，下面的章节经按组进行比较，每组都有胜者。
第一组-行销和平台支持
Sencha Touch和jQuery Mobile都以HTML5框架著称。jQuery Mobile谦虚的说自己只是内建于所有流行的移动设备平台，而Sencha Touch则说自己是唯一能让为开发者在iOS，Android，BlachBerry，Windows Phone等更多的OS上开发漂亮应用的框架。老实说，这种夸大其词的广告让我失望。我还没有发现它说的那样好，Sencha&Touch只能孤芳自赏了。
只支持web kit内核浏览器(据说这会在未来有所变化)
大家知道的，有很多移动应用框架比Sencha&Touch好
jQuery Mobile
很多框架都不会为某一特定的平台做优化的，包括jQuery Mobile(据说1.4版本会做一些优化)
结论：jQuery Mobile胜
&翻译的不错哦!
第二组-UI和视觉映像
正如您所见，Sencha Touch和jQuery Mobile在UI视觉是有些区别的。一个是完全的javascript驱动，而另一个是用HTML驱动的。这两种方式都可以展示漂亮的UI，但是Sencha 的UI更像是用原生API开发的一样(在混合应用程式中)。很不幸，它两在复杂UI程式中表现的就很糟糕了，尤其是jQuery Mobile.
Sencha Touch
在移动设备上，Sencha会比jQuery更加的流畅
Sencha遵循MVC哲学，它不会让你写任何HTML代码，一切基于javascript
Sencha 提供更多的UI元素和组件，比如说旋转
Sencha支持SVG(可缩放矢量图形，译者注)，对于游戏来说是个好事
Sencha Touch IDE是付费的，虽然这个和UI没有关系。
jQuery Mobile
于Sencha不同，jQuery Mobile UI更像是web UI
要想展现jQuery Mobile UI只要在HTML中加入jQuery Mobile CSS即可，就像是jQuery UI框架的使用一样
使用Ajax会让有些开发者在页面特效处理方面感到困惑
使用CSS会让一些UI看起来很相似，要让UI表现的不一样得额外花费时间来处理。比如说网站中的内容。
与Sencha Touch不同，jQuery Mobile得让你好好关心页面的构成，有时这是很麻烦的。所有都绑在了一起，这，时好时坏说不定。1.4版本也许会有所改善。
结论：Sencha Touch 胜
&翻译的不错哦!
第三组-可用性，使用的难易
这是个完全不同的比较。jQuery Mobile是标记语言驱动，它是依赖于jQuery并很容易控制的。如果你喜欢MVC模式，那你就得选择Sencha Touch。当然这会带来付费的问题，至少这会让不喜欢用javascript的人不顺心的。最后，咱这组比较就是比较使用的难易的。
Sencha Touch
全都是javascript，新手会有些迷惑
不容易上手
jQuery Mobile
如果你和大多人一样喜欢jQuery，你也会喜欢jQuery Mobile的
可以用Backbone.js或Knockout.js来弥补MVC设计方面的缺陷
支持很多不同的主题，而且一切都可以用CSS来操作
任何IDE都可以开发
结论：jQuery Mobile胜
&翻译的不错哦!
第四组-文档
再好的产品也会因此而被人们遗忘。它们两的文档都不错。Sencha Touch官方文档相当不错，jQuery Mobile文档的封面都是很漂亮的。但是，Sencha Touch的文档比jQuery Mobile的更好。
Sencha &Touch
比jQuery Moblie文档更好，而且不会让人困惑。
官方支持可不免费，也不会涉及IDE
jQuery Mobile
没达到Sencha Touch官方文档的水准
有博客，文章，论坛，Stackoverflow...等方式的支持
封面很漂亮
结论：Sencha Touch 胜
&翻译的不错哦!
第五组-工具，插件，第三方支持
这个话题也是很重要的,好的开发工具和插件会让开发者更容易上手。
Sencha Touch
支持自家本地应用程序
支持主题包
jQuery Mobile
Phonegap是支持本地应用的开发包，用jQuery Mobile开发Phonegap会让人感到有些怪
支持主题包，但支持的不全面，因为一些核心的CSS元素不容易更改，比如说已经被激活的元素
支持大量第三方插件，与jQuery插件兼容
比Sencha Touch更容易扩展
结论：平局，jQuery Mobile略胜一筹
&翻译的不错哦!
jQuery Mobile
不错的第三方支持，插件就是知识，知识就是力量
比Sencha Touch慢
APP几乎是同样的UI，如果你是个能忍的UI设计师，那你就可以接受这种呆滞的UI
官方文档缺少一些东西，因为其在UI方面介绍的太多而欠缺在架构方面的介绍
简单的混合应用程序
&!DOCTYPE html&
&title&jQM Complex Demo&/title&
&meta http-equiv='Content-Type' content='text/ charset=utf-8'/&
&meta name="viewport" content="width=device- initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable= target-densityDpi=device-dpi"/&
&link rel="stylesheet" href="/mobile/1.3.1/jquery.mobile-1.3.1.min.css" /&
&!--&script src="/jquery-1.9.1.min.js"&&/script&--&
&script src="/mobile/1.3.1/jquery.mobile-1.3.1.min.js"&&/script&
&div data-role="page" id="index"&
&div data-theme="b" data-role="header"&
&h1&Index page&/h1&
&div data-role="content"&
Sencha Touch
运行非非常流畅，有中像是原生API开发的一样
文档很完美
对于缺乏经验的开发者来说过于复杂
第三方支持太少
由于只支持webkit，所以除过混合应用程序外，对于一般程序来说作用不大
IDE和支持都得付费
建议在复杂的混合应用程序，特别是要求看起来像是原生API开放的程序中使用
new Ext.Application({
name: 'MyApp',
launch: function() {
this.viewport = new Ext.Panel({
fullscreen: true,
: 'mainPanel',
layout: 'card',
html: 'Welcome to My App!'
它们两都是成熟的框架。jQuery Mobile 容易使用而且在大部分场合都能工作良好，但是如果你想优化优化混合移动应用程序，那你就选择Sencha Touch吧。
其它值得看看的HTML5移动应用框架:
(ex jqTouch)
(ex jqMoby)
&翻译的不错哦!
两个都用过，推荐jqmsencha touch笔记（2）――ExtJs语法基础
因为sencha touch的语法大部分是基于extjs的，而extjs大部分是基于json的，所以好好预习一下extjs的语法还是很重要的。extjs是封装的javascript的一个框架，相比原生的js，它更注重结果，所以它的调用形式很固定比较简洁，不像原生js那样要逐字逐句地去实现。
1.值的数组表示方法：json在表示值的数组的时候可以提高可读性，并且有效的减少复杂性；json中的一条记录就是一个花括号，数组即是将花括号放进‘[
var data = { "peoples": [
{ "firstName": "Brett", "lastName":"McLaughlin", "email": "" },
{ "firstName": "Jason", "lastName":"Hunter", "email": "" },
{ "firstName": "Elliotte", "lastName":"Harold", "email": "" }
]} 2.每一种新的语言都要来一个"hello world"，extjs版本的
&script type = "text/javascript"&
Ext.onReady(function(){
Ext.MessageBox.alert("hello world!");
Ext.define用来创建类，也可以继承其他类，也可以被继承，例：
Ext.define('TextClass', {
});则创建了一个TextClass的类，实例化的时候可以用var textclass = new TextClass()来创建一个实例；
若想要实现继承，则：
Ext.define("TextClass2", {
extend: 'TextClass',
//继承TextClass
//TextClass2特有的属性
实例化类除了new方法之外，extjs4推荐使用create方法来实例化。例如上面新定义的类，可以用 var test = Ext.create("TextCkass")来进行实例化这个类。
3.各种控件：
a.MessageBox――>Ext.MessageBox.alert提示框；Ext.MessageBox.prompt输入框； Ext.MessageBox.wait进度条；Ext.MessageBox.confirm确认提示框等等；
b.Ext.Panel控件是一个容器，继承自Ext.Container->Ext.BoxComponent->ponent->Ext.util.Observable。Component就是所有组件的基类了。
Ext.onReady(function(){
new Ext.Panel({
renderTo:'somediv or somespan',
width:300,
height:300,
title:'标题',
//面板头部
tbar:[{text:'按钮1'},{text:'按钮2'}],
//顶部工具栏
bbar:[{text:'one'},{text:'two'}],
//底部工具栏
html:'正文',
//正文内部元素
{title:'1', html:'text1'},
{title:'2', html:'text2'}
//title上面添加工具
{id: 'refresh'},{id: 'close', handler:function(event, toolEl, p){
Ext.MessageBox.alert("xx", "xx");
Ext.TabPanel继承自Ext.Panel，是一种带有选项卡的panel，语法结构和Panel差不多，只不过它的item变成了选项卡中的item。
Ext.getCmp('someTab').add({title:'', html:'', closable: true})
//用来添加一个额外的选项卡,通过设置变量closable:true使得选项卡可以关闭4.布局相关：
Ext.Viewport组件，继承自Container，用来初始化整个的可视化区域，并且会根据浏览器的变化自动去调整。一个页面只允许有一个viewport。它不需要制定的renderTo,因为它直接渲染到页面的body的区域。
EXTJS里面的布局树如下图所示：
例如列布局的示例：
&script type="text/javascript"&
Ext.onReady(function () {
new Ext.Viewport({
layout:'column',
//容器内部进行 列布局
{ title: '标签1', width: '200', : 'xxx' },
{ title: '标签2', width: '200', html: 'xxx' },
{ title: '标签3', width: '200', html: 'xxx' },
{ title: '标签4', width: '200', html: 'xxx' },
{ title: '标签5', width: '200', html: 'xxx' }
FitLayout：自适应布局，只会显示第一个子面板，用第一个面板去填充满整个容器的大小。无法对viewport进行布局，该布局的父容器需要有hright的属性作为前提；
Ext.layout.AccordionLayout：折叠式布局，继承自自适应布局，不同是有折叠风箱的效果；
Ext.layout.BorderLayout：边框布局，设计这种布局用来解决页面分栏的问题。其中item的region有north,south,west,east和center五个属性，分别代表页面布局中的五个位置；其中center为必须，其他四个可有可无。
您对本文章有什么意见或着疑问吗？请到您的关注和建议是我们前行的参考和动力&&
您的浏览器不支持嵌入式框架，或者当前配置为不显示嵌入式框架。Sencha_Touch2_如何使用组件_百度文库
两大类热门资源免费畅读
续费一年阅读会员，立省24元！
评价文档：
Sencha_Touch2_如何使用组件
阅读已结束，如果下载本文需要使用
想免费下载本文？
把文档贴到Blog、BBS或个人站等：
普通尺寸(450*500pix)
较大尺寸(630*500pix)
你可能喜欢