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}"));
各个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}"));