extjs读书笔记(一)

extjs读书笔记(一)

各个extjs版本下载地址
http://www.extjs.com/learn/Ext_Version_Archives

基本语法
1.Ext.Element元素

document.getElementById("test")得到HTML元素
Ext.get()得到Ext.Element元素，要得到HTML元素的话，需要Ext.get().dom

Ext.getCmp是Ext.ComponentMgr.get的缩写，得到注册的ext的组件，比如：
var foo = new Ext.Panel({
id:'panelCmp',
title:"测试",
renderTo:"divHolder",
width:300,
height:200
});
Ext.getCmp("panelCmp").setTitle("新的标题");
<div id="divHolder"></div>

Ext.getBody方法与document.body得到的元素对应
Ext.onReady(function(){
var foo = new Ext.Panel({
title:"测试",width:300,height:200
})
foo.render(Ext.getBody());
})

Ext.Element.* 显示隐藏方法
show/hide ----- setVisible 显示与隐藏
setVisibilityMode 隐藏显示方式
setOpacity 透明度

Ext.Element.* 内容控制方法
update
load

Ext.Element.* 操作DOM方法(DomHelper)
parent
createChild 子
appendChild 同级
remove
insertBefore/insertAfter
insertFirst
insertSibling

Ext.Element.* 尺寸大小/定位方法
setHeight
setWidth
setSize
setBounds
move
center

Ext.Element.* 特效动画方法
hightlight
frame

2.Domhelper介绍
<div id="testID"></div>
<script>
var list = Ext.DomHelper.append('testID', {
tag: 'ul', cls: 'my-list', children: [
{tag: 'li', id: 'item0', html: 'List Item 0'},
{tag: 'li', id: 'item1', html: 'List Item 1'},
{tag: 'li', id: 'item2', html: 'List Item 2'},
{tag: 'li', id: 'item3', html: 'List Item 3'},
{tag: 'li', id: 'item4', html: 'List Item 4'}
]
});
</script>

3.元素选择DomQuery介绍
元素选择
Ext.query("span")
Ext.query("span","foo") id为foo
Ext.query("#foo")
Ext.query(".foo") class名字
Ext.query("*") 返回所有对象
Ext.query("div span")

如果开启了Firefox的Firebug的情况下，可以开启“控制台”，使用如下调试打印信息
<script>
// 这个查询会返回有两个元素的数组因为查询选中了对文档的所有span标签。
console.log(Ext.query("span"));
// 这个查询会返回有一个元素的数组因为查询顾及到了foo这个id。
console.log(Ext.query("span", "foo"));
console.log(Ext.query("#foo"));// 这个查询会返回包含我们foo div一个元素的数组！
/*
这个查询会返回有一个元素的数组，
包含与之前例子一样的div但是我们使用了class name来获取
*/
console.log(Ext.query(".foo"));
//你也可以使用关键字“*”来获取所有的元素：
console.log(Ext.query("*"));//这会返回一个数组，包含文档内的所有元素。
//要获取子标签，我们只须在两个选择符之间插入一个空格：
console.log(Ext.query("div p")); //这会返回有一个元素的数组，内容为div标签下的p标签
console.log(Ext.query("div span"));// 这会返回有两个元素的数组，内容为div标签下的span标签
</script>


属性选择符
Ext.query("*[class=bar]"); //class="bar"的所有元素
Ext.query("*[class!=bar]");//class不等于"bar"的所有元素
Ext.query("*[class^=bar]");//class从b开头的所有元素
Ext.query("*[class$=r]");//class由r结尾的所有元素
Ext.query("*[class*=a]");//class中抽出a的所有元素
Ext.query("*[class]");//返回所有有class标签的元素

css值选择符
Ext.query("*{color=red}");//获取红色的元素
Ext.query("*{color=red} *{color=pink}"); //获取红色且粉红色的元素
Ext.query("*{color!=red}");//不是红色的元素
// 获取所有颜色属性是从“yel”开始的元素
console.log(Ext.query("*{color^=yel}"));
// 获取所有颜色属性是以“ow”结束的元素
console.log(Ext.query("*{color$=ow}"));
// 获取所有颜色属性包含“ow”字符的元素
console.log(Ext.query("*{color*=ow}"));