项目上有需求,需要使用Sencha Touch加载远程Html,首先想到使用iframe处理,在浏览器上测试,展示效果还不错。以为万事大吉了,但是后来在ipad上测试发现iframe嵌入的网页没法上下滚动,于是继续研究,发现需要在iframe外层加入一个height和width都固定的div,然后增加style
-webkit-overflow-scrolling:touch; overflow: scroll;
代码如下:
{ layout : 'fit', xtype : 'panel', html : '<div style="width:774px;height:450px;-webkit-overflow-scrolling:touch; overflow: scroll;"><iframe id="object" height="100%" width="100%" type="text/html" src="http://www.baidu.com/"></iframe></div>' },
相关推荐
1. **安装与设置**:如何下载Sencha Touch库,如何在项目中引入,以及配置开发环境,包括HTML、CSS和JavaScript的基础知识。 2. **架构与模型**:解释Sencha Touch的基本架构,如MVC模式,以及如何定义和使用数据...
Sencha Touch是一款基于HTML5和...这仅仅是Sencha Touch与数据交互的一个基础示例,实际开发中可能涉及到更复杂的远程API调用、数据过滤、分页等操作。理解并熟练掌握这一过程,对于开发功能丰富的移动应用至关重要。
4. **分页**:Sencha Touch Grid支持分页,通过与Store配合,可以在大量数据中实现高效的浏览和加载。 5. **排序和过滤**:用户可以直接在Grid上对数据进行排序和过滤,提供了丰富的排序和过滤选项。 6. **编辑...
7. **实际应用**:Sencha Touch MVC的Demo可以是一个简单的数据展示应用,例如一个联系人列表,用户可以添加、删除和编辑联系人。模型定义联系人的属性,如姓名、电话等;商店加载和存储联系人数据;视图显示列表并...
在标签"SenchaTouch"中,我们可以挖掘出以下关键知识点: 1. **组件化开发**:Sencha Touch 提供了丰富的UI组件,如按钮、表单、面板、列表等,开发者可以通过组合这些组件快速构建界面。每个组件都有丰富的配置...
Sencha Touch提供了`LocalStorage`和`WebSQL`等本地存储选项,同时也可以结合Ajax请求将照片数据发送到远程服务器。 9. **调试与测试**: 开发过程中,开发者可以使用Chrome DevTools的设备模拟器进行初步调试,但...
通过本书的学习,不仅可以掌握Sencha Touch的核心技术,还能学会如何利用现代前端技术栈(如JavaScript、HTML5、CSS3和JSON)构建高质量的跨平台应用。对于前端开发者来说,这是一本不可多得的实用宝典。
在Sencha Touch 2.0中,JsonP是获取远程数据的重要手段,尤其适用于与服务器进行API交互。下面将详细介绍如何在Sencha Touch 2.0中使用JsonP以及相关文件的作用: 1. **MakeToJsonP.aspx 和 MakeToJsonP.aspx.cs**...
Sencha Touch 是一款专为移动设备打造的前端框架,它提供了丰富的组件和API,用于构建交互式的触控应用。在Sencha Touch中,`List`组件是核心组件之一,常用于展示可滚动的数据集合,例如联系人列表、任务列表等。本...
3. **数据管理**:Sencha Touch 2.1.1提供了一个强大的数据包,支持本地存储和远程数据同步。它使用JSONP和Ajax技术与服务器通信,实现了模型-视图-控制器(MVC)架构,方便数据管理。 4. **手势支持**:框架内置了...
开发者需要了解如何配置Sencha Touch项目,使其能在Safari中正确加载和运行,这涉及到HTML文件的结构、JavaScript库的引入以及应用的初始化设置。 在压缩包的"Mobile"文件夹中,可能会包含以下内容: 1. **index....
最后,Sencha Touch提供了数据管理和远程API通信的功能。你可以使用Store和Model来管理数据,使用Ajax或Proxy与服务器进行交互。例如,定义一个Model和Store: ```javascript // app/model/Item.js Ext.define('...
标题中的“最新版”意味着这个开发包包含了Sencha Touch 2.0的所有最新更新和改进,包括性能优化、新功能添加以及已知问题的修复。开发者可以利用这些更新来提高他们的应用质量和兼容性。 描述中的“案例”和“源...
- **IIS配置:** 如果使用的是Windows IIS作为Web服务器,则需要添加`application/x-json` MIME类型,以确保Sencha Touch能够正常运行。 **1.3 安装步骤** - **解压SDK:** 将下载好的SDK压缩包解压至项目目录中,...
它们共同构成了Sencha Touch的数据层,支持本地存储(LocalStorage或WebSQL)和远程数据源(如RESTful API)。 4. **控制器(Controller)**:控制器作为应用程序的“大脑”,负责监听事件、协调组件间交互和处理...
Sencha Touch 2 是一款强大的JavaScript框架,专为构建移动Web应用程序而设计。它提供了丰富的组件库、数据管理和触摸事件处理,使得开发者可以创建出具有原生应用般体验的跨平台移动应用。本系列教程将指导你如何从...
Sencha Touch 2 是一款专为移动设备设计的前端框架,它基于JavaScript,用于构建高性能的触屏应用。本示例“sencha-touch2 mvc demo”是关于Sencha Touch 2 MVC架构的一个简单演示,它展示了如何在移动应用中有效地...
学习Sencha,开发者需要掌握JavaScript基础,理解MVC(Model-View-Controller)设计模式,以及如何利用Sencha的数据管理和远程通信功能。同时,对于Sencha Touch,熟悉移动设备的特性和限制也是必不可少的。通过深入...
4. `index.html`:这是应用程序的主页面,包含了加载Sencha Touch库和应用程序所需的所有脚本。 在创建自定义目录结构时,你需要根据项目需求调整这些目录。例如,如果你的应用程序需要大量的自定义组件,你可以...
6. **本地存储和远程数据同步**:通过Store和Proxy,Sencha Touch 支持离线数据存储和与服务器的数据交换,如JSONP、Ajax等。 在“kitchen_app_sencha_touch”的例子中,我们可能看到以下几个方面: 1. **应用程序...