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编写代码进行呼应，<div id="tree"></div>,这样这个个tree就可以在表现在<div>的位置上。
用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的东西还很多，有时间继续研究吧。