Ext学习笔记(1

技术

昨天用了一下午学习Ext, 搞了一下午最后连个表格都没搞出来, 今天继续, 顺便记录一下.

中文在线手册 http://www.ajaxjs.com/docs/

这里请大家注意一下， 看手册一定要看源码包里的那个docs目录里的， Ext手册版本差异很大， 不一定最新的就一定适用。

使用Ext之前需要加载Ext库, 昨天直接加载核心, 竟然不好用, 最后看例子里面是加载了两个文件, 原因还没搞清楚, 但先记下来.

<script type=”text/javascript” src=”../ext-2.2/adapter/ext/ext-base.js”></script>
<script type=”text/javascript” src=”../ext-2.2/ext-all.js”></script>

最基础的

1
Ext.onReady(fn);

这个和Jquery的$(fn)是一样的, 就是页面加载完毕执行fn

1
Ext.get('idName');

这个就是Jquery中的$(‘#idName’), 返回一个Ext的Element对象.

Element.dom是该对象的DOM节点, 其他内容看手册里的Element部分

1
Ext.select('p')

这个类似Jquery中的$(‘p’), 但是Ext中没有each, Ext.select(‘p’).methodName()直接就作用在全部对象上.

事件绑定

1
Element.on('click', fn);

获得事件句柄

1
2
3
4
5
clicked = function(e){
  Ext.get(e.target).highlight();//e.target为触发该事件的对象id, highlight是高亮闪烁
}

Ext.select('p').on('click',clicked);

消息框
Ext.MessageBox为Ext的消息对象.

Ajax
ajax部分和Jquery非常相像了

1
2
3
4
5
Ext.get('msg').load({
url: 'http://test/ext/data.php',
params: 'name=1',
text: 'Updating...'
});