今天继续学习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的东西还很多,有时间继续研究吧。