`
ko8e
  • 浏览: 50581 次
  • 性别: Icon_minigender_1
  • 来自: 龙岩
社区版块
存档分类
最新评论

ExtJs学习笔记---HelloWorld

 
阅读更多
提供最新Ext的下载地址:http://www.sencha.com/products/extjs/download/

下载后解压,docs目录是它的APi文档,example目录是它的示例

先来个最easy的helloworld:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">    <link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css" />     <script type="text/javascript" src="../adapter/ext/ext-base.js"></script>    <script type="text/javascript" src="../ext-all.js"></script>     <title>ExtJs Study</title></head><body>
<script type="text/javascript">
  Ext.onReady(function() {
  //定义一个函数,功能为弹出一个对话框
  var fHelloWorld = function(){
  Ext.MessageBox.show({
  title: "ExtJs Study",
  msg: "Hello World",
  width: 200,
  buttons: Ext.MessageBox.OK
  });
  }
  //这就是Ext获取页面元素的方法,简单吧
  var oBtnHello = Ext.get("btnHello");
  //将元素居中
  oBtnHello.center();
  //为元素动态增加Click事件
  oBtnHello.on("click", fHelloWorld) });
</script><button id="btnHello">Hello World</button>
</body>
</html>

所有功能都是在Ext.onReady中完成的,用了几个简单的方法,Ext.get取页面指定ID的元素,center()将对象居中,MessageBox.show显示对话框
最后显示的图示:
  • 大小: 31 KB
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics