如何学习Extjs
一个偶然的机会，我发现了ExtJS框架，第一次看到其创建出来的效果时，简直兴奋死我啦，呵呵，没想到还有这么漂亮的UI控制，但使用起来却感觉不太爽，其一大缺点就是所带的类库太庞大啦，会比较影响速度，而且帮助文档全部是英文，英文的也还好啦，更重要的是其文档并没有相关的例子，只是列出来使用参数，让人很难掌握，只好去他们的官方论坛到处问人，郁闷！不过还好，外国人一般都比较热情，基本上问的问题都有人会给我答复，呵呵在帮朋友做的一个网站里，我就开始了大量使用了EXTJS框架，虽然其类库文件是很大，不过感觉能做出这种效果的话，这点牺牲还是值得的为了不让自己很快又忘记，所以还是决定在这里写下一点东西，以后也比较方便查找，如果其中有写错的地方，请大家及时指正哦，谢啦！先说说EXTJS的自定义函数吧，以下语句可创建一个函数：Ext.Login=function(){function IsLogin(){}return{init:function(){IsLogin();},Login:function(){ }}刚开始时让我比较郁闷的是这种JS里的函数调用机制，以上代码里，将创建一个名为Ext.Login()的对象，应该相当于一个类的意思吧，然后可在其里面写其他相关的方法在return里的为公有方法，这里面的方法可给外部程序调用（如在HTML文件里用），而在return以外的代码是其私有方法，只能在Ext.Login()这个对象里调用如需要在其他页面调用里面的Login()方法，可直接写如果需要在页面加载时就调用，一般只需直接用EXTJS里的方法即可实现：Ext.onReady(Ext.Login.init, Ext.Login);这里的函数名并不需要加括号，第一个参数是要调用的方法，第二个是作用域，一般写此对象名即可OK，关于基本的函数使用调用要注意的差不多就这些吧，之后再写写对AJAX的运用。
转：新手如何学习ExtJS 4
最近运营ExtJS交流群的时候，感触颇深，我感觉作为一个老手，我有必要介绍一下如何学习这种基础性问题。新手如何学习ExtJS4？如何入门ExtJS4？如何快速学习ExtJS4？1.仔细阅读新手教程新手教程是指ExtJS官方文档中Guides那一系列文章，因为是英文的，新手阅读起来可能有障碍，为此我特意翻译了这一系列教程，根据使用频度我已经差不多把最常用到的教程翻译完了，后续还将继续翻译。通读这一系列教程后，你会对ExtJS的基本使用方法有个框架性的了解，你会大体上知道如何实现常用功能。现在我把所有已翻译的教程列举在此，记住，认真的读一定对你有帮助。ExtJS 4 入门ExtJS 4 类系统(Class System)介绍ExtJS MVC架构讲解ExtJS 4 布局和容器ExtJS 4 组件详解ExtJS 4 数据(包)详解ExtJS 4 Grids 详解ExtJS 4 表单ExtJS 4 树2.把官方文档中的所有Demo都浏览一遍做这个事情是为了了解官方Demo中实现了哪些功能，当自己要做一个功能时，有例子照着做是最快的，浏览一遍就会对现有的Demo有个大概印象，当你没有头绪的时候你的大脑会在后台查找之前的印象的，仔细浏览一遍，没有错。3.熟读API Docs(API文档)最近遇到很多人问问题，把一段自己想当然写出来的代码贴上来问为什么不对，事实上你仔细查一下API文档就知道，你这种用法ExtJS根本就不支持，当然不对。使用搜索的好处是：通常可以较快速的解决一些无头绪的问题
使用EXTJS 写的 treePanel.on('load' 不运行
用ExtJS 实现动态载入树（Load tree）
1、 数据库背景：这里有一个组织机构表，结构如下：
Oracle DDL脚本 ：
create table ORGANIZATION(
ORGID NUMBER(10) not null,
PARENTID NUMBER(10) not null,
ORGNAME VARCHAR2(32) not null,
ISAVAILABLE NUMBER(1) default 1 not null
);
alter table ORGANIZATION
add constraint PK_ORGID primary key (ORGID);
alter table ORGANIZATION
add constraint FK_ORGID_PARENTID foreign key (PARENTID)
references ORGANIZATION (ORGID);
初始化数据内容（注意第一行数据是必需的）：
insert into LOON_ORGANIZATION (ORGID, PARENTID, ORGNAME, ISAVAILABLE) values (-100, -100, '组织机构图', 1);
insert into LOON_ORGANIZATION (ORGID, PARENTID, ORGNAME, ISAVAILABLE) values (1, -100, '公司总部1', 1);
insert into LOON_ORGANIZATION (ORGID, PARENTID, ORGNAME, ISAVAILABLE) values (2, -100, '公司总部2', 1);
insert into LOON_ORGANIZATION (ORGID, PARENTID, ORGNAME, ISAVAILABLE) values (3, -100, '公司总部3', 1);
insert into LOON_ORGANIZATION (ORGID, PARENTID, ORGNAME, ISAVAILABLE) values (4, 1, '公司总部1-1', 1);
insert into LOON_ORGANIZATION (ORGID, PARENTID, ORGNAME, ISAVAILABLE) values (5, 1, '公司总部1-2', 1);
insert into LOON_ORGANIZATION (ORGID, PARENTID, ORGNAME, ISAVAILABLE) values (6, 2, '公司总部2-1', 1);
insert into LOON_ORGANIZATION (ORGID, PARENTID, ORGNAME, ISAVAILABLE) values (7, 2, '公司总部2-2', 1);
insert into LOON_ORGANIZATION (ORGID, PARENTID, ORGNAME, ISAVAILABLE) values (8, 3, '公司总部3-1', 1);
insert into LOON_ORGANIZATION (ORGID, PARENTID, ORGNAME, ISAVAILABLE) values (9, 3, '公司总部3-2', 1);
有了数据库支持就可以动态的从数据库中提取树数据。
第一步是建立JSP文件（org.jsp）和JavaScript(org.js)文件：
在org.jsp中导入ExtJS所必需的库文件，并在中加入
Org.jsp文件完全可以是静态HTML文件，这里org.jsp中不包含任何动态内容，注意ExtJS所必需的库文件类库路径问题。
Org.js文件内容：
Ext.onReady(function() {
var Tree = Ext.tree;
var tree = new Tree.TreePanel( {
el : 'tree-div',//目标div容器
autoScroll : true,
animate : true,
enableDD : true,
containerScroll : true,
loader : new Tree.TreeLoader( {
dataUrl : ' OrgTreeJsonData.action '// OrgTreeJsonData.action就是要动态载入数据的请求地址，这里请求时会提交一个参数为node的值，值为root即new Tree.AsyncTreeNode()对象的id值
})
});
var root = new Tree.AsyncTreeNode( {
text : '组织机构树',
draggable : false,
id : '-100'//默认的node值：?node=-100
});
tree.setRootNode(root);
tree.render();
root.expand();
});
OrgTreeJsonData.action所请求的JSON数据例子：
[ {
"text" : "公司总部1",
"id" : "1",
"cls" : "folder"
}, {
"text" : "公司总部2",
"id" : "2",
"cls" : "folder"
}, {
"text" : "公司总部3",
"id" : "3",
"cls" : "folder"
}]
服务器端可以使用这样的SQL语句来查询：
select t.orgid,t.orgname,t.parentid from organization t
where t.parentid='-100' and t.orgid!='-100'
下面的代码片断用于struts2 action类中：
public String treeNode() {
try {
List list = this.organizationService.findByParentId(this.node);
if (list != null && !list.isEmpty()) {
boolean isFirst = true;
int i = 0;
int last = list.size();
for (Object[] o : list) {
if (i == 0) {
this.setJsonString("[{/"text/" :/"" + o[1].toString() + "/" ,/"id/" :/"" + o[0].toString()
+ "/" ,/"cls/" :/"folder/"} ");
} else if (i == (last - 1)) {
this.setJsonString(this.getJsonString() + ",{/"text/" :/"" + o[1].toString() + "/" ,/"id/" :/""
+ o[0].toString() + "/" ,/"cls/" :/"folder/"}]");
} else {
this.setJsonString(this.getJsonString() + ",{/"text/" :/"" + o[1].toString() + "/" ,/"id/" :/""
+ o[0].toString() + "/" ,/"cls/" :/"folder/"}");
}
i++;
}
} else {
this.setJsonString("");
}
System.out.println(this.getJsonString());
} catch (Exception e) {
// TODO Auto-generated catch block
e.printStackTrace();
return this.INPUT;
}
return this.SUCCESS;
}
