jQuery MiniUI,Ajax Web开发

中文教程

ExtJS 4.2:Sencha Cmd 介绍

背景

本来不打算写这篇文章的,但是按照官方文档的介绍,还是会出现一些问题。该文章就是简洁的介绍一下如何使用Sencha Cmd及其注意事项。

官方文档

缓存代码Sencha Touch - 缓存问题解析

首先声明,我是一个菜鸟。一下文章中出现技巧误导情况盖不负责

这个问题困扰了我好几个月,每次应用sencha app build production后,版本的动改没法自动更新,每次都要需手动理清浏览器缓存。

终究下决心究研下这个问题的处理,费了劲终究搞定。

1. 研读源代码

senche的处好是开源。针对缓存这块要重的代码是

touch\microloader\production.js

里头是有所关于缓存的代码

Sencha map infowindow 的问题

在使用map的过程中,发现多个地标的infowindow是无法关闭的

因为在sencha中不如在js中可以设定多个全局变量来控制,所以google搜来的教程大多不可用

写下我的解决方案

ExtJs视频教程 - ExtJs4.1视频教程

ExtJS是一个Ajax框架,是一个用javascript写的,用于在客户端创建丰富多彩的web应用程序界面。

该视频教程主要分为4部分:
第一讲.ExtJs初识及其环境搭建

Sencha Touch TextArea 支持滑动

让你的Sencha Touch中的TextArea ios 支持滑动,代码如下:

ExtJs + Struts2 + JSON 程序总结

最近一直都在看EXTJS的东西,然后自己实践了下,界面倒是蛮漂亮的,但是一旦涉及到与服务器端进行数据互动麻烦就出来了,本来下了个例子确发现是用DWR的,觉得我既然用了STRUTS2作为MVC的框架,我觉得这个框架还是很不错的,觉得还是把EXTJS整合到一起更好些,找了相关的资料,跟着前辈做了下例子,发现完全不是那么回事,只好自己慢慢摸索,终于把数据交互的问题解决了,所以记录之以便查阅!

ExtJs关于grid高度自适应浏览器的问题解决办法

ExtJs中对于grid适应高度问题相信很多人都遇到过,宽度当然好说,高度设置了百分比结果始终不能适应容器高度。

解决思路是,加载完成时,获取document对象的高度,减去grid上面其他panel的高度(如果页面只有一个grid的话可以省去这一步),然后结果付给grid的高度。

当浏览器高度变化的时候,调用window对象的onresize方法,再次按照上述步骤,重新调整grid的高度。实现自适应高度。

//设置grid高度
    grid.setHeight(document.body.clientHeight-Ext.get('topPanel').getHeight());
    //窗口重绘时改变grid高度
    window.onresize=function(){
        grid.setHeight(document.body.clientHeight-Ext.get('topPanel').getHeight());
    };

ExtJs视频教程 - ExtJs精品课程

ExtJS是一个Ajax框架,是一个用javascript写的,用于在客户端创建丰富多彩的web应用程序界面。

ExtJS可以用来开发RIA也即富客户端的AJAX应用。

该精品课程分为四个章节。

本章是对第三章extjs常用组件的讲解。该视频中讲解的了extjs panel和tabpanel组件的使用。通过这两个组件的讲解,学会了extjs API的查询与使用,组件继承关系的了解与学习方法,对之后其他组件的使用起到入门的作用。

使用SenchaTouch开发HTML5跨平台应用

下面我们看看HTML5的Mobile UI框架,现在比较流行有Sencha Touch和jQuery Mobile等,最近花了几天稍稍研究了一下,刚开始由于很久没有写html代码了,所以还有点不适应,于是到w3c的网站上依次把html5, css, javascript的教程快速过了一遍,然后感觉一下子满血复活了,毕竟这些代码的语法还是很简单的。

然后到jQuery Mobile的网站上看了一下,是不是很眼熟?没错SUP的HWC应用就是采用了jQuery Mobile的主题。所以我就又到Sencha的网站上逛了一下,看了看它的帮助文档,写的特别好,很清楚很详细。Sencha也是很重要的一个产品,这两年很有名,而SAP也和它成为了合作火伴,相信以后在移动领域会有更多的合作。

List在MVC下显示store数据的问题

如果采用MVC模式定义了Store和对应的model,分别为:

Ext.define('hcx.store.ContactStore',{ 
  extend : 'Ext.data.Store',
  xtype  : 'hStore',
  requires : ['hcx.model.Contact'],

  config: {
    model : 'hcx.model.Contact',
    sorters : 'lastName',
    grouper : {
      groupFn : function(record){
          return record.get('lastName')[0];
          }
        },
    data : [
       { firstName: 'Tommy',   lastName: 'Maintz'  },
       { firstName: 'Rob',     lastName: 'Dougan'  },
       { firstName: 'Ed',      lastName: 'Spencer' },
       { firstName: 'Jamie',   lastName: 'Avins'   }
              ]
}});

Sencha Touch的Form使用

很多App都需要使用forms来获取用户的输入。ST的forms是封装了html5的forms,并且添加了一下验证和提交数据功能。除此之外,还更容易将field以更好的表现形式布局出来。因为forms中已经默认对field进行了布局排列。

Form Panel 提供一组form fields 和很便利的方式去加载和保存数据。使用一个form panle 包含了一组你需要展示的fields,如下面的例子:

ExtJs中OA管理中组织和用户关系左右选择组件的运用

我完成的效果是:

这里点击左边的树是联动右边itemselector 组件中的用户,并且带有用户搜索

ExtJs视频教程(关东升)

智捷关东升老师ExtJs视频教程
AJAX框架-ExtJs简介
观看地址:[url]http://v.youku.com/v_show/id_XMTUxMjg3NTMy.html

AJAX框架-ExtJs细化-1
观看地址:http://v.youku.com/v_show/id_XMTUwOTc2Mzg0.html

AJAX框架-ExtJs细化-2
观看地址:http://v.youku.com/v_show/id_XMTUxMjg2NTYw.html

AJAX框架-ExtJs细化-3
观看地址:http://v.youku.com/v_show/id_XMTUxMjQzOTAw.html

作者介绍
关东升老师,清华大学计算机硕士
1998年开始研究JAVA,国内最早的JAVA倡导者之一,国内最早的Spring研究者,四层架构设计提出者。10多年JAVA开发,精通JAVA、JSP、Servlet、Struts1、Struts2、Spring和AJAX等,擅长基于J2EE构架的系统设计和开发及物流信息系统设计开发。精通VS.NET 2008,Team System 2008,精通微软.NET体系结构、移动开发、设计模式与软件架构,擅长软件系统的架构、分析与设计。

Sencha Touch命名规范

类名

类名只包含字母和数字,但在多数情况下不鼓励使用数字,除非是技术术语,不要使用下划线,连字符,和其他非数字字母的字符,例如:

  • MyCompany.useful_util.Debug_Toolbar is discouraged
  • MyCompany.util.Base64 is acceptable

类名应当分组成包,适当时,使用.进行命名空间划分,至少在类名中应该有一个唯一的命令空间。例如:

MyCompany.data.CoolProxy
MyCompany.Application

Sencha Touch Carousel 去除底栏

Sencha Touch Carousel 去除底栏

[code]
/*global Ext:false */
Ext.application({
launch: function () {
Ext.create('Ext.Carousel', {
defaults: {
styleHtmlContent: true
}, // defaults
indicator: false, //Carousel 去除底栏
fullscreen: true,
items: [
{
html: 'red',
style: 'background-color:#f00;'
}, {
html: 'orange',
style: 'background-color:#ffb600;'
}, {

Sencha架构解读

sencha是移动端的html5框架,可以用来制作跨平台的app应用。sencha内部利用mvc结构,使得整个框架在使用时能够保持代码的整洁,也易于测试和修改。

一个 sencha app是一个由model,controller,view,store,profile,再加上一些静态资源,例如:app的图标,加载页面图片等组成的集合
models:表明了app的类型,比如,电子商务型的app应该有 用户,产品,订单等模块
views:负责想用户展示数据,使用sencha 内部已有的组件
controllers:处理内部各部分之间联系,监听用户的点击、滑动并采取相应行动
store:负责加载数据,增强里内部组件的能力,如Lists和DataViews
Profile:能够在公用尽量多的代码的同时,很便利的优化app在平板和手机的UI

建立一个app通常要做的第一件事就是定义application,如下

Sencha Touch 2 快速入门

什么是Sencha Touch?

Sencha Touch使得你可以便捷地创造一个基于HTML5的手机应用,支持Android、iOS和黑莓等设备,并且在浏览器中创造原生APP般的体验。

你需要准备好

首先,你需要下载免费的Sencha Touch 2 SDK 和 SDK Tools (或者Sencha Cmd ) 。你还需要:
一个本地的web server
现代浏览器;推荐 Chrome 和 Safari (请不要用IE6!!)
如果你是在Windows上使用IIS,请记得添加 application/x-json 这个MIME Type,否则Sencha Touch不能正常工作。你可以从这里知道应该如何做:
http://stackoverflow.com/a/1121114/273985(很抱歉我并不使用IIS,没有对这个链接中的方法进行测试)。

ExtJS入门——开始

认识ExtJS
extjs是使用javascript、css和html等技术实现的主要用于创建用户界面,且与后台技术无关的前端ajax框架。
extjs来源于yui,开发理念来源于传统的桌面软件开发。

1.下载extjs,解压,得到目录结构

  • builds:是extjs压缩后的代码,体积更小,加载更快
  • docs :extjs的文档
  • examples:官方示例
  • locale:多国语言的资源文件
  • overview:extjs的功能简述
  • pkgs:extjs各部分功能的打包文件
  • resource:extjs要用到的图片文件与样式文件。
  • src:未压缩过的代码目录
  • bootstrap.js:extjs库的引导文件
  • ext-all.js :必须引入的核心库
  • ext-all-debug.js:ext-all.js的调试版

在MyEclipse和Tomcat下配置Sencha Touch环境

首先要配置开发环境。这个很简单,只要到官方网站下载Sencha Touch压缩包即可http://www.sencha.com/products/touch/。
开发工具随便一个编辑器,记事本也可以的。
本人用的是MyEclipse+Tomcat,Sencha Touch用的是1.01版本(使用MyEclipse+Tomcat我为了以后例子可以跟后台交互)
其实可以直接浏览本地静态html文件的。

ExtJS中layout的用法总结

好久没看过EXT了,最近项目中需要用到就重新复习了下,对于一些知识也都模糊不清,现对Extjs中的layout布局进行总结下:
layout中有absolute,anchor,border,accordion,card,form,table,column,fit这几种,现一一举例:
1.absolute根据字面意思就知道,是根据具体坐标进行定位的,固不写相应的代码了,其他的如下
2.anchor:其值可以使百分比和数值,数值一般为负数,其代表的意思是如果宽度和长度中有一个设定值了,则anchor代表的是未设置的那个,如果两者都没有设定具体值,则如果需要使用anchor则需要anchro:'ww,hh'