轻松搞定ExtJs 3.4
首先，我们来看看效果，这是需要实现的东东，经典布局，好吧，我承认，这玩意已经被做烂了，但是还是写写，记录下吧，高手略过哦。我不打算写什么分步的教程，教你如何去使用控件，我们的目标只有一个，实现功能，并且我们的时间不多，毕竟时间宝贵，4天完成，后台我采用php(两天学的)，两天写ext后台(其实还有个前台界面，那个就不说了)。
好了，第一天，我们先准备下工具:
1、Sublime_text2 不得不说的编辑器，相当牛掰。
2、PremiumSoft 不说了，一个很不错的数据库工具，放弃phpmyadmin吧
3、ExtJs库，在这里我讲的将是extjs 3.4库，extjs 4.0.7千万别用，不然哭了可不要说我没提醒，4.1没用过不发表意见，总体，我认为extjs4这个版本的开发效率提高了不少，但是运行效率还是省省吧，不过extjs有个问题，越高的版本对ie6支持就越差劲，所以，如果你有ie6的客户，别选太高的版本，
好了，我们需要准备的就这么多了，php就是简单啊，难怪asp.net不能独步啊。
我们正式开始，按照我的习惯，我喜欢先把程序的原型做出来,那么第一步，我们来认识一下viewport这个元素。
ViewPort,ExtJs用来提供的布局管理器，类似于winform中的dock布局，一个简单的例子，看起来像这样：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <!--ext css--> <link rel="stylesheet" type="text/css" href="..//Jscript/resources/css/ext-all.css" /> <script type="text/javascript" src="..//Jscript/ext-base.js"></script> <script type="text/javascript" src="..//Jscript/ext-all.js"></script> <script type="text/javascript" src="..//Jscript/locale/ext-lang-zh_CN.js"></script> </head> <body> <script type="text/javascript"> //在ext 4以前的版本中这个非常重要，不然会引起界面的混乱 Ext.BLANK_IMAGE_URL = '/jscript/resources/images/default/s.gif'; //Ext的标准提示初始化，当然没有它也可以 Ext.QuickTips.init(); //很熟悉吧，Jquery(document).ready(); ^^ Ext.onReady(function () { var north = new Ext.Panel({ id:'south', html : '<div>这里是我们的管理系统标题哦</div>', bodyStyle: 'background:#133984;padding:20px', height : 60, region : 'north', split : false //禁止拖动 }); var south = new Ext.Panel({ id : 'north', html : '<div style="text-align:center">这里是版权哦</div>', region : 'south', split : false }); var west = new Ext.Panel({ id : 'west', html : '<div>这里是树导航哦</div>', width : 200, region : 'west', split : 'true' }) var content = new Ext.Panel({ id : 'center', html : '这里是主体内容哦', split : 'true', region : 'center' //这里是最重要的，在4版本后如果没有center渲染会报错的 }); var view = new Ext.Viewport({ layout:'border', items : [north,south,west,content] }) }) </script> </body> </html>
这样，你看到的样子应该是这样的：
在这里，有几点提示：
1、大家最好引入html的dtd文件，防止出现莫名的错误。
2、设定meta为utf8，乱码了别哭哦。
3、大家最好去下载extjs的帮助文档，如果找不到的话，在文章的最后提供给大家下载，如何去看这个帮助文档很重要。
接下来，有几个注意献给大家讲下：
1、在extjs中，如果一个控件有items属性，那么可以简写成这样，类似于下面提供的样子：
(当然，中括号有问题，自己补全下哦^^)
我们要说的是，在items中每个{}号代表一个panel，如果你不加xtype属性的话。
好了，第一大步已经完成了，下面给大家介绍重量级控件，tree控件，鼓掌~~~~~。
我们就不在这里给大家写什么静态树了，直接来ajax加载，接上面viewport。
tree的根节点是一个异步节点，名字叫做Ext.tree.AsyncTreeNode，大家可以在api文档中自行查找，建立的方式看起来是这个样子的：
解释下这段代码的结构：
1、id：这个是要像服务器去取值的，必填属性。
2、text：显示出来给大家看的，必填属性。
3、leaf ： 是否是叶节点，必填属性，这个如果不填，那么前面的小图标会不对的。
改写我们viewport的west段代码，使其看起来像这样：
ok，我们的树做完了，相当easy吧，这样子，这棵树就已经是一颗ajax tree了，但是注意哦，后台需要返回的数据是由格式需求的，他们看起来大概是这样的：
[{"id":true,"text":"网站首页","leaf":false},{"id":"2","text":"xxxxx","leaf":false}]
注意看其格式，不然的话会显示出五花八门的错误。
好了，今天就先到这里吧，下课。
哦，忘记了，好像要上传文件的，api在这里哦
