摘要：
我们已经给search-panel设置了cls属性：“一个可以添加到这个组件元素中的供选择的附加CSS类（默认为“”），主要可用于对组件的定制风格或者其组件元素的CSS规范化等”（引自SenchaTouch的相关文档），我们将使用这些类来达到视图的半透明化处理的目的。Search View将镶嵌在其他视图的顶部，并且不是以子视图窗口的方式显示，所以我们需要设置全屏属性，以强制组件尽可能的占用所有的可用空间。因为我们想让我们的搜索视图有滑动功能，我们需要设置浮动floating属性为true，否则视图将显示没有滑动动画功能，下面就是sencha Touch文档关于此问题的描述：“以浮动属性来创建 阅读全文
摘要：
我们已经为搜索按钮添加了两个新的属性：iconCls 和 iconMask。iconCls，是一个用来作为按钮图标进行设置css类背景图片的类（引自sencha touch文档），通过给search按钮设置属性值使按钮有一个放大镜的背景图像，为使这个特性能正常运转，我们也需要设置iconMask属性为true。为Action设置了UI属性，可以使搜索按钮具有不风格。下面就是按钮显示：现在我们必须为search按钮设置处理器的功能，因为这个按钮将总是做同样的事情，我们可以在应用中的分发功能中设置其处理器的功能如下：launch: (){ this.viewport = new App.views 阅读全文
摘要：
隐藏和显示工具条的回退按钮工具条的回退按钮只有在其需要的时候才显示，因此在index view视图中应当是隐藏的。在上面的index action中：this.application.viewport.setActiveItem(this.indexView, options.animation);添加：var backBtn = this.application.viewport.query('#backBtn')[0];backBtn.hide();在about action仅有如下代码：var backBtn = this.application.viewport.que 阅读全文
摘要：
现在我们来修改传递给分发功能的对象如下：12345678910Ext.dispatch({controller: 'Home',action: 'index',historyUrl: 'Home/index',//animation: {type: 'slide',reverse: true,},});我们已经为指定动画属性的对象添加动画的客户属性，这个对象将从index action传递到setActiveItem功能，我们可以添加任何多的我们所希望添加的客户属性。我们下一步将看到我们是如何通过分发功能来实现对客户属性的访问的。 阅读全文
摘要：
查询功能执行Ext.ComponentQuery.query，并且返回一个组件队列，因此，有且仅有一个组件条目化ID为BackBtn，返回阵列的第一项就是工具条按钮。如果需要查找更多的关于组件查询资料，你可以到这里（ here ）来阅读和查zho，看看Sencha Touch文档是如何来解释的。 既然我们已经得到了按钮的实例，我们就可以附加一个处理器，当按钮被触按/点击时来触发。我们实现这个通过传递一个功能到setHandler按钮的方法，在这个功能中，我们用Ext.redirect回到index action通过传递其路由。Ext.redirect是Ext.Dispatcher.redire 阅读全文
摘要：
由于我们没有设定xtype,工具条将使用按钮xtype，并且作为Ext.Button类的一个实例。按钮的文本属性将成为按钮的标签。使用itemId可以得到按钮对象的实例，我们可以利用这一特性在适当的时候来实现按钮的显示和隐藏，但是最重要的是这个功能可以被用作当按钮被触按和点击时附加调用方法。UI属性定义了按钮的风格，设置其为回退功能，按钮为前向箭头。下面这里是工具条看起来的一种形状：下面我们来为外部工具条按钮添加处理器。为按钮添加处理功能，首先需要做的是先获得其实例，然后调用按钮的setHandler方法。因此，要打开上面的about action的Home控制器（app/controller 阅读全文
摘要：
用HTML 连接来调用控制器的anction首先，我们将用HTML 连接来调用控制器的anction，因此，要修改HomeIndex 视图的html属性如下：html: '<a href="#Home/about" class="menu-item">About</a>',在href属性的定位标记中，我们添加了以“#”为开头前缀的路由符号。现在我们用基于WebKit浏览器打开index.html，你将看到你想看到的效果，如果你在这个标示上点击将被重新定向到About action上。当你在About action界 阅读全文
摘要：
在此我们将要继续构建我们的Sencha Touch MVC app应用工程，这次我们将探索控制器action的不同调用方式。控制器action的调用方式将按下面三种方式：l 利用路由作为href属性的定位标记的一个值的方式：<a href=”#route”>Some Route</a>l 利用Ext.dispatch 和 Ext.redirect 功能: Ext.redirect(‘route’)l 直接调用控制器的action：Ext.ControllerManager.get(‘SomeController’).someAction()或同一控制器的this.som 阅读全文
摘要：
在目前实现的应用中，你将看到上图所示的效果，我们已经添加了一些html标签在内容中，但效果看起来还是普通的文本文字效果，为了达到预期的目标我需要设置视图的styleHtmlContent属性为true。正如你看到的，内容被切割掉不能向下滑动，为了能够达滚动效果，需要设置纵向的滚动翻屏属性，下面就是相关代码：scroll: 'vertical',styleHtmlContent: true,style: 'background: #d8e2ef',我们也加入了风格属性在CSS标尺中，使视图的滑动动画效果更好些，现在你的文本内容在蓝色的背景看上去效果好多了，当你在视 阅读全文
摘要：
<!-- VIEWS -->< type="text/java" src="/app/views/Viewport.js"></>< type="text/java" src="/app/views/home/HomeIndexView.js"></>在HomeIndexView.js中添加下面的内容：App.views.HomeIndex = Ext.extend(Ext.Panel, { html: "<h3>A Lover 阅读全文
摘要：
现在准备测试！在基于webkit的浏览器中，打开index.html文件，你将看到信息框的显示。创建视图：我们的视图可以用扩展Sencha Touch组件的方式来创建，它们负责数据的渲染和展示，采用这种技术可以使我们的应用看起来非常酷。创建主视：Viewport当我们运行应用时，我们必须建立的第一个视图是Viewport，这个是我们的主要视图，在这个视图中我们将会进行其他试图的描绘，你可以把它想象为画布。在我们的app/views目录下，建立一个Viewport.js文件，并且在文件中添加下面的内容：App.views.Viewport = Ext.extend(Ext.Panel, { fu 阅读全文
摘要：
正如本文标题所述的主题我们将继续构建我们在前面已经构建的Sencha Touch MVC app，下面我们将开始进行创建一个控制器（controller）和两个视图，然后学习如何运用它们。首先让我们来添加一些目录来修改现有的工程目录结构：创建一个控制器：在app/controllers目录下创建一个HomeController.js文件，然后在里面增加下面的内容：Ext.regController('Home', { // index action index: () { Ext.Msg.alert('Test', "Home's index 阅读全文
摘要：
从零开始学习Sencha Touch MVC应用之二现在开始最有趣的部分-编码：首先，我们需要在index.html中增加如下内容：<!DOCTYPE html> <html> <head> <title>MvcTouch</title> <!-- Sencha Touch work --> <link rel="stylesheet" type="text/css" href="lib/sencha-touch-1.1.0/sencha-touch.css" 阅读全文
摘要：
从零开始学习Sencha Touch MVC应用之一介绍：sencha touch是一个面向对象的java框架，使用它可以使开发者完全像在iphone、andriod 、黑莓等触摸设备本身上进行移动应用的构建那样方便和容易。如果你需要查找进一步的资料可以到Sencha Touch website.上进行查找。如果你还没有使用java在面向对象方式下进行过开发的经历，我想你将会发现这个框架的一些特殊性因为这个框架完全是基于oop的，如果你对OOP概念不熟悉，你可以到这里（here）来查找，如果你有一些OOP方面的知识，但你不知道如何面向对象如何运用在java程序中，你可以参考一下（Object- 阅读全文
摘要：
Sencha touch使用百度地图在最近的手机项目中需要用到地图，由于google的服务器迁离大陆，使用谷歌需要国外出口的缘故，出现google访问不稳定，因此在国内的手机访问地图，只能转接到百度地图上。Sencha touch系统是一个新推出的平台，正在不断进行完善和升级过程中，在其给出的开发里程及其文档中，只给出了与google接口和实例，对于百度地图的支持没有给出，并且在网上相关的资料也查不到。本人在进行手机开发过程，深入分析了百度地图的API及sencha touch的相关文档，参照sencha touch与google地图的例子，实现了百度地图的接口。在这里把我所实现的例子和过程共 阅读全文
摘要：
在文章的最后，我们回过头来再来添加一个联系表格。我们的最后一个tab，包含一个FromPanel和一个FieldSet：//We've added a third and final item to our tab panel - scroll down to see itExt.application({ name: 'Sencha', launch: () { Ext.create("Ext.TabPanel", { fullscreen: true, tabBarPosition: 'bottom', items: [ { ti 阅读全文
摘要：
现在我们已经看到了一个比较体面拿的出手的主页页面了，接下来让我们来做一些扩展。我们先用虚构的数据在一个单独的选项卡显示最新博客文章列表(用List显示)。在这里实现上我们选取了几个来自http://sencha.com/blog的职位信息。关于List的代码我们写在"Home"选项卡下方（点击预览按钮可以看到运行代码示例）。Ext.application({ name: 'Sencha', launch: () { Ext.create("Ext.TabPanel", { fullscreen: true, tabBarPosition: 阅读全文
摘要：
现在，TabPanel已经显示在屏幕上了，但我们主页的其实可以美化一下吧。当前的页面至少有以下几个问题：把标签放在顶部有点不大好看。主页按钮似乎也有些单调。没有任何内容。看看我们是怎么做的，修改tabBarPosition配置项并添加一些HTML内容:Ext.application({ name: 'Sencha', launch: () { Ext.create("Ext.TabPanel", { fullscreen: true, tabBarPosition: 'bottom', items: [ { title: 'Home& 阅读全文
摘要：
何为Sencha Touch？Sencha Touch能够帮助你快速地构造出基于HTML5的手机应用。构造出来的程序有着与原生应用一致的用户体验，目前该框架兼容Android、IOS、黑莓这些主流平台。在PC上，兼容的webkit核心的浏览器，如：chrome、safari、maxthon等等。必要的准备工作：第一步无需做的太多。只需要做下面的事情：下载一个免费的Sencha Touch SDK；安装一个本机的web服务器；使用一个支持HTML5的浏览器(推荐使用Chrome和Safari)。首先，下载最新的Sencha Touch SDK并解压至Web服务器根目录。如果你没有Web服务器，可 阅读全文