jQuery MiniUI,快速开发WebUI界面

中文教程

NodeJS 和 ExtJS

最近在看一些extjs和nodejs的东西,就试着将其结合着使用下。

1.新建express项目

首先我们新建一个express的项目,可以参照Web Development With Express

express -e extjs-demo
cd extjs-demo
sudo npm install

Visual Studio 中使用 ExtJs

一、要想运行extjs,首先要对extjs的样式及库文件进行配置,库文件及样式下载地址:
http://extjs.org.cn/download/

二、在VS(本人使用的是Microsoft Visual Studio 2010)中创建空白网页后,之后再添加库文件和样式文件。
先创建基本网站项目。

Sencha Touch 2 入门心得

涉足了一下sencha touch ,它也属于ExtJs框架的一种,看了很多天,糊里糊涂的,虽然有API,可是不懂它的机制还是没啥用……

后来看了很多博文,才略懂一二啊

或者步骤可以这样说:

1、下载sencha touch 的开发文档,里面包括了example ,2.1.0版本及低版本的还包含API,新版本的连到了官网。
2、下载Sencha Cmd 工具,利用DOC命令,可以直接build一个app初版。
3、sencha touch 开发工具配置代码提示,具体方法可以网上再搜。

简单破解 Sencha Architect 2.2

Sencha Architect 2是ExtJS和Sencha Touch的官方可视化IDE工具。最新版本是2.2,说是破解,其实是修改License来实现无限试用而已。

1、先下载安装官方软件,大约40M,软件下载地址:

http://extjs.org.cn/node/628

2、安装并注册一个用户进行试用,默认每个新用户可以试用30天。使用注册的账号登陆并试用一次之后,就可以退出软件了。

3、Windows用户请找到你的系统盘的如下路径下的文件:"C:\Users\用户名\AppData\Local\Sencha\Sencha Architect 2.2\user.license"。

Linux用户在这路径找:/home/**/.local/share/data/../user.license

4、找到user.license内的ExpiresExpire

好了,到现在大功告成,可以无限试用了。

作者:风君
原文:http://7626.net/?p=367

ExtJS Form 回车提交

[code]
/**
* 该表单提供对各个元素回车验证并且自定切换到下一个元素功能
*/
Ext.define("Ext.ux.form.Panel",{
extend:"Ext.form.Panel",
isValid:function(){
var isValid = true;
Ext.Array.each(this.items.items,function(item,index){
if(!item.isValid()){
isValid = false;
item.focus();
return false;
}
});
return isValid;
},
initComponent:function(){
var me = this;
var specialKey = function(field,e,eOpts){
if (e.getKey() == Ext.EventObject.ENTER) {
var isValid = true;
if(!field.isValid()){
field.focus();
}else{
if(me.isValid()) {
me.getFo

学习总结之ExtJs的相关了解和问题解决篇

1、通过Ext.data.Record.create的类来创建数据库表中的记录,其中名称的顺序与数据库表中的名称一一对应
通过Ext.data.Store类来定义表格的数据存储器:proxy提供访问地址, reader解析数据
通过Ext.grid.CheckboxSelectionModel 设置多项选择 设置singleSelect : false即可
通过Ext.grid.ColumnModel来创建表格的列信息
通过Ext.form.Hidden 来设置需要隐藏的列信息
通过Ext.form.TextField 创建表单文本框
通过Ext.form.NumberField 创建智能输入数字类型的文本框
通过Ext.form.TextArea 创建文本区域 如备注(填写的区域)
通过Ext.Toolbar 创建工具栏:显示所有控件,如增删改查
通过Ext.form.FormPanel 创建弹出增加,修改页面的的面板
通过Ext.Window 来显示增加 删除页面的窗口
通过Ext.grid.GridPanel类 基于Grid控件的一个面板组件,呈现了Grid的主要交互接口
通过Ext.PagingToolbar 和Ext.data.Store参与绑定并且自动提供翻页控制的工具栏
通过Ext.util.Format.date 将日期类型转换为字符串

Extjs 4.2 Grid增删改及后台交互(Java)

上次发了Easyui Datagrid的增删改查的使用学习记录后一直想整理下基于Extjs4.2的Grid学习使用记录。苦于抽不出时间,一直拖到现在。不得不说,Extjs确实很强大,新版的Neptune风格也很入我眼,但毕竟没怎么用过,第一次用,也不敢上来就搞什么自定义组件,也就纯粹的model+store+panel声明式创建表格了。

抛开分页,抛开排序,今天只简单讲一下最近使用中总结出来的rest形式增删改查数据的方式。发现这种方式挺不错的,故而分享下。
代码Example如下:

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体系结构、移动开发、设计模式与软件架构,擅长软件系统的架构、分析与设计。