传智播客ajax学习，ExtJS框架

       今天继续学习ajax,主要学习了Ajax的一个很流行的框架ext,是董伟专老师讲的，董老师项目经验很丰富，结合他的实际项目中ext的应用对ext进行了讲解。 ExtJS是一个很不错的Ajax框架，可以用来开发带有华丽外观的富客户端应用，使得我们的b/s应用更加具有活力及生命力。ExtJS是一个用javascript编写，与后台技术无关的前端ajax框架。因此，可以把ExtJS用在.Net、Java、Php等各种开发语言开发的应用中。

    Ext中的tree，功能强大，可以动态增添，修改删除节点，拖拽和右键菜单，都在ext中轻松实现，而且界面和动画效果相当完美。树形是非常典型的数据结够，多级菜单，部门组织结构等都能用树形表示。 tree由TreePanel进行实现 即树形面板 var tree=new Ext.tree.TreePanel("tree"); 参数tree 表示要渲染的dom的id。在html编写代码进行呼应，这样这个tree就可以表现在的位置上。

用TreeNode为树添加一个根， var root = new Ext.tree.TreeNode({text:'root'});

使用setRootNode()方法把这个根放到tree里 tree.setRootNode(root);

对这个tree进行渲染 tree.render();

有了一个根，这还不像一个树，现在为根添加树枝和叶子 var node1 = new Ext.tree.TreeNode({text:'树枝'}); var node2 = new Ext.tree.TreeNode({text:'叶子'}); node1.appendChild(node2); root.appendChild(node1);

渲染好自动展开； root.expand(true,true);第一个true用于递归展开所有子节点，第二参数用于添加动画效果。 还有更简单的方法，就是利用Ext.tree.TreeLoader和后台进行数据交换，使用.txt文件提供数据，让Ext.tree.TreeLoader做数据交换和装配节点。

var tree= new Ext.tree.TreePanel('tree',{loader: new Ext.tree.TreeLoader({dataUrl:'tree.txt'})});

 

 再来看一下grid,它就是一个二维表格，ColumnModel就是grid中的列，

 var cm=new Ext.grid.ColumnModel([ {header:'编号'，dataIndex:'id'}, {header:'姓名'，dataIndex:'name'}, ]);

 每列的header表示这列的名称，这样就有了一个grid的一个骨架，就可以向里面添加数据，可以把数据写到js文件中。

 var data=[ ['1','name1'], ['2','name2'], ['3','name3'], ['4','name4'] ]; 通过Ext.data.Store,我们可以把任何格式的数据转化成grid可以使用的数据，把上面的数据转化为array.

 var ds=new Ext.data.Store({ proxy: new Ext.data.MemoryProxy(data), reader:new Ext.data.ArrayReader({},[ {name:'id'}, {name:'name'}, ])}); ds.load();

proxy表示从哪里获得数据，reader用于解析这个数据，Ext.data.MemoryProxy,用于解析js,传递进去js的参数， Ext.data.ArrayReader用于解析数组，并按照括号中的定义的规范进行解析，每行读取两个数据，对应两列id和name。ds.load()对数据进行初始化。

 var grid=new Ext.grid.Grid('grid',{ ds:ds, cm:cm }); grid.render(); 这样就可以把grid渲染出来了。 Ext的东西还很多，有时间继续研究吧。