ExtJs学习笔记(1)_Hello World!

extjs最新版,可从http://www.extjs.com/官方网下载,下载包解压后docs目录里,就是API文档,samples目录里是示例

今天接触了下ExtJs,确实不错,先来一个最经典的Hello World.

<!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显示对话框

最后运行效果如下:

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索ext
, extjs
, 元素
, messagebox
, World
, Hello
ExtJS笔记
,以便于您获取更多的相关知识。

时间: 2024-08-03 10:27:16

ExtJs学习笔记(1)_Hello World!的相关文章

ExtJs学习笔记

ExtJS学习笔记 - onReady Extjs学习笔记 - 实战 Extjs学习笔记 - 初篇 ExtJs学习笔记(24)-Drag/Drop拖动功能 ExtJs学习笔记(23)-ScriptTagProxy+XTemplate+WCF跨域取数据 ExtJs学习笔记(22)-XTemplate + WCF 打造无刷新数据分页 ExtJs学习笔记(21)-使用XTemplate结合WCF显示数据 ExtJs学习笔记(20)-利用ExtJs的Ajax与服务端WCF交互 ExtJs学习笔记(19)

ExtJs学习笔记(11)_Absolute布局和Accordion布局

ExtJs其实在某种程度上可以代替div+css来进行页面布局(不过经测试,在最新的Firefox3下,部分功能好象有点问题),今天我们来学习二种最基本的布局 1.Absolute 布局:这种最容易理解,直接用x,y值来绝对定位组件 2.Accordion布局:Accordion意为"手风琴",即最终效果可以象手风琴那样拉来拉去,说白了,就是类似QQ面板的功能 下面通过示例代码观察一下效果: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTM

ExtJs学习笔记(3)_GridPanel[XML做数据源]

这一节,将学习到除了用JSON做GridPanel的数据源外,还可以使用XML 一.静态示例 1.xml文件内容: <?xml version="1.0" encoding="UTF-8"?><Data> <Items> <TotalResults>203</TotalResults> <TotalPages>21</TotalPages> <Item> <ASIN

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

在了解基础后,可能会用Ext+ajax开发一个简单的小项目,会一点一滴的讲解项目开发过程,希望能给大家带来收获!因为我本人也在学习这个框架,所以对文章有什么建议请提出,这样可能会让我学到更多. 看到这幅图,你可能认为是某个软件,或者是Flash.Flex.silverlight等等,但这是javascript+Css实现的.       在看这样式与效果,如果加在自己的项目里,用户视觉与操作的体验应该会很爽吧. 还有更多的特效就不一一截图了.      下面开始说一下这个组件,ExtJs是一个不

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

我在项目中已经频繁使用了jquery,这次主要是学习使用extjs,但现有的教程基本都是针对2.0的,而且后台用到的语言也很少是.net平台下的C#,所以我打算针对3.0版,后台使用C#,记录下自己的学习过程,希望能和志同道合的朋友一起探讨,共同进步. extjs的官方网站是http://www.extjs.com,目前最高版本是3.0.2,但是只有3.0.0的才没有任何下载限制,可以点击这里下载3.0版的.下载来的压缩包里边包含压缩后的extjs库,调试时用到的库,具有可读性的源代码,文档和例

ExtJs 学习笔记 Ext.Panle Ext.TabPanel Ext.Viewport第1/3页_extjs

通过此文能学习到如下内容 1.创建一个简单的面板 Ext.Panel 2.制作一个可以拖动的面板 Ext.Panel 3 .使用选项卡面板 3.使用Ext.Viewport搭一个简单布局(用一个小例子来总结本文所有内容) 面板是ExtJs控件的基础,很多控件都是在面板的基础上扩展的,或者他会与其他控件之间有关系. 面板由一个工具栏.一个底部工具栏.面板头部.面板尾部和面板主区域几个部分组成.面本类中还提供了面板展开.关闭等功能.并提供了一些可重用的工具按钮让我们灵活的控制面板.面板可以放入其他任

extjs 学习笔记(三) 最基本的grid_extjs

jquery在这方面则正好相反,它的UI都以插件形式提供,可以需要什么就引用什么,所以非常小巧灵活,但由于插件往往是由不同的人或者团队来提供,界面和接口往往就不那么一致.反正是各有千秋吧. 今天学习extjs中的grid,它可以说是功能强大,无出其右,只有你想不到的,没有它做不到的,呵呵,好像是有点夸张了.好,不说废话了,我们就从最简单的grid开始,一步步来看看extjs给我们提供的grid究竟给我们提供了哪些功能. 一个grid包括一些行和列,在extjs里边,列由Ext.grid.Colu

ExtJs学习笔记(2)_Basic GridPanel[基本网格]

1.静态示例: 静态示例其实官方下载包里,就有sample,这里只贴出代码,后面的如何跟WCF结合,做出动态版的Grid才是本文重点 <!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/1

ExtJs学习笔记(4)_EditorGridPanel(可编辑的网格控件)

这一节,我们将看到ExtJs功能强大的可编辑网格控件,几乎与VS.Net的GridView功能一样了,但是ExtJs的可是纯JS的UI 一.静态示例(改自ExtJs的官方示例) a.因为我们是采用xml做为数据源的,这里贴出xml的内容 Code <?xml version="1.0" encoding="utf-8"?> <catalog> <plant> <common>红竹</common> <