extjs 教程(ExtJS 2.0实用简明教程之应用ExtJS)
无论是extjs 教程还是ExtJS 2.0实用简明教程之应用ExtJS，它们都是当前热门话题。如果你对它们感到好奇，那么请跟随小编的脚步，一起来揭开它们的秘密吧！
谁会extJS 教教我
先下载ExtJS的库，部署到PHP环境下（不懂PHP的去下载一个phpstudy，里面都集成好了，把ExtJS库拷贝到www文件夹下就OK了）。
ExtJS不需要你写任何HTML代码，你新建一个HTML页面，引入他的ext-all.css,ext-base-debug.js,ext-all-debug.js(debug是调试版本)，打开火狐，搜索插件（firbug）并安装。然后你新建一个js文件，里面写上:
Ext.onReady(function(){
console.log("firbug日志输出专用函数console.log，IE不支持");
Ext.Msg.Show("标题","我的ExtJS之旅正式开始");
});
用火狐运行HTML页面，你的学习之路正式开始(firbug控制栏会输出"firbug日志输出专用函数console.log，IE不支持",页面上会显示一个ExtJS风格的alert)。
然后先看他的例子，每个例子都看，并模仿着写，照抄也无所谓，但是要理解他里面的参数都是做什么用的，比如closeAction:"hide"、title:"你好"、resizable:false等等。
你在模仿他例子的时候，你会发现有很多参数都不知道是干什么用的，打开它的API（php环境下输入http://localhost/extjs目录名/docs/index.html）
打开API，开始正式学习它。
当你感觉到自己可以写一个Window啊，Panel啊，Grid啊之后，去下载陈老板的ExtJS教学视频。当然，最好能买一本《深入浅出ExtJS》，个人觉得比较浪费，但是前期入门还是很不错的。一些陈老板没细说的问题，在书里都能找到答案。
加群50011014，陈老板在群里，但是他生病了。现在（包括以后）很少上线了。能遇到最好，遇不到群里高手也很多，主动双击私聊问，一般没人拒绝你。公聊估计搭理你的不多。
最后补充一下，ExtJS上手慢但是一旦上手之后，开发起来很爽快。基于JavaScript，所以你JavaScript怎么说也得有最起码的一点点常识。
祝你好运。
ExtJS 2.0实用简明教程之应用ExtJS
样式文件为resources/css/ext-all.css，extjs的js库文件主要包含两个，adapter/ext/ext-base.js及ext-all.js，其中ext-base.js表示框架基础库，ext-all.js是extjs的核心库。adapter表示适配器，也就是说可以有多种适配器，因此，可以把adapter/ext/ext-base.js换成adapter/jquery/ext-jquery-adapter.js，或adapter/prototype/ext-prototype-adapter.js等。
因此，要使用ExtJS框架的页面中一般包括下面几句：
复制代码
代码如下:
<link
rel="stylesheet"
type="text/css"
rel="external nofollow" href="extjs/resources/css/ext-all.css"
/>
<script
type="text/javascript"
src="extjs/adapter/ext/ext-base.js"></script>
<script
type="text/javascript"
src="extjs/ext-all.js"></script>
在ExtJS库文件及页面内容加载完后，ExtJS会执行Ext.onReady中指定的函数，因此可以用，一般情况下每一个用户的ExtJS应用都是从Ext.onReady开始的，使用ExtJS应用程序的代码大致如下：
复制代码
代码如下:
<script>
function
fn()
{
alert(‘ExtJS库已加');
}
Ext.onReady(fn);
</script>
fn也可以写成一个匿名函数的形式，因此上面的代码可以改成下面的形式：
复制代码
代码如下:
<script>
function
fn()
{
alert(‘ExtJS库已加载!');
}
Ext.onReady(function
()
{
alert(‘ExtJS库已加载!');
}
);</script>
extjs5.0日历控件calendar教程资料
最新版本是Extjs5.0.1，我们可以在官方网站进行下载。（这里不得不提一句，Extjs5到目前为止还没有免费的授权，所以下载到的版本是试用版。）
下载到的压缩包解压以后，你会看到一大堆的文件夹和文件，我们该如何使用Extjs5呢？
之前看到过别人说的通过Sencha CMD创建Extjs5项目，但个人觉得那种方式并不适合我们目前的开发模式。我说做ASP.NET的，需要在ASP.NET MVC或WebForm中使用Extjs，所以绝对不上简单的通过Sencha CMD生成Extjs5项目那么简单。
extjs里的treepanel的用法
TreePanel继承自Panel，在ExtJS中使用树控件含有丰富的属性和方法实现复杂的功能。其中Ext.tree.TreeNode代表一个树节点，比较常用的属性包括text、id、icon、checked等、异步树Ext.tree.AsyncTreeNode、树加载器Ext.tree.TreeLoader。下面介绍几个extjs中treepanel例子：
一、TreePanel基本配置参数:
//TreePanel配置参数
animate:true//展开,收缩动画,false时,则没有动画效果
autoHeight:true//自动高度,默认为false
enableDrag:true//树的节点可以拖动Drag(效果上是),注意不是Draggable
enableDD:true//不仅可以拖动,还可以通过Drag改变节点的层次结构(drap和drop)
enableDrop:true//仅仅drop
lines:true//节点间的虚线条
loader:Ext.tree.TreeLoader//加载节点数据
root:Ext.tree.TreeNode//根节点
rootVisible:false//false不显示根节点,默认为true
trackMouseOver:false//false则mouseover无效果
useArrows:true//小箭头
二、TreeNode的基本配置参数:
//TreeNode常用配置参数
checked:false//true则在text前有个选中的复选框,false则text前有个未选中的复选框,默认没有任何框框
expanded:fasle//展开,默认不展开
href:"http:/www.cnblogs.com"//节点的链接地址
hrefTarget:"mainFrame"//打开节点链接地址默认为blank,可以设置为iframe名称id,则在iframe中打开
leaf:true//叶子节点,看情况设置
qtip:"提示"//提示信息,不过要Ext.QuickTips.init();下
text:"节点文本"//节点文本
singleClickExpand:true//用单击文本展开,默认为双击
三、treepanel实例：
第一个静态树--最简单的树：
Ext.onReady(function(){
varmytree=newExt.tree.TreePanel({
el:"container",//应用到的html元素id
animate:true,//以动画形式伸展,收缩子节点
title:"Extjs静态树",
collapsible:true,
rootVisible:true,//是否显示根节点
autoScroll:true,
autoHeight:true,
width:150,
lines:true,//节点之间连接的横竖线
loader:newExt.tree.TreeLoader(),//
root:newExt.tree.AsyncTreeNode({
id:"root",
text:"根节点",//节点名称
expanded:true,//展开
leaf:false,//是否为叶子节点
children:[{text:'子节点一',leaf:true},{id:'child2',text:'子节点二',children:[{text:"111"}]}]
})
});
mytree.render();//不要忘记render()下,不然不显示哦
})
效果图:
好了，文章到此结束，希望可以帮助到大家。