`
ko8e
  • 浏览: 53189 次
  • 性别: 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
分享到:
评论

相关推荐

    Extjs学习笔记

    ExtJS 学习笔记 ExtJS 是一个功能强大且流行的 JavaScript 库,用于构建富互联网应用程序(RIA)。本文将通过一个简单的示例,介绍如何使用 ExtJS 构建一个 Hello World 网页,并且详细讲解 Ext.MessageBox 的使用...

    ExtJs 学习笔记 Hello World!第1/2页

    首先,ExtJS的"Hello World"示例通常涉及到引入必要的库文件。在开始使用ExtJS之前,你需要从官方网站(http://extjs.com/products/extjs/download.php)下载框架的最新版本。解压后,你会看到包含adapter、build、...

    extjs4笔记PDF版本,带目录

    1. **创建JS文件**:在WebRoot目录下创建`helloworld.js`,编写基本的应用结构: ```javascript Ext.application({ name: 'HelloExt', launch: function () { Ext.create('Ext.container.Viewport', { layout:...

    extjs 学习笔记(一) 一些基础知识

    以上知识点涵盖了ExtJS学习笔记中的核心内容,通过这些知识点的学习和实践,开发者能够入门并逐渐深入理解ExtJS框架,并将这些知识应用到实际的开发工作中去。对于希望深入学习ExtJS的开发者来说,理解这些基础知识...

    Extjs学习笔记之一 初识Extjs之MessageBox

    在`Hello World`示例中,我们看到HTML文档包含了几个重要的引用,包括ExtJS的基础样式表`ext-all.css`和JavaScript库文件`ext-base-debug.js`和`ext-all-debug.js`。这些文件的顺序非常重要,因为它们定义了ExtJS...

    韩顺平java从入门到精通视频教程(全94讲)学习笔记整理(齐全).doc

    2. **编译**: 执行 `javac HelloWorld.java`。 3. **运行**: 使用 `java HelloWorld`。 ### JDK 安装与配置 1. **下载**: 访问 Sun Microsystems 的官方网站下载 JDK。 2. **安装**: 按照提示完成安装过程。 3. **...

    神奇的JQuery学习[基础学习笔记].pdf

    JQuery学习基础学习笔记为我们提供了一个全面认识和了解JQuery的机会,JQuery是一个快速、小巧且功能丰富的JavaScript库。它简化了HTML文档遍历和事件处理、DOM操作、动画以及Ajax交互,从而加速了web开发过程。 ...

Global site tag (gtag.js) - Google Analytics