`
ko8e
  • 浏览: 52146 次
  • 性别: 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学习笔记-2积分.doc

    语言程序设计资料:ExtJs学习笔记-2积分.doc

    ExtJS----HelloWorld程序源码

    在"ExtJS----HelloWorld程序源码"中,我们将会看到如何使用ExtJS来创建一个简单的“你好,世界!”应用。以下是对这个示例中涉及的主要知识点的详细解释: 1. **引入ExtJS库**:首先,你需要在HTML文件中引入ExtJS...

    extjs学习笔记-开发者必备

    对爱好extjs的开发者有帮助,提供中文api文档,及常用的方法!

    ExtJS笔记---Grid实现后台分页

    这篇“ExtJS笔记——Grid实现后台分页”探讨了如何在ExtJS的Grid组件中实现高效的后台分页功能。 后台分页是一种常见的数据处理策略,特别是在大数据量的情况下,它将数据分批加载,避免一次性加载所有记录导致的...

    ExtJs常用布局--layout详解实例代码

    ExtJs常用布局--layout详解实例代码: ExtJs常见的布局方式有:border、form、absolute、column、accordion、table、fit、card、anchor 另外,不常见的布局有:tab、vbox、hbox 具体使用方法可见该文件的案例代码。 ...

    extjs-620-docs.zip

    extjs-620-docs官方文档extjs-620-docs官方文档extjs-620-docs官方文档

    extjs-620-docs.rar完全离线版

    此"extjs-620-docs.rar"压缩包包含了该版本的完全离线版API文档,旨在解决在没有网络连接或网络环境不稳定时,开发者仍然可以便捷地查阅和学习ExtJS 6.2.0的相关知识。 API 文档是任何开发者的重要工具,特别是对于...

    ExtJS笔记----FormPanel的使用

    NULL 博文链接:https://lucky16.iteye.com/blog/1490278

    extjs-theme-bootstrap

    "extjs-theme-bootstrap" 是针对 EXTJS4 的一个主题,它借鉴了 Bootstrap 的设计风格,让 EXTJS4 应用程序具有更加现代化和一致的外观。 Bootstrap 是一个流行的前端开发框架,由 Twitter 推出,主要用于构建响应式...

    Extjs4.0学习笔记

    Extjs4.0学习笔记,以下是部分介绍: xtjs4,创建Ext组件有了新的方式,就是Ext.create(....),而且可以使用动态加载JS的方式来加快组件的渲染,我们再也不必一次加载已经达到1MB的ext-all.js了,本文介绍如何在EXTJS4...

    extJs-5.0.1-gpl(part1)

    extJs-5.0.1-gpl附带sencha cmd安装程序、ruby编译包(分为32位和64位)和教程,一共四部分

    ExtJS快速入门--传智播客--蔡世友

    ExtJS快速入门--传智播客--蔡世友

    ExtJS学习笔记.doc

    ExtJS学习笔记.docExtJS学习笔记.docExtJS学习笔记.docExtJS学习笔记.doc

    extjs2----关于extjs 的使用,操作

    描述中提到内容较为初级,适合初学者学习,这表明我们将探讨的是ExtJS的基础概念和常用组件。 首先,让我们来了解一下ExtJS的核心概念。ExtJS基于组件模型,允许开发者构建复杂的用户界面,这些组件可以是按钮、...

    extjs-theme-bootstrap-master.zip

    "extjs-theme-bootstrap-master.zip" 文件很可能是ExtJS的一个主题包,它集成了Bootstrap的样式,使得ExtJS组件能够呈现出Bootstrap的经典外观。 在深入讲解这个主题之前,让我们先了解一下基础概念: 1. **ExtJS*...

    extjs-OA extjs-oa

    一个extjs的OA项目 extjs-OA extjs-oaextjs-OA extjs-oa

    extjs-docs-6.0.0-classic.part01.rar

    Ext JS 6最大的变化就是将Ext JS和Touch合并为一个单一的框架。之前的框架的核心(数据、控制器、模型等等)已被调和为一个单一的公共平台。这样,数据和逻辑就能共享,从而帮助开发人员进一步去优化他们的应用程序...

    extjs-7.0.0-docs

    extjs-7.0.0-docs, EXT 7.0.0 官方离线文档包, 希望可以助力于您

    extjs-660-docs

    extjs-660-docs,EXT官方离线文档包, 希望可以且助力于您

Global site tag (gtag.js) - Google Analytics