在sencha touch项目做list时需要在没有数据的情况下显示图片和提示语句,最开始使用了笨办法,就是在controller动态改变view层内容
今天在看sencha touch文档时发现sencha原本就有解决这种情况的方法,只需在view加emptyText属性即可,
修改后代码如下(controller中不做任何操作,只需在view页面添加emptyText属性):
Ext.define('Haier.view.phone.Todo.List', {
extend : 'Ext.Container',
xtype : 'todoList',
config : {
id : 'todoHomeId',
title : "待办中心",
items : [ {
id : 'todoList',
store : 'Todo',
xtype : 'list',
height : null,
disableSelection : 'false',
emptyText : "<div style='height:"
+ window.innerHeight
+ "px;padding-top:100px'><img src='images/todo_null_list_bg.png' width='120' height='150'/><div style='text-align:center;color:#8a8c8e'>暂时没有待办事项</div></div>",
itemTpl : [ "<div><span>{TodoTitle}</span></div>" ]
.join('')
} ],
}
});
分享到:
相关推荐
通过将Store绑定到List,当Store的数据发生变化时,List会自动更新其内容。 4. **配置项详解** - `itemTpl`: 定义每个列表项的模板,可以使用XTemplate语法,动态渲染数据。 - `store`: 指定列表关联的Store,...
在“Sencha Touch显示本地json数据”这个主题中,我们将深入探讨如何使用Sencha Touch来加载和显示存储在本地的JSON数据。对于初学者来说,这是理解Sencha Touch如何与数据交互的重要步骤。 首先,我们需要理解JSON...
在Sencha Touch中,`折叠List`(Accordion List)是一种特殊类型的列表,用于展示可以展开和折叠的条目,这种设计常用于展示层级关系的数据或节省屏幕空间。 `折叠List`的核心概念是`Ext.dataview.Accordion`,它...
在探讨“Sencha Touch2 AJAX获取数据”的主题时,我们首先需要理解Sencha Touch2框架的基本概念以及AJAX技术在其中的应用。Sencha Touch2是一个用于构建高性能、跨平台的移动应用的JavaScript库,它专注于触摸设备上...
在Sencha Touch中,`List`组件是核心组件之一,常用于展示可滚动的数据集合,例如联系人列表、任务列表等。本教程将深入探讨`List`组件的使用方法,以及如何在Sencha Touch 2中实现一个示例。 首先,`List`组件是...
4. **数据绑定**:Sencha Touch支持双向数据绑定,这意味着当模型数据改变时,视图会自动更新,反之亦然,简化了开发流程。 5. **触摸事件**:由于Sencha Touch面向移动设备,它提供了一系列触摸事件,如tap、swipe...
HTML5 和 CSS3 的 web 标准,全面兼容 Android 和 Apple iOS,通过 Sencha Touch 框架用户可以创建非常像移动设备本地应用的 web 应用,它提供了丰富的华丽的控件和强大的功能,包括对触控事件的增强,数据整合等。...
将这个文档部署到Tomcat的webAPP目录下,意味着你可以通过Web服务器访问这些离线文档,无需网络连接,这对于开发者来说非常方便,特别是在没有稳定网络环境或需要离线查阅资料时。 总的来说,Sencha Touch 2.2.1...
以下是一个基本的Sencha Touch图片懒加载实现步骤: 1. **创建图片模型(Model)**:首先,我们需要定义一个包含图片URL和其他必要信息的数据模型,例如: ```javascript Ext.define('ImageModel', { extend: 'Ext....
Sencha Touch 是一款专为移动设备设计的JavaScript框架,它提供了丰富的组件库和强大的数据管理功能,用于构建高性能的触控应用。"sencha touch 登陆界面"这个主题,主要涉及的是如何使用Sencha Touch来设计和实现一...
《Sencha Touch in Action》是一本关于使用Sencha Touch进行跨平台移动开发的书籍,它详细介绍了Sencha Touch框架的使用方法和技巧。Sencha Touch是一个利用HTML5、CSS3和JavaScript创建移动Web应用程序的框架,它是...
1. **获取Sencha Touch 2 源码** - 打开终端或命令提示符,使用Git克隆Sencha Touch 2的官方仓库: ``` git clone https://github.com/sencha/Sencha-Touch.git ``` 2. **创建新项目** - 使用Sencha CMD创建一个...
总结来说,Sencha Touch Grid是构建移动应用时处理数据展示的强大工具,其丰富的功能和灵活性使得开发人员能够创建出功能完备、用户体验良好的数据管理界面。通过熟练掌握Grid的使用,开发者能够更好地满足移动应用...
5. **config.xml**:在Sencha Touch中,这个文件可能用于配置应用程序的元数据,比如应用的名称、版本、图标、启动画面等,通常是针对PhoneGap或Cordova这样的混合应用开发环境。 6. **resource**:这个文件夹可能...
4. **初始化图表**:在Sencha Touch 的控制器(Controller)中,当数据加载完成后,利用FusionCharts的API创建图表实例。你需要指定图表类型、宽度、高度、数据源以及容器ID。 ```javascript var chart = new ...
Sencha Touch是一款强大的JavaScript框架,专门用于构建移动Web应用程序。它提供了一套完整的UI组件和交互功能,使得开发者能够创建出具有原生应用体验的触摸友好型应用。这个"Sencha Touch中文翻译文档"是针对...
Sencha Touch 是一款专为移动设备设计的JavaScript框架,它提供了丰富的组件和强大的数据管理功能,使得开发响应式的、交互性强的移动应用变得容易。在Sencha Touch中,MVC(Model-View-Controller)模式是其核心...
《般若人生》是一款基于Sencha Touch框架开发的移动应用项目。Sencha Touch是一个流行的JavaScript框架,专门用于构建跨平台的触屏友好型Web应用程序。它提供了丰富的UI组件和强大的数据管理工具,使得开发者能够...
Sencha Touch 2.4.0 是一个专为移动设备设计的前端JavaScript框架,它使得开发者能够构建功能丰富的、响应式的Web应用程序,这些应用在智能手机、平板电脑等移动设备上表现得如同原生应用一样流畅。这个框架由Sencha...