看下入门教程,整理下,希望可以和一些朋友一起学习(wully)
1 更新body
<div style="border: 0.5pt solid windowthtml" title=ext>ext; padding: 4px 5.4pt; background: rgb(230, 230, 230) none repeat scroll 0% 50%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; width: 95%;"> <div> < html >
< head >
< meta http - equiv = " Content-Type " content = " thtml" title=ext>ext/html; charset=iso-8859-1 " >
< title > test </ title >
< link rel = " html" title=stylesheet>stylesheet " type = " thtml" title=ext>ext/css " href = " js/html" title=ext>ext/resources/css/html" title=ext>ext-all.css " />
<!-- GC -->
<!-- LIBS -->
< script type = " thtml" title=ext>ext/javascript " src = " js/html" title=ext>ext/adapter/html" title=ext>ext/html" title=ext>ext-base.js " ></ script >
<!-- ENDLIBS -->
< script type = " thtml" title=ext>ext/javascript " src = " js/html" title=ext>ext/html" title=ext>ext-all.js " ></ script >
< script type = " thtml" title=ext>ext/javascript " >
html" title=function>function update() html" title=ext>ext">{
Ext.get(document.body).update('<div id="test">update</div>');
}
</ script >
</ head >
< body id = " body " >
< div > init </ div >
< input type = " html" title=button>button " value = " sumbit " onclick = " update() " >
</ body >
</ html >
div> div>
2 添加面板
<div style="border: 0.5pt solid windowthtml" title=ext>ext; padding: 4px 5.4pt; background: rgb(230, 230, 230) none repeat scroll 0% 50%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; width: 95%;"> <div> < html >
< head >
< meta http - equiv = " Content-Type " content = " thtml" title=ext>ext/html; charset=iso-8859-1 " >
< title > test </ title >
< link rel = " html" title=stylesheet>stylesheet " type = " thtml" title=ext>ext/css " href = " js/html" title=ext>ext/resources/css/html" title=ext>ext-all.css " />
<!-- GC -->
<!-- LIBS -->
< script type = " thtml" title=ext>ext/javascript " src = " js/html" title=ext>ext/adapter/html" title=ext>ext/html" title=ext>ext-base.js " ></ script >
<!-- ENDLIBS -->
< script type = " thtml" title=ext>ext/javascript " src = " js/html" title=ext>ext/html" title=ext>ext-all.js " ></ script >
< script type = " thtml" title=ext>ext/javascript " >
html" title=function>function addPanel() html" title=ext>ext">{
new Ext.Panel(html" title=ext>ext">{
renderTo: 'test',
width: '200px',
title: 'My Title',
html: 'My HTML content'
});
}
addPanel();
</ script >
</ head >
< body id = " body " >
< input type = " html" title=button>button " value = " addPanel " onclick = " addPanel() " >
< div id = " test " ></ div >
</ body >
</ html >
div> div> 3 剩下的应该就是照着这俩个例子,打开 http://127.0.0.1/html" title=ext>ext/docs/(呵呵,这个要安装html" title=ext>ext)
去看API拉 。GO ON!!!!!
4 EXT的一些基本方法
Ext. onReady()
会在DOM加载全部完毕后,保证页面内的所有元素能被Script引用(reference)之后调用,应该在上面添加些初始化的方法。
对一个建立的DIV进行操作(<div id=myDiv>test</div>)
myDiv = Ext.get('myDiv');
myDiv.highlight(); //黄色高亮显示然后渐退
myDiv.addClass('red'); // 添加自定义CSS类 (在ExtStart.css定义)
myDiv.center(); //在视图中将元素居中
myDiv.setOpacity(.25); // 使元素半透明
/* 每段高亮显示
<p>parmgraph</p>
Ext. select ( 'p' ). highlight ( );
//Element对象本身有Element.selcect的方法来实现查询(返回多个对象)
*/
5 事件的响应
对按钮点击事件
<input type="html" title=button>button" id="myButton" value="My Button" />
Ext.onReady(html" title=function>function() {
Ext.get('myButton').on('click', html" title=function>function(){
alert("你单击了按钮");
});
});
对段落的点击事件
Ext.onReady(html" title=function>function() {
Ext.select('p').on('click', html" title=function>function() {
alert("你单击了一段落;");
});
});
或者
Ext.onReady(html" title=function>function() {
var paragraphClicked = html" title=function>function() {
alert("你单击了一段落;");
}
Ext.select('p').on('click', paragraphClicked);
});
或者
Ext.onReady(html" title=function>function() {
var paragraphClicked = html" title=function>function(e) {
Ext.get(e.target).highlight();
}
Ext.select('p').on('click', paragraphClicked);
});
e.target是DOM节点
div>
div>
<div id="treeSkill">div>