※HelloWorld
下載完後的圖
文檔連結
上面圖的上一層是一個叫 extjs-4.1.1a 的資料夾，以下的測試檔就是放在這一層
<html>
<head>
<title>ExtJS4 Test</title>
<script src="extjs-4.1.1a/ext-all.js"></script>
<script src="extjs-4.1.1a/locale/ext-lang-zh_TW.js"></script>
<script src="extjs-4.1.1a/locale/ext-lang-zh_CN.js"></script>
<link href="extjs-4.1.1a/resources/css/ext-all.css" rel="stylesheet" />
</head>
<script>
Ext.onReady(function(){
Ext.Msg.alert('標題', '內容');
});
</script>
</html>
※可以發現文檔裡還有很多，如prompt、confirm…等，都在Methods裡，當然還有Properties、Events、Config options
※方法和 Ext.onReady 都會後者蓋前者，不是附加哦！
※Ext.onReady 裡面還可以再放 Ext.onReady，但是內層會覆蓋外層，如下：
Ext.onReady(function(){
Ext.Msg.alert('標題1', '內容1');
Ext.onReady(function(){
Ext.Msg.alert('標題2', '內容2');
Ext.onReady(function(){
Ext.Msg.alert('標題3', '內容3');
});
});
});
※所以最後都被「標題3,內容3」覆蓋
※文檔有寫「Ext.MessageBox alias Ext.Msg」，所以都是一樣的
或者用 var xxx = new Ext.window.MessageBox; 然後再用「xxx.方法」也是 ok 的
※alert還有第三、四個參數，不是必要的，看文檔
※事件
※單一事件
<html>
<head>
<title>ExtJS4 Test</title>
<script src="extjs-4.1.1a/ext-all.js"></script>
<script src="extjs-4.1.1a/locale/ext-lang-zh_TW.js"></script>
<script src="extjs-4.1.1a/locale/ext-lang-zh_CN.js"></script>
<link href="extjs-4.1.1a/resources/css/ext-all.css" rel="stylesheet" />
</head>
<script>
Ext.onReady(function(){
var btn = Ext.get("b");
btn.on('click', function(a,b,c){
alert('好痛');
});
});
</script>
<body>
<button id="b">按我</button>
</body>
</html>
※Ext.get 回傳 Ext.dom.Element ，裡面有個 on 方法
※多個事件
<html>
<head>
<title>ExtJS4 Test</title>
<script src="extjs-4.1.1a/ext-all.js"></script>
<script src="extjs-4.1.1a/locale/ext-lang-zh_TW.js"></script>
<script src="extjs-4.1.1a/locale/ext-lang-zh_CN.js"></script>
<link href="extjs-4.1.1a/resources/css/ext-all.css" rel="stylesheet" />
</head>
<script>
Ext.onReady(function(){
var btn = Ext.get("b");
btn.on({
'click': {
fn : function(evt, el, o){
alert('好痛');
},
scope:this,
delay:1000
},
'mouseout': {
fn : function() {
alert('好爽');
}
}
});
});
</script>
<body>
<button id="b">按我</button>
</body>
</html>
※
沒有留言:
張貼留言