令人头痛的Ext...

作者在 2008-03-19 16:25:34 发布以下内容
        今天看了一天的Ext,没有发现有比较系统的教材...每个组件的定义,里面的属性,简单的例子,有些倒是讲到了,但是有些没有。API文档也只是一个一个的讲各个组件的属性和方法。这样看比较头大,不知道有没有一本好点的书来看看。
        写了一个window,算是今天学到的吧。不过里面的信息背景是白色的,想弄得跟window背景的蓝色一样,不知道怎么弄...
        window.html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">

<title>Window</title>

<link rel="stylesheet" type="text/css" href="exts/ext-all.css" />

<script type="text/javascript" src="exts/ext-base.js" ></script>

<script type="text/javascript" src="exts/ext-all.js" ></script>

<script type="text/javascript" src="js/my_window.js" ></script>

</head>

<body>

<input type="button" id="b1" value="Click" /><br/>

<div id="window-win">

<div id="content">

<div id="msg-cancel"></div>

</div>

</div>

</body>

</html>
        然后是my_window.js:

Ext.onReady(function(){

var b1 = Ext.get('b1');

b1.on('click',function(){

var win = new Ext.Window({

el:'window-win',

width:300,

height:280,

closeAction:'close',

title:'Ext window',

items:[{

html:'This is just a message.'

}],

buttons:[{

text:'Alert',

handler:function(){

Ext.Msg.alert('Status', 'It is OK!');

}

},{

text:'Confirm',

handler:function(){

Ext.Msg.confirm('Confirm', 'Choose Yes or No?', function(btn){

alert('You clicked ' + btn);

});

}

},{

text:'Prompt',

handler:function(){

Ext.Msg.prompt('Prompt', 'Your name?', function(btn, text){

if(btn == 'ok') {

alert('I got your name,' + text + '!');

}

});

}

},{

text:'Show',

handler:function(){

Ext.Msg.show({

multiline:true,

title:'Cancel',

msg:'Really want to cancel?',

buttons:Ext.Msg.YESNOCANCEL,

animEl:'msg-cancel',

fn:function(btn){

if(btn == 'yes') {alert('OK! Canceled!');}

if(btn == 'no') {alert("You don't cancel!");}

if(btn == 'cancel') {alert('cancel!');}

}

});

}

}]

});

win.show();

});

});

        刚开始不太习惯Ext的这种语法,现在好点了。继续学习...

Ext2.0 | 阅读 5050 次
文章评论,共0条
游客请输入验证码