随笔分类 - Sencha Touch2
摘要：我们已经为搜索按钮添加了两个新的属性：iconCls 和 iconMask。iconCls，是一个用来作为按钮图标进行设置css类背景图片的类（引自sencha touch文档），通过给search按钮设置属性值使按钮有一个放大镜的背景图像，为使这个特性能正常运转，我们也需要设置iconMask属性为true。为Action设置了UI属性，可以使搜索按钮具有不风格。下面就是按钮显示：现在我们必须为search按钮设置处理器的功能，因为这个按钮将总是做同样的事情，我们可以在应用中的分发功能中设置其处理器的功能如下：launch: (){ this.viewport = new A...
阅读全文
摘要：隐藏和显示工具条的回退按钮工具条的回退按钮只有在其需要的时候才显示，因此在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
阅读全文
摘要：现在我们来修改传递给分发功能的对象如下：Ext.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: 'About',在href属性的定位标记中，我们添加了以“#”为开头前缀的路由符号。现在我们用基于WebKit浏览器打开index.html，你将看到你想看到的效果，如果你在这个标示上点击将被重新定向到About action上。当你在About action界面，你可以点击浏览器上的回退按钮，则可以回到index action按钮，当你在action之间前后进行切换时，你可以看到index.html#Home
阅读全文
摘要：在此我们将要继续构建我们的Sencha Touch MVC app应用工程，这次我们将探索控制器action的不同调用方式。控制器action的调用方式将按下面三种方式：l 利用路由作为href属性的定位标记的一个值的方式：Some Routel 利用Ext.dispatch 和 Ext.redirect 功能: Ext.redirect(‘route’)l 直接调用控制器的action：Ext.ControllerManager.get(‘SomeController’).someAction()或同一控制器的this.someAction()。首先，我们在HomeC...
阅读全文
摘要：在目前实现的应用中，你将看到上图所示的效果，我们已经添加了一些html标签在内容中，但效果看起来还是普通的文本文字效果，为了达到预期的目标我需要设置视图的styleHtmlContent属性为true。正如你看到的，内容被切割掉不能向下滑动，为了能够达滚动效果，需要设置纵向的滚动翻屏属性，下面就是相关代码：scroll: 'vertical',styleHtmlContent: true,style: 'background: #d8e2ef',我们也加入了风格属性在CSS标尺中，使视图的滑动动画效果更好些，现在你的文本内容在蓝色的背景看上去效果好多了，当你在视
阅读全文
摘要：在HomeIndexView.js中添加下面的内容：App.views.HomeIndex = Ext.extend(Ext.Panel, { html: "A Lover's Complaint" + "a poem by" + "William Shakespeare" + "From off a hill whose concave womb reworded" + "A plaintful story from a sist'ring vale...
阅读全文
摘要：现在准备测试！在基于webkit的浏览器中，打开index.html文件，你将看到信息框的显示。创建视图：我们的视图可以用扩展Sencha Touch组件的方式来创建，它们负责数据的渲染和展示，采用这种技术可以使我们的应用看起来非常酷。创建主视：Viewport当我们运行应用时，我们必须建立的第一个视图是Viewport，这个是我们的主要视图，在这个视图中我们将会进行其他试图的描绘，你可以把它想象为画布。在我们的app/views目录下，建立一个Viewport.js文件，并且在文件中添加下面的内容：App.views.Viewport = Ext.extend(Ext.Panel, { ..
阅读全文
摘要：正如本文标题所述的主题我们将继续构建我们在前面已经构建的Sencha Touch MVC app，下面我们将开始进行创建一个控制器（controller）和两个视图，然后学习如何运用它们。首先让我们来添加一些目录来修改现有的工程目录结构：创建一个控制器：在app/controllers目录下创建一个HomeController.js文件，然后在里面增加下面的内容：Ext.regController('Home', { // index action index: () { Ext.Msg.alert('Test', "Home's index
阅读全文
摘要：现在开始最有趣的部分-编码：首先，我们需要在index.html中增加如下内容： MvcTouch 这步很简单，我们仅仅增加了Sencha Touch所需的文件（包括js文件和css文件），同时也包括我们自己建立的app.js文件。接着让我们来写些javascrpt代码：打开app.js，让我们来添加如下内容。Ext.regApplication({ name: 'App', launch: () { alert("Yay, it's working!"); }});太好了，但这些code能做什么？！好，它们创建了我们应用。我们通过传...
阅读全文
摘要：从零开始学习Sencha Touch MVC应用之一介绍：sencha touch是一个面向对象的java框架，使用它可以使开发者完全像在iphone、andriod、黑莓等触摸设备本身上进行移动应用的构建那样方便和容易。如果你需要查找进一步的资料可以到Sencha Touch website.上进行查找。如果你还没有使用java在面向对象方式下进行过开发的经历，我想你将会发现这个框架的一些特殊性因为这个框架完全是基于oop的，如果你对OOP概念不熟悉，你可以到这里（here）来查找，如果你有一些OOP方面的知识，但你不知道如何面向对象如何运用在java程序中，你可以参考一下（Object-O
阅读全文
摘要：ManagingDependencies with MVC (管理MVC依赖项)注：为方便起见，文中所有出现 Sencha Touch的地方均以 ST简写替代。There are two main places thatdependencies can be defined in a Sencha Touch 2 app - on the application itselfor inside the application classes. This guide gives some advice on how andwhere to declare dependencies in yo..
阅读全文
摘要：我们将在本文中讲解一个Sencha Touch的例子。PS：模拟器访问本地server的地址是10.0.2.2:8080，而不是127.0.0.1:80801、导入touch的相关Javascript，CSS以及资源文件2、index.html Sencha Touch List Example 3、index.js 1: /** 2: * 前言： 3: * 此例子来自sencha touch的官方example 4: * 注释用语如有不当请见谅。 5: */ 6: //相信这是...
阅读全文
浙公网安备 33010602011771号