开始 Sencha Touch 2 之旅之三

现在我们已经看到了一个比较体面拿的出手的主页页面了，接下来让我们来做一些扩展。我们先用虚构的数据在一个单独的选项卡显示最新博客文章列表(用List显示)。在这里实现上我们选取了几个来自http://sencha.com/blog的职位信息。关于List的代码我们写在"Home"选项卡下方（点击预览按钮可以看到运行代码示例）。

Ext.application({

name: 'Sencha',

launch: () {

Ext.create("Ext.TabPanel", {

fullscreen: true,

tabBarPosition: 'bottom',

items: [

{

title: 'Home',

iconCls: 'home',

cls: 'home',

html: [

'<img width="65%" src="http://staging.sencha.com/img/sencha.png" />',

'<h1>Welcome to Sencha Touch</h1>',

"<p>You're creating the Getting Started app. This demonstrates how ",

"to use tabs, lists and forms to create a simple app</p>",

'<h2>Sencha Touch (2.0.0pr1)</h2>'

].join("")

{

xtype: 'list',

title: 'Blog',

iconCls: 'star',

itemTpl: '{title}',

store: {

fields: ['title', 'url'],

data: [

{title: 'Ext Scheduler 2.0', url: 'ext-scheduler-2-0-upgrading-to-ext-js-4'},

{title: 'Previewing Sencha Touch 2', url: 'sencha-touch-2-what-to-expect'},

{title: 'Sencha Con 2011', url: 'senchacon-2011-now-packed-with-more-goodness'},

{title: 'Documentation in Ext JS 4', url: 'new-ext-js-4-documentation-center'}

]

}

]

}).setActiveItem(1);

}

});

转载于:https://www.cnblogs.com/breg/archive/2011/12/15/2288410.html

开始 Sencha Touch 2 之旅之三相关推荐

sencha touch 入门系列（二）sencha touch 开发准备
这是本人第一次写博客教程,没什么经验,文笔也不是很好,写这教程一方面为了巩固自己这段时间的学习成果,一方面帮助大家解决问题,欢迎大家多提建议,指出问题.接下来我们就开始我们的sencha touch开 ...
【翻译】Sencha Touch 2入门：创建一个实用的天气应用程序之三
原文:Getting Started with Sencha Touch 2: Build a Weather Utility App (Part 3) 作者:Lee Boonstra Lee is ...
touch服务器端文件,Sencha touch 2 入门 -------- DataView 显示服务器端JSON文件数据...
今天学习了下DataView如何显示JSON文件数据,废话不多说,直接贴代码: 首先看下文件目录: 然后看下我们要处理的JSON文件,bookInfo.json. { "success&qu ...
Sencha Touch 2 DataView / List 分页
Sencha Touch 2的List的分页功能想必不用过多的介绍了,应该都了解,官方也有例子. 但是想直接把List的分页功能拷贝到DataView上,是不够完美的,存在一个小Bug,导致一直在加载 ...
从零开始学习Sencha Touch MVC应用之七
在此我们将要继续构建我们的Sencha Touch MVC app应用工程,这次我们将探索控制器action的不同调用方式. 控制器action的调用方式将按下面三种方式: l 利用路 ...
Sencha touch Panel之间的跳转(如不使用TabPanel或者Carousel控件而产生跳转的动画效果)...
常规的Sencha touch 应用都是"header content footer"结构,这样的结构无疑将使用TabPanel来实现,而且TabPanel肯定是card布局,这样 ...
sencha touch tabsidebar 源码扩展
先上图看效果没错,这是一个sencha touch 项目,而这里的右边推出效果(下文叫做tabsiderbar),使用插件tabsiderbar来扩展的. 插件js下载地址:http://www.m ...
第二步（仅供参考） sencha touch + PhoneGap(cordova 2.9 及其以下版本) 使用 adt eclipse进行打包...
首先你得安装一个adt-eclipse 参考资料 http://www.crifan.com/android_eclipse_offline_install_adt/ 然后就可以运行adt-eclip ...
sencha touch 组件选择器getCmp和ComponentQuery.query()的效率解析
昨天无意中在网上看到一篇讲解sencha touch组件选择器的文章,名为 Sencha touch 2通过Ext.ComponentQuery.query查找组件. 里面对组件选择器的效率讲解完全反 ...

开始 Sencha Touch 2 之旅之三

开始 Sencha Touch 2 之旅之三相关推荐

最新文章

热门文章