Sencha touch中Ext.List的使用及高度自适应

最近在做 Sencha 的一个项目,需要用到 Ext.List 来列出所需商品及相关信息,平时我们使用 Ext.List 都是使用 fullscreen:true 来设置 List 全屏显示, 但是现在需求是 Panel 中嵌套一个 List 效果如下图所示: 显然这时候是不能用 fullscreen:true 的,所以我们要给它设置显示的高度,通过 setHeight() 的方法, 如果没有设置高度是不会显示的,这里要注意一下. 代码实现如下: <span style="font…

【翻译】在Ext JS和Sencha Touch中创建自己定义布局

原文:Creating Custom Layouts in Ext JS and Sencha Touch 布局系统是Sencha框架中最强大和最独特的一部分.布局会处理应用程序中每个组件的大小和位置,因而,不须要手动去管理那些碎片.Ext JS与Sencha Touch的布局类有很多类似之处.近期在 Ivan Jouikov的这篇博文中对他们进行了具体的分析. 尽管是这样.但非常多Ext JS和Sencha Touch开发者可能永远都不会去了解布局系统的机制原理.Sencha框架已经提供了最经…

【翻译】在Ext JS和Sencha Touch中创建自定义布局

原文:Creating Custom Layouts in Ext JS and Sencha Touch 布局系统是Sencha框架中最强大和最独特的一部分.布局会处理应用程序中每个组件的大小和位置,因而,不需要手动去管理那些碎片.Ext JS与Sencha Touch的布局类有许多相似之处,最近在 Ivan Jouikov的这篇博文中对他们进行了详细的分析.虽然是这样,但很多Ext JS和Sencha Touch开发人员可能永远都不会去了解布局系统的机制原理.Sencha框架已经提供了最常用…

【翻译】在Sencha Touch中创建离线/在线代理

原文:Creating an Online/Offline proxy in Sencha Touch 概述在Sencha Touch中,一个常见的需求就是,当设备在没有连接互联网的时候,应用程序必须能够继续工作.Sencha Cmd为实现应用程序离线工作提供了一切所需的工具,如自动生成应用程序清单文件,不过,这其中最大问题是如何处理数据.有许多方式可以用来处理数据,而一个常用的技术就是在本地存储代理和AJAX代理之间实现切换.在本文,ProWeb软件公司的Tom Cooksey将展示如何使用…

Sencha Touch 之 Ext.ComponentManager.get方法使用

HTML代码: <!doctype html> <html> <head> <meta charset="utf-8"> <title>一个简单的示例面板</title> <link rel="stylesheet" type="text/css" href="../../css/sencha-touch.css"> <script sr…

Sencha Touch 之 Ext.fly方法的使用

Ext.fly方法是Ext.js 4中的flyweight技术,该技术在浏览器中为使用Ext.fly方法的元素节点开辟一块内存,下一次使用Ext.fly方法的元素节点将占据同一块内存,即覆盖前一次的元素节点.可以理解为开辟一块共享内存,供元素节点使用.示例: HTML代码: <!doctype html> <html> <head> <meta charset="utf-8"> <title>一个简单的示例面板</tit…

Sencha Touch中 xclass和xtype区别

1.xclass 就是 Ext.create(xclass) 和 xtype一样的性质,不一定非要是自己创建的. 2.xtype是xclass的简称. 3.使用xtype前,你要new的对象,先要requires,xclass应该不用举例 Ext.Viewport.add({ xclass: 'AddressBook.view.Main' }); 等效于 Ext.Viewport.add(Ext.create('AddressBook.view…

sencha touch中按钮的ui配置选项值及使用效果

…

关于sencha touch中给文本添加焦点无效的解决方案

目前的解决方案是给你的执行代码加上一个timeout延迟100ms+ setTimeout(function(){ SoftKeyboard.isShowing(function(isShowing){ textfields[0].focus(); if(!isShowing) { SoftKeyboard.show(); container.hide(); } }, function(){ console.log('fail'); }); },800);…

再探 Ext JS 6 (sencha touch/ext升级版) 变化篇 (编译命令、滚动条、控制层、模型层、路由)

从sencha touch 2.4.2升级到ext js 6,cmd版本升级到6.0之后发生了很多变化首先从cmd说起,cmd 6 中sencha app build package不能使用了,sencha app build native好像也不能用了. 有个好消息就是我们可以用sencha ant native buildsencha ant package build 这两个命令,目测和以前的效果差不多了然后再说说ext js 6相对sencha touch 2.4.2的变化首先最只…

【翻译】探究Ext JS 5和Sencha Touch的布局系统

原文:Exploring the Layout System in Ext JS 5 and Sencha Touch 布局系统是Sencha框架中最强大和最有特色的一个部分. 布局要处理应用程序中每一个组件的尺寸和位置.在Ext JS和Sencha Touch直接有很多相似之处.尤其是如今Ext JS 5開始支持平板更是如此.以下让我们来探讨一下布局系统是怎样跨域Sencha框架进行工作的. 布局简史最主要的HTML一直都缺乏一个严格定义的布局系统. 很多年来,因为CSS实现的差距.开发跨浏…

【翻译】为Ext JS和Sencha Touch开发人员准备的应用程序监测（App Inspector）

和其他的Sencha开发人员一样,我会花费大约半天的时间在我喜欢的IDE工具上编写JavaScript,而另一半时间则是在浏览器上测试和调试我的应用程序.在过去几年,每一个主要的浏览器都已大为改善.现在,HTML 5已跨越所有浏览器获得了持续的支持,JavaScript的性能也很好,而且开发人员工具也比以往任何时候都好.Google Chrome往往是许多开发人员的首选(这个译者有保留),这没有什么奇怪的,原因是他们在思考他们的开发工具已经有相当的一段时间了.Chrome开发人员工具在展示DOM…

sencha touch打包成安装程序

为了更好地向大家演示如何打包一个sencha touch的项目,我们用sencha cmd创建一个演示项目,如果你的sencha cmd环境还没有配置,请参照 sencha touch 入门系列 (二)sencha touch 开发准备进行配置. 首先在开始->运行中输入cmd,回车,打开命令行工具,cd指令进入到我们的sencha touch的sdk目录中,执行项目创建的指令: 此时在webtest路径中便创建了一个testPackage的项目,我们打开项目中创建生成的packager.js…

【转载】Sencha Touch 提高篇组件选择器

免责声明: 本文转自网络文章,转载此文章仅为个人收藏,分享知识,如有侵权,请联系博主进行删除. 原文作者:威老原文地址:http://www.cnblogs.com/weilao/archive/2011/11/26/2264310.html 在开发的过程中,经常会碰到需要调用刚才创建的组件的情况.一般情况下,可以用Ext.getCmp()方法达到这一目的.这个方法是Ext.ComponentManager的get方法的快捷方式,调用Ext.getCmp()方法其实就是…

【翻译】Sencha Touch 2入门：创建一个实用的天气应用程序之三

原文:Getting Started with Sencha Touch 2: Build a Weather Utility App (Part 3) 作者:Lee BoonstraLee is a technical trainer at Sencha. She's located in Amsterdam and has experience in both front-end and back-end development. Lee spends her spare time deve…

sencha touch 常见问题解答(26-50)

26.sencha touch在华为.红米等部分手机下hide事件失效,msgbox无法关闭怎么办答:请看http://www.cnblogs.com/cjpx00008/p/3535557.html 如果还不能解决请尝试使用浏览器自带的弹出方法 27.sencha touch中list使用Ext.plugin.PullRefresh 刷新一次,就会显示重复数据,这是为什么答:找到list的数据仓库对应的模型(model),为其指定idProperty(主键name)属性. list中的每条…

sencha touch 坑爹的Panel，数据不显示了...

一位同学问我一个问题: sencha touch中xtype创建dataview死活不显示!!版本2.3.1,MVC模式,sencha touch创建目录程序很简单,主界面一个tabPanel,两个分页“FoodMain”“UserMain”想在第一个分页显示一个DataView,结果死活不显示,Main.js如下: //file: app/view/Main.js Ext.define('myapp.view.Main', { extend: 'Ext.tab.Panel', xtype: '…

sencha touch 扩展篇之将sencha touch打包成安装程序（上）- 使用sencha cmd打包安装程序

由于最近一直忙着android原生的开发,很久没有更新博客了,官方的sencha cmd工具功能非常强大,创建项目,压缩项目,打包安装程序都能轻松实现,这讲我们就给大家介绍下如何使用sencha cmd来打包我们的sencha touch项目, 为了更好地向大家演示如何打包一个sencha touch的项目,我们用sencha cmd创建一个演示项目,如果你的sencha cmd环境还没有配置,请参照sencha touch 入门系列 (二)sencha touch 开发准备进行配置. 首先在开…

sencha touch 扩展篇之使用sass自定义主题样式（下）通过css修改官方组件样式以及自定义图标

上一讲我们讲解了如何使用官方的api来修改主题样式,这讲我们继续讲解sass的样式修改, 编译官方自带的主题包在生成的项目以及官方sdk的目录下,自带了一些主题sass包,我们也可以通过修改sass文件来引入他们并进行编译,下图是官方sdk中自带的主题样式包: 我们如何在sass文件中导入这些样式呢,我们接着上一讲创建的项目,打开项目下resources/sass文件夹下的app.scss文件,去掉上一讲修改的样式,如图: 如果你要引入对应的样式,只需修改@import的路径就可以了,这里我…

sencha touch 入门系列 (九) sencha touch 布局layout

布局用来描述你应用程序中组件的大小和位置,在sencha touch中,为我们提供了下面几种布局: 1.HBox: HBox及horizontal box布局,我们这里将其称为水平布局,下面是一段演示代码: Ext.create('Ext.Container', { fullscreen: true, layout: 'hbox', items: [ { xtype: 'panel', html: 'message list', flex: 1 }, { xtype: 'panel', html…

sencha touch 入门系列（九）sencha touch 视图组件简介

对于一个普通用户来说,你的项目就是一组简单的视图集合,用户直接通过跟视图进行交互来操作你的应用,对于一个开发人员来说,视图是一个项目的入口,虽然大部分时候最有价值的部分是在model层和control层,所以这讲,我们将先介绍如何创建和使用我们的视图组件view. 首先,我们来介绍如何创建我们的视图组件, 在sencha touch中,已经封装好了一批在项目中可能常用的视图组件,如列表(list),form表单(formpanel),按钮(button)等等, 在官方example的kitche…

sencha touch 组件选择器getCmp和ComponentQuery.query()的效率解析

昨天无意中在网上看到一篇讲解sencha touch组件选择器的文章,名为 Sencha touch 2通过Ext.ComponentQuery.query查找组件. 里面对组件选择器的效率讲解完全反了,说getCmp是在dom树中全文查找,效率不高,而ComponentQuery.query()效率比较高,而且该文章被很多文章采集器采集到了很多网站上. 这里有必要纠正下,跟这边文章的描述恰恰相反,在sencha touch的组件查询中getCmp()要比ComponentQuery.query…

SenCha Touch 与 EXTJS 安装Myeclipse 插件

http://www.cnblogs.com/jirimutu01/default.html 关于SenchaEclipsePlugin插件的安装和使用使用过eclipse开发java程序的人都知道eclipse带有强大的代码提示功能,非常好用.遗憾的是不是所有语言都能很好的支持,比如我们开发sencha touch和ext js就不能支持了.所以我们需要额外安装一个插件---SenchaEclipsePlugin.此款插件可以使你在eclipse开发环境下开发javascript变得更快更准…

sencha touch overlay 里使用 list

1 sencha touch 中 list 如果不设置一个固定高度或 flex : 1, list 的内容就不会显示出来. 主要是因为 list 是可滚动的,你不设置高度 ,list 的高度默认就是 0px. 其实数据都是在的,只是没有显示出来.遇到 list 不显示的情况, 一般先看 dom 中是否有数据, 再看 store 中是否有数据,如果 dom 中有数据就是布局的问题了. 2 今天在 overlay 中套了一个 list, 发现设 flex : 1 是没用的,必须设置一个固定高度…

sencha touch extend 单继承和 mixins 实现多继承

继承可以达到代码的复用,利于维护和扩展. sencha touch 中可以通过 extend 实现单继承,通过 mixins 实现多继承. mixins 也很像实现接口,不过这些接口的方法已经实现了,不用自己写了.当然也可以复写基类的方法. extend 继承 Ext.define('Person', { constructor : function(name, age) { this.name = name; this.age = age; }, walk : function() { con…

sencha touch 手势识别左右滑动

sencha touch 中添加手势识别非常简单,就是监听 dom 元素的 move 事件: 1. 为你的 view 注册 swipe 事件 // 为当前 view 注册手势滑动事件 Ext.get('myTouchView').on('swipe', 'onViewSwipe', this); 2. 判断滑动方向 // 手势滑动监听事件 onViewSwipe : function(e, target, options, eOpts) { if (e.direction === 'left'…

sencha touch textarea 手机上不显示滚动条，且不能滚动

最近在项目中发现 sencha touch 中的 textarea 在手机上不显示滚动条,也不能滚动. 在浏览器中之所以能显示滚动条滚动,那是浏览器为 textarea 添加的滚动条. 但在手机中是不会显示滚动条的. 可能在以后的版本中会有所改进吧. 于是只能另想办法了,找了一个老外重写的可滑动的 textarea (无滚动条). 转: Ext.define('LeslieTest.view.TextArea', { extend : 'Ext.field.TextArea', xtype :…

[原]sencha touch之表单(login demo)

现在来说说sencha touch中的表单,举个简单的login的例子,相关的说明我都放在了注释中,看下面代码 Ext.application({ id:'itKingApp', launch:function(){ var formPanel=Ext.create('Ext.form.Panel',{ id:'formPanel1', // 表示是否可以滑动,vertical=上下滑动 horizontal=左右滑动 both=上下左右都可以 flase=不滑动 scrollable:'ver…

[原]sencha touch之布局

今天记录一下关于sencha touch中的几种布局,其实很简单的,还是直接上代码,一目了然 1:box布局,其实就是vbox和hbox,说白了一个是横着摆放,一个是竖着摆放 Ext.application({ name:'myApp', launch: function(){ var myPanel=Ext.create('Ext.Panel',{ id:'myPanel', layout:{ type:'hbox', pack:'end' }, items:[ { html:'One', f…

用 Sencha Touch 构建移动 web 应用程序

Sencha Touch 是一个使用 HTML5.CSS3 和 JavaScript 语言构建的移动 web 应用程序框架,在本文中,学习如何应用您当前的 web 开发技能进行移动 web 开发.下载和建立 Sencha Touch,通过一个样例应用程序探究基本原理.学习开始使用 Sencha Touch 框架所需的一切 2012 年 3 月 19 日内容概述 Sencha Touch 准备开始 UI components 结束语参考资料评论概述在软件开发领域中,有两个重要的趋势越来…

【Sencha touch中Ext.List的使用及高度自适应】的更多相关文章