中文教程

ExtJS 5的委托事件和手势

简介

Ext JS在5之前的版本,被设计为专用于传统鼠标输入的桌面设备使用。而从5开始,添加了对触屏输入的支持,这让Ext JS对设备的选择有了更大余地,包括主流的平板,以及触屏的笔记本电脑。这种变化会对使用框架的用户造成影响,但这有助于理解屏幕后的情况。在本文,将探讨框架是如何处理触碰事件以及在设备之间是如何实现事件的规范化。

ExtJS 5最新技巧

Mitchell Simoens:控制滚动指示器的自动隐藏

Sencha Touch有一个跨平台的,在所有平台看起来和工作效果都一样的滚动条。两条轴(x和y,水平和垂直的区别)都有他们自己的滚动指示器,正如你所期望的,默认情况下,他们是隐藏的。不过,在某些情况下,可能需要一直显示指示器。在新的Touch 2.3.0种,每个指示器都有一个autoHide配置项来控制指示器的显示,设置autoHide为false将不再自动隐藏,在容器或它的子类内的scrollable配置项内进行定义就可以了。

例如,在y指示器的配置中将autoHide设置为false,就可以让y指示器一直显示。而让x指示器保持为默认值,就会自动隐藏。

可以访问以下地址来查看效果:https://fiddle.sencha.com/#fiddle/1u9

Sencha Touch2中selectfield组件如何接收非标准options数据

问题:selectfield组件默认接收的options数据形如:

    var selectOptionData = [
    {text: 'First Option',  value: 'first'},
    {text: 'Second Option', value: 'second'},
    {text: 'Third Option',  value: 'third'},
    ]; 

而我从后台服务接到的数据可能形如:

ExtJS ComboBox 录入智能提示

ExtJS ComboBox非常复杂,有很多的属性;其中有的属性是针对某一种特定的方案而设计的,不是所有情况下都有效。我想下拉选择能支持录入,并且录入时能智能提示,弄了半天可以了,但是只能是mode='local'的这种方式,即数据只能加载到本地,在本地检索;如果改成mode='remote'却不能。数据量太大想过滤后再加载不能实现了,郁闷了半天; 又过了很长时间,数据量太大加载太慢的问题一直困扰着我,如是潜心研究了一番;终于mode='remote'也可以远程过滤后加载了,录入时智能提示了。

附上代码:

解读sencha touch移动框架的核心架构(二)

来这行要详解Ext.extend的,但是发现网站有很详细的,那么就跳过去吧

为保持一个系列的分析,还是先搬过来吧,下章开始分析Ext4.0的新架构

在Java中,我们在实现继承的时候存在下面几个事实:

1, 准备两个类,他们用extends关键字链接起来

2, 如果超类没有默认构造函数,需要在子类构造函数中显式的super并传参,如果都是默认构造函数也可以super,不super虚拟机是自动的

3, 子类可追加,覆盖,重载方法,子类可以有自己的私有属性,他们在子类构造函数中被构造

4, 字段是数据,方法在代码区,和类建立方法表,同一个类的对象有自己的数据但是共享方法代码

比如有两个类,Plane和Space,Plane表示平面,Space表示空间,Space是Plane的子类,在java中

解读sencha touch移动框架的核心架构(一)

Sencha的前身就是Extjs了,sencha 框架是世界上第一个基于HTML5的Mobile App框架

那么何谓框架,传统软件工程对于库和框架的区分主要着眼于对应用运行流程的控制权,框架提供架构,控制运行流程,让开发者在合适的地方书写针对具体问题的代码

sencha提倡的就是组件化编程,是面向对象的技术的一种近一步的发展延伸,类的概念仍然是组件技术中一个基础的概念,但是组件技术更核心的概念是接口。

sencha是重量级的架构了,一般来说很少会有公司用到内部的这种架构,因为太像java的Swing了

不过我在项目中用sencha组织的代码结构拿来主义本来不是我的风格,自己也改动了很多代码, 但是整体的设计还是参考的sencha了

有项目图为证:3万行以上的纯js代码架构哦~

AMD + sencha核心

移动开发者必须了解的10大跨平台工具

在本文中,我们盘点了过去的一年里,最受开发者喜爱的跨平台应用及游戏开发工具,尤以HTML/JS/CSS为众,却也包含使用其他语言进行开发的工具,比如Xamarin,使用C#,就能开发出运行于各大主流移动平台上的原生App。

  成本低、周期短,易于上手,不用重新设计,种种好处让跨平台开发风头无量,也让诸多跨平台开发工具趁势崛起。在本文中,我们盘点了过去的一年里,最受开发者喜爱的跨平台移动应用开发工具,尤以HTML/JS/CSS开发为众,比如PhoneGap、Sencha Touch等,却也包含使用其他语言进行开发的工具,比如Xamarin,使用C#,就可以开发出能运行于各大主流移动平台之上的原生App。

sencha touch datepicker修改月份和星期名字

sencha touche datepicker控件没有提供直接修改月份的方法.经过查看源码搜索,出框架提供一个全局的变量.Ext.Date.monthNames.datepicker引用的是这个变量,所以只需要修改这个变量就可以了.

Sencha Touch / ExtJs 热门支持技巧

Sencha支持团队分享了他们在每月的Sencha新闻通讯中针对Sencha框架的热门技巧。在本文,将会介绍一些新的技巧和从今年早些时候总结出的很多重要技巧。如果喜欢这些与Sencha框架有关技巧和大量的技术文章,请订阅每月的Sencha通讯。

在Ext JS中创建特定主题的重写

Ext JS提供了大量的功能来使类的创建和处理变得简单,还提供了一系列的功能来扩展和重新现有的Javascript类。这意味着可以为类添加行为和创建属于自己的类,或者重写某些函数的行为。在本文,将展示如何实现特定主题类的重写。

Ext JS提供了大量的功能来使类的创建和处理变得简单,还提供了一系列的功能来扩展和重新现有的Javascript类。这意味着可以为类添加行为和创建属于自己的类,或者重写某些函数的行为。在本文,将展示如何实现特定主题类的重写。

可能你已经知道如何创建Ext JS类的重写。例如,希望改变默认行为或修补框架。在这种情况下,可以使用以下代码来创建类的重写:

Sencha Touch华为emotion ui下hide事件失效,msgbox无法关闭的解决方案

因为前段时间抢到了华为荣耀3c,所以做项目的时候就用荣耀3c测试了一下项目,

  结果发现在华为的emotion ui上sencha touch的messagebox的弹窗,弹出后点击确认按钮时无法隐藏,

  有的圆角框还有会缺边,不过不仔细看倒是不看得出来,

  这是我的项目在手机上的截图,

  当我点击确定按钮的时候,messagebox的模态背景消失了,但是弹窗并不会消失,仔细看登陆框的圆角,有点缺边,我想华为应该是改过系统的浏览器内核了,至于做了哪些变动,这还真说不清


ExtJs-初步学习

最近在系统学习Extjs框架,从刚一开始接触Extjs到现在发现对Extjs越来越喜欢了。刚开始只是想在页面上实现一个展示大量图片的功能,就像在线订餐系统展示菜单的效果那样,每幅图片上都有一些必要的信息、动作、链接等。效果如下图:

Sencha Touch Ext.app.Application

Ext.app.Application一般用于app.js中

用来初始化整个应用

可以预先加载controllers(控制器),models(模型),stores(数据源),views(视图)

例如:

Cordova3+sencha touch2.x 环境搭建

1.安装 nodejs
2.安装 cordova:
npm install -g cordova
3.创建一个工程:
cordova create MyApp com.example.MyApp MyApp

其中:第一个 MyApp是文件夹的名称;
com.example.MyApp 是app id
第二个MyApp是工程的名称,也是应用的名称
4.进入文件夹
cd MyApp
5.创建一个android的应用
cordova platform add android

Sencha Touch 列表批量选择扩展

效果如下图:

ExtJS 4.*基础概念总结(基于Ext4.2.1)

研究了一下ExtJS-4,发现这个框架很强大,总结一下,和大家分享分享,理解不到位的地方大家多多指正
1. Ext.application
2. Ext.onReady()
3. Ext.define()
4. Ext.data.proxy.Proxy
5. Ext的组合属性-mixins
6. Ext.create()
7. Ext.ComponentQuery、refs:
8. Init: function(){}
9. Ext.Class.alias
10. Ext.AbstractComponent -> xtype
11. this.callParent(arguments)
12. Ext.data.Model.validations: 合法性验证
13. 动态类加载

ExtJS框架基础:事件模型及其常用功能

前言

工作中用ExtJS有一段时间了,Ext丰富的UI组件大大的提高了开发B/S应用的效率。虽然近期工作中天天都用到ExtJS,但很少对ExtJS框架原理性的东西进行过深入学习,这两天花了些时间学习了下。我并不推荐大家去研究ExtJS框架的源码,虽然可以学习其中的思想和原理,但太浪费精力了,除非你要自己写框架。

对于ExtJS这种框架,非遇到“杂症”的时候我觉得也没必要去研究其源码和底层的原理,对其一些机制大致有个概念,懂得怎么用就行,这也是本篇博文的主要目的。

ExtJs中动态加载机制研究

昨天我们team对于extjs的动态加载机制做了些深入研究,这里先share下controller加载的结果。

以service registry portlet为例:
比如,在 liferay-portlet.xml中定义了:

所以我们的js的入口点是app.js,这其中创建了Ext.application并且声明了动态加载controller:

Sencha Touch中使用标准LocalStorage

虽然Sencha Touch本身有和Store关联的LocalStorageProxy,但是使用起来限制性较大,比如复杂的TreeStore就没法正常使用。

所以,我使用灵活性更好的Html5标准LocalStorage。

下面举例说明用法:

首先在App.js中声明全局LocalStorage变量:

在 Android 模拟器上设置 Sencha Touch

作为你开发的一部分,为安卓设备开发的 Sencha Touch框架应该在安卓虚拟机中被测试。这篇博客讨论如何安装和使用安卓虚拟机,使用命令行或者Sencha Architect构建器来进行 Sencha Touch开发。
被出售和使用的Android智能手机的数量最近超过了iOS智能手机。 (2013年4月的时代杂志的一篇文章披露出来的数据)。
很多Sencha Touch开发者针对的是Android平台。这篇博客将从头到尾向你展示如何搭建Android开发环境。文章中的截图和路径是Mac OS上的,Linux上的过程几乎是相同的,Windows平台的过程也是非常相似的。