jQuery MiniUI,快速开发WebUI界面

中文教程

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平台的过程也是非常相似的。

Sencha Touch list css(样式) 详解

[code]
/*
*自定义列表页面
*/
Ext.define('app.view.util.MyList', {
alternateClassName: 'myList',
extend: 'Ext.List',
xtype: 'myList',
requires: ['Ext.plugin.ListPaging', 'Ext.plugin.PullRefresh'],
config: {
cls: 'list',
plugins: [{
xclass: 'Ext.plugin.ListPaging',
autoPaging: true,
noMoreRecordsText: '没有更多内容了',
loadMoreText: '加载更多...'
},
{
xclass: 'Ext.plugin.PullRefresh',
lastUpdatedText: '上次刷新时间:',
loadingText: '加载中...',

Sencha Touch 2 在MAC下详细的开发流程

在不久的将来我相信Web App会流行的非常广, 能看到未来才能主宰未来。对于我们开发人员来说我觉得想成就一件伟大的事情,需要过硬的技术和好的想法,再加上决不放弃的精神,一定可以成功的。

以下在Mac下测试成功

人事考勤系统之Sencha Touch 2登录界面

这几天想了一想,想把自己空闲的时间利用起来开发一套Sencha Touch 2的人事考勤系统。和大家一起分享, 也希望大家能参于进来,一起开发。
今天我打算把登录界面发布出来,不过有几个问题我还在思考当中.
1: 字体不是太好, 界面看的也不是太舒服.
2: 当单击登录按钮的时候还没有实现验证用户名和密码:

ExtJS 英文视频教程

ExtJS 英文视频教程

大家都知道国外有很多英文的ExtJS视频,对一些英文还不错的开发者来说,这些资料很珍贵,但由于这些视频一般都放在Youtube上,而国内无法访问这个视频网站,今天发现了国内有热心人士将这些英文的视频放到了优酷上面.

感谢 "tarrin_" 整理.

视频观看地址:

http://www.youku.com/playlist_show/id_19343298.html

Sencha Touch 路由(routes)浅谈

encha Touch comes with fully history and deep-linking support. This gives your web applications the following two important benefits: The back button works inside your apps, helping you to navigate correctly and quickly between screens without refreshing the page Deep-linking enables your users to send a link to any part of the app and have other load the right page The result is an application that feels much more in tune with what users expect from native apps, especially on Android devices which fully support the built-in back button.

煎茶触摸配有充分的历史和深度链接支持。这使你的web应用在以下两个重要的好处:“后退”按钮可以在你的应用程序,帮助你正确导航和屏幕之间快速无需刷新页面深联使您的用户发送一个链接的应用程序的任何部分,有其它负载右页的结果是一个应用程序,感觉更合拍,与用户期望从本地应用程序,尤其是在Android设备上全力支持内置的后退按钮。

以上是官方解释,以及谷歌翻译。

下面以一个实例来解说

实例下载地址:http://download.csdn.net/detail/jy02534655/5480079

如果使用adt-eclipse来打包应用

ExtJs + .NET MVC 不分页处理大数据

刷微博已经成为大家的一种生活方式,我今天要介绍的功能就很类似刷微博。

当我们需要将大数据(比如百万条数据)显示在页面上的时候,显然一次加载是不现实的,用户体验很差。当然,你可能会想到采用分也显示,但是现在的用户已经

厌倦了分页的方式,他们更喜欢刷微博的方式。

于是就出现了这篇文章。

笔者近期的项目中,采用的前端框架是ExtJs,其提供的GridPanel足以应付一次性加载500+以上的记录,只是会让用户等待一会。

但是日志的显示没那么简单,其数据一直在增加,用户也不想分页查看,而是用传统的GridPanel也不太适合。

Google之后,原来ExtJs已经提供了一个插件(Ext.ux.grid.livegrid),强大的Extjs啊!

据说ExtJs 4 提供了一个更加好用的插件来替代这个插件,由于时间关系,笔者仅仅使用了ext 2.2 和 ext 3.3.1两个版本的,效果还不错,

惯例先上图

ExtJS 无法解码带有换行符的字符串

我们上次偶然发现了一个问题,我们在一个庞大的项目中,然后按照 spring web flow 走下去,最后一步提交,提交成功,但是回到某个页面上的时候,总是报错,说某个变量 比如var projectInfo,这个变量为null。

后来我们仔细看了下代码,原来是因为这个页面上有个字段是textarea,然后它会支持多行输入,多行也就是\n,然后在extjs看来,它无法对于一个包含\n的字符串进行decode,所以decode的结果就是null

我们实验如下:

(1)Ext.decode一个包含\n的字符串:

这里可以看出decode会失败。

ExtJS 常用代码片段

笔者工作中用到的功能,以及一些小功能,贴出来跟大家分享。

1、grid加载时候选择一行或全选:

为stroe添加load事件,调用sm的selectAll方法

store.on("load",function(store) {sm.selectAll();});

选择一行或多行和以调用selectRow、selectRows或selectRecords等方法,在api中有详细介绍。

2、Extjs 中调用Ajax