中文教程

ExtJs + Struts2 + JSON 程序总结

Posted 周五, 04/05/2013 - 14:22 by admin

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

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

Posted 周五, 04/05/2013 - 14:03 by admin

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精品课程

Posted 周五, 04/05/2013 - 13:56 by admin

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

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

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

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

使用SenchaTouch开发HTML5跨平台应用

Posted 周五, 04/05/2013 - 12:01 by admin

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

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

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

Posted 周日, 03/24/2013 - 01:25 by admin

如果采用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使用

Posted 周日, 03/24/2013 - 01:16 by admin

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

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

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

Posted 周一, 03/04/2013 - 21:58 by admin

我完成的效果是：

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

ExtJs视频教程(关东升)

Posted 周三, 02/27/2013 - 22:55 by admin

智捷关东升老师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命名规范

Posted 周三, 02/27/2013 - 22:43 by admin

类名

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

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

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

MyCompany.data.CoolProxy
MyCompany.Application

Sencha Touch Carousel 去除底栏

Posted 周三, 02/27/2013 - 22:35 by admin

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架构解读

Posted 周五, 02/08/2013 - 23:55 by admin

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 快速入门

Posted 周日, 01/06/2013 - 11:02 by admin

什么是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入门——开始

Posted 周五, 12/14/2012 - 01:40 by admin

认识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环境

Posted 周五, 12/14/2012 - 01:17 by admin

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

ExtJS中layout的用法总结

Posted 周二, 12/11/2012 - 10:03 by admin

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

ExtJS中更新html内容以及iframe中内容打印

Posted 周二, 12/11/2012 - 09:56 by admin

工作一年多来，最近的开发，虽说前台和后台都有分工，但是大部分经历都放在前台，界面上有太多的东西需要修改和完善，调试程序更是需要更多的时间，最近的工作在用xsl写样式将xml中的内容显示在界面上，而我们的界面是基于Extjs的，这样我们就在panel中使用html属性，获取内容显示，这样就存在一个问题，当我们需要更新panel中的内容时该怎么办，换面板是一个可以实现目标的方法，但是这似乎又是很笨的方法，我们需要放两个panel在这里，在苦思冥想后，发现Extjs中的panel有更新html的方法，具体怎么实践，可以看一下例子。

如下代码：先定义panel，panel中的html是已经有内容的，其中的dataURL是个变量，需要到后台程序中取数据

ExtJs4新发现10_获取复选框(checkboxgroup&checkbox)的值

Posted 周一, 12/03/2012 - 16:40 by admin

1.fieldset(checkbox) 获取值

复选框组件定义如下：
{
xtype: 'fieldset',
title: '兴趣',
autoHeight: true,
defaultType: 'checkbox',
hideLabels: true,
id: 'xq',
layout: 'hbox',
defaults: {
flex: 1
},
//vertical: false,
items: [
{ boxLabel: '游泳', name: 'xqn', inputValue: '4', checked: true },
{ boxLabel: '玩儿', name: 'xqn', inputValue: '5' },
{ boxLabel: '游戏', name: 'xqn', inputValue: '6' }
]
}

ExtJs4新发现09_xtype的含义以及对应类

Posted 周一, 12/03/2012 - 16:37 by admin

根据我在EXT论坛上的观察，xtype用起来的时候疑惑会比较多。甚至有些人根本忽略xtype，或者不清楚它是什么。所以我决定阐述一下这个xtype的概念。


定义
xtype就是一个代表类（Class）的标识名字。

譬如，你有这个类，名字是Ext.ux.MyGrid。正常情况下你需要用这个名字来实例化这个类（创建类的对象）。

除了类名外，你还可以这样登记类的xtype：

ExtJs4新发现08_改变字体大小提示

Posted 周一, 12/03/2012 - 16:35 by admin

Ext.EventManager.onTextResize(function(oldsize,newsize){
//改变字体大小提示
alert('oldsize:'+oldsize+'newsize:'+newsize);
});

ExtJs4新发现07_监听键盘事件

Posted 周一, 12/03/2012 - 16:34 by admin

Ext.get('text').on('keypress',function(e){
//监听键盘事件
if(e.charCode==Ext.EventObject.SPACE){
Ext.Msg.alert('info','空格');
}
});

其他还有类似事件,keyup,keydown等