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

在了解基础后，可能会用Ext+ajax开发一个简单的小项目，会一点一滴的讲解项目开发过程，希望能给大家带来收获！因为我本人也在学习这个框架，所以对文章有什么建议请提出，这样可能会让我学到更多。

看到这幅图，你可能认为是某个软件，或者是Flash、Flex、silverlight等等，但这是javascript+Css实现的。

在看这样式与效果，如果加在自己的项目里，用户视觉与操作的体验应该会很爽吧。 还有更多的特效就不一一截图了。
      下面开始说一下这个组件，ExtJs是一个不错的Ajax框架，是用javascript写的。效果什么样上面也看到了。我们能够把ExtJs应用到任何web开发语言中。他的客户端效果是非常强大的，同时Ext也提供了与服务器交互的机制，用起来非常方便，Ext与服务器交互的文章后面会写到。
      在应用之前我们需要先获得这个框架，可以去 http://extjs.com/products/extjs/download.php 官网下载，开源的。下载完毕解压后会得到如下目录。

adapter：负责将里面提供的第三方底层库（包括Ext自带的）映射为Ext所支持的底层库。
build：压缩后Ext全部源码（分类存放）
docs：API帮助文档
examples：一些Extjs做出的效果示例
resources：Ext UI资源文件目录，css、图片都在这
source：无压缩Ext全部的源码
ext-all.js  ：压缩后Ext全部源码，关键文件啊，500多K
ext-all-debug.js：无压缩Ext全部源码（用于调试）
ext-core.js ：核心组件，包括source/core下所有类
ext-core-debug.js：无压缩核心组件

接下来将在一个纯静态的html页面中做测试，如果想应用ExtJs首先需要导入3个脚本文件一个样式表

Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/

-->    <link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css" />
    <script src="extjs/ext-base.js" type="text/javascript"></script>
    <script src="extjs/ext-all.js" type="text/javascript"></script>
    <script src="extjs/ext-lang-zh_CN.js" type="text/javascript"></script>

这里要说明一下，在Extjs文件加载完毕后，会执行Ext.onReady中指定的函数，我们可以用简单的代码做一个测试。

Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/

--><script language="javascaript">
function start(){
Ext.MessageBox.alert("ok","Extjs框架已加载！");
}
Ext.onReady(start);
</script>
<script language="javascaript">
Ext.onReady(
function{
Ext.MessageBox.alert("ok","Extjs框架已加载！");
}
);
</script>

两种写法可以实现同一个效果
      注意Ext.onReady(start)不需要加()。
      Ext.MessageBox.alert("ok","Extjs框架已加载！");用于输出一个对话框。
      Ext.MessageBox.alert('标题','弹出内容');它也可以写成Ext.Msg.alert('','');
运行效果如下

     一个alert对话框可以轻松用Extjs来实现了。prompt('','');在Extjs中同样存在相对应用法。

function Prompt(){
Ext.MessageBox.prompt(
"Input",
"input a number:",
function(button,text){
if(button=="ok")
Ext.MessageBox.alert("number","the number is "+text);
else
Ext.MessageBox.alert("sorry","the number is null.");
}
);
}
这个语法稍有麻烦, Ext.MessageBox.prompt('标题','说明:',完毕后执行的函数); 执行的函数需要有两个参数,button与text。button用来判断用户选择了取消还是确定选项。确定则为该值为'ok'。text为输入的文字。


      只列举两个小例子做说明，还有confim等用法都相似。
      还有一个比较常用，也比较容易理解的Window框。
     
      这个漂亮框框可以拖动，点X可以关闭。
      用法如下：

function Window(){
var win=new Ext.Window({title:"hello",width:300,height:200,html:'This is the body.'});
win.show();
}

这里就需要创建一个Ext.Window的对象，调用show方法进行显示。
      Ext.Window在构造函数中可以传入很多参数，这里只用到了title、width、height和body区域显示的内容。
      new Ext.Window({title:"",width:300,height:200,html:'This is the body.'});
      title:""  设置标题
      width:300 宽度
      height:200 高度
      html:'xxxx'   可以放置任何html代码

当前1/2页 12下一页阅读全文

赞 (0)

相关推荐

  • 全民学编程之 Hello World

    问题的提出 相传古时候有个退休的程序员,在家闲来无事,决定修习书法之道.第一日,备好笔墨纸砚,便挥毫写下一行大字:"Hello World". 学过编程语言的人都笑了,在程序员心目中,hello world是一切的开始,程序语言教科书的第一个演示程序.WordPress的第一篇示例文章(我的hello world).环境搭建成功后的第一个测试-- 可是,为什么呢?为什么都用"Hello World"来做程序语言的入门程序,以及其他这一切的开始呢? Hello Wor

  • Android学习笔记（一）环境安装及第一个hello world

    Android学习笔记（一）环境安装及第一个hello world

    开发环境 安装JDK和JRE 下载安装文件并安装: jdk-8u11-windows-i586.exe jre-8u11-windows-i586.exe 使用google提供的adt-bundle,直接解压到本地即可使用,使用版本如下: adt-bundle-windows-x86-20131030.zip 第一个android工程 打开eclipse如下图所示: 新建工程 新建一个工程,取名为FirstApp,使用默认设置 . File->New->Android Application

  • java 学习笔记(入门篇)_java程序helloWorld

    java 学习笔记(入门篇)_java程序helloWorld

    安装配置完Java的jdk,下面就开始写第一个java程序--hello World.用来在控制台输出"Hello World".首先,我们用最原始的方法,即用文本编辑器来写代码.在任意一个盘符下,以D盘根目录为例,在这个目录下建立一个txt文本,命名为HelloWorld,然后把后缀改为java,即HelloWorld.java. 然后打开编辑代码,如下: 复制代码 代码如下: public class HelloWorld { public static void main(Str

  • pycharm 使用心得（三）Hello world！

    pycharm 使用心得（三）Hello world！

    1,新建一个项目 File --> New Project... 2,新建一个文件右键单击刚建好的helloWord项目,选择New --> Python File 3,输入文件名输入文件名,没什么好说的 4,进入编写界面PyCharm的默认编辑界面很怪,会自动生成一行 __author__ = "作者" 的头.而比较常用的文件头,如:#coding=utf-8 等,反倒没有自动生成. 输入code: print "Hello word!" 5,设置控制

  • hello world程序集锦

    hello world作为所有编程语言的起始阶段,占据着无法改变的地位,所有中/英/法/德/美--版本的编程教材中,hello world总是作为第一个TEST记录于书本之中,所有的编程第一步就在于此了!经典之中的经典! hello world! "Hello, world"程序是指在计算机屏幕上输出Hello, world这行字符串的计算机程序,"hello, world"的中文意思是"世界,你好".这个例程在Brian Kernighan和D

  • Python 第一步 hello world

    首先下载最新版本的python.www.python.org,目前版本为3.1. 接下来是安装,在windows下python的安装与其他应用程序一样,不多复述. 在windows下,即可以使用命令行的方式,也可以使用IDLE来开发python.首先介绍命令行的方式:设置PATH,将python的安装路径添加至PATH环境变量中即可.在命令行中输入python,会显示相应的版本号,并进入至python工作环境中去.另外一种方式是IDLE,这个是python默认安装的开发环境. 接下来,就来试验一

  • 用autoit编写第一个脚本(Hello World)

    用autoit编写第一个脚本(Hello World)

    (注意:如果您已经安装了 SciTe 编辑器,它将会代替系统自带的记事本来编辑脚本.) 首先打开你要创建脚本的文件夹,点击鼠标右键然后在菜单中选择 新建 / AutoIt v3 Script . 把脚本文件命名为helloworld.au3.注意扩展名应为.au3--这说明该文件是 AutoIt v3 脚本. 我们已经创建了脚本文件了,现在要做的就是对此脚本进行编辑使其具有我们需要的功能.在helloworld.au3这个脚本文件上点击鼠标右键然后在菜单中选择Edit Script. 接着将会使

  • jquery Moblie入门—hello world的示例代码学习

    jquery Moblie入门—hello world的示例代码学习

    1.需要运行JQuery Mobile 移动应用页面,需要下载JQuery Mobile 3个相关插件文件(有多版本),jquery.mobile-1.2.0.min.css.jquery-1.8.3.min.js.jquery.mobile-1.2.0.min.js,JQuery Mobile官网地址:http://jquerymobile.com 2.将插件文件加载到页面中,注意它们的加载顺序,语句如: 复制代码 代码如下: <link href="Css/jquery.mobile-

  • 从零学Python之hello world

    简单的'Hello World!' Python命令行 假设你已经安装好了Python, 那么在Linux命令行输入: 复制代码 代码如下: $python 将直接进入python.然后在命令行提示符>>>后面输入: 复制代码 代码如下: >>>print('Hello World!') 可以看到,随后在屏幕上输出: 复制代码 代码如下: Hello World! print是一个常用函数,其功能就是输出括号中得字符串. (在Python 2.x中,print还可以是一

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

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

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

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

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

    通过此文能学习到如下内容 1.创建一个简单的面板 Ext.Panel 2.制作一个可以拖动的面板 Ext.Panel 3 .使用选项卡面板 3.使用Ext.Viewport搭一个简单布局(用一个小例子来总结本文所有内容) 面板是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 学习笔记（三） 最基本的grid

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

  • Extjs学习笔记之五 一个小细节renderTo和applyTo的区别

    Extjs学习笔记之五 一个小细节renderTo和applyTo的区别

    ExtJS中的renderTo和applyTo的差别 对applyTo和renderTo的理解和思考 个人认为这两篇文章写的不够通俗.写一个简单的例子来看看最终生成了什么代码, 复制代码 代码如下: <head> <title>RenderTo and ApplyTo</title> <link rel="Stylesheet" type="text/css" href="ext-3.1.0/resources/c

  • Extjs学习笔记之八 继承和事件基础

    这里接口的意思是Observable实际上起了一个抽象类的作用,Extjs中有大量的组件都是继承自这个类的.这个类提供了一些基本的方法比如addEvents,addlistener,fireEvent等等. 本文暂时不介绍如何使用extjs的组件响应事件,而是介绍Extjs的事件的一些实现原理.整个Extjs框架都是以一种面向对象的方式开发的,所以理解Javascript中的继承也很重要.我前面的一篇文章 补点基础:Javascript中的类和闭包 也是为这篇做准备.另外,博客园内还有一个写的很

  • Extjs学习笔记之四 工具栏和菜单

    Extjs学习笔记之四 工具栏和菜单

    ToolBar的使用很简单,关键是向ToolBar上面添加内容,默认地ToolBar添加的是Button,不过实际上可以向Toolbar添加任意的组件.下面是一个例子: 复制代码 代码如下: <script type="text/javascript"> Ext.onReady(function() { var tb = new Ext.Toolbar({ renderTo: document.body, width: 600, height: 100, items: [

  • Extjs学习笔记之三 extjs form更多的表单项

    Extjs学习笔记之三 extjs form更多的表单项

    1.日期选择框,DateField 日期选择框在日常项目中被广泛应用,一个方便的日期输入机制能够极大的提高用户体验.Extjs的DateField非常友好灵活强大.可以通过如下代码新建一个日期选择框: 复制代码 代码如下: new Ext.form.DateField({ id: 'diliveryDate', format: 'Y年m月d日', maxValue: new Date(), minValue: '1900-01-01', disabledDays: [0, 6], disable

  • Extjs学习笔记之二 初识Extjs之Form

    Extjs学习笔记之二 初识Extjs之Form

    Extjs中的表单组件是Ext.form.BasicForm,不过最简单最常用的是Ext.form.FormPanel控件,它继承自Panel,具有一定的界面显示控制能力,它其中包含着一个BasicForm对象,用来执行向服务器提交,加载等动作.Extjs也对常用的html表单项进行了封装,提供了一些额外的功能,比如数据验证.实际使用的时候只要向FormPanel中添加这些表单项即可.常见的表单项有,TextField,NumberField,Radio,CheckBox等. 下面通过一个例子来

  • Extjs学习笔记之七 布局

    Extjs Layout Browser . Extjs3.1.0 版本支持17种,下面挑一些重要的简要的说明一下,要看效果,去上面给的链接,不再贴图了.给Panel设置Layout的方法是一样的,就是设置Panel的Layout配置项.1. AbsoluteLayout 可以通过Panel内部组件的决定位置来布局.通过x,y来指定. 示例用法: 复制代码 代码如下: new Ext.Panel({ layout: 'absolute', title: 'AbsuluteLayout', ren

随机推荐