EXTJS笔记.doc

第一章，初识extjs0.extjs通常简称为ext，它是一个非常优秀的ajax框架，用javascript编写，与后台技术无关，可以用来开发具有炫丽外观的富客户端应用。extjs是一个javascript库，它以html作为控件的骨干，以css作为样式的表现，以javascript作为粘合语言，可应用于不同浏览器的ajax ui组件库，具备了swing许多特性，并可兼容jquery/prototype等其他js库。1.extjs又简称ext， 可以从/products/extjs/download/ 下载到ext的最新版本。2.常见的ext开发工具 jseclipse;aptana;spket;dreamweaver;komodo edit. 推荐使用eclipse结合spket来作为开发工具。 3.在eclipse环境中安装spket提示工具 (1).将spket中的子文件夹(plugins和features)拷贝到eclipse目录中覆盖原有的文件。 (2).打开eclipse点击window-preferences,选择左侧的spket展开， 选择javascript profiles,右侧点击new(添加一个新的项目)，这里输入extjs, 点击右侧的add library,下拉列表中选择extjs,选中extjs， 点击右侧的add file,选择下载的ext解压包中的ext.jsb2点击打开（导入了代码提示包，默认选择ext all）。 再选中extjs(上一级)点击default-ok (3).重启eclipse测试 新建一个javascript project， new一个js文件(test.js)， 在test,js上右键-open with-选中spket javascript editor(表示我们使用的是spket它的代码提示功能) 输入ext代码，如ext.第二章，使用ext文件制作基本的ext页面hello ext应用extjs需要在页面中引入extjs的样式及extjs库文件，样式文件是resources/css目录下的extall.css这个文件，而ext的js文件库主要包括两个:分别是adapter/ext目录下的ext-base.js，以及ext-all.js这两个文件。ext-base.js表示框架的基础库，ext-all.js是ext的核心库。示例：在引用了必备文件之后，就可以书写基于ext的js代码了。如下示例(ext版的hello world)：ext.onready(function() ext.messagebox.alert(hello,hello,this is exts messagebox);); 注意：这里的ext.onready表示页面的dom加载完毕之后执行里面的代码，这一点在实际开发中应用非常广泛，因为为了保证我们的ext代码能够正常的操作页面中的元素，我们必须先等待页面中的dom加载完毕之后才能操作，否则就会出现找不到对象的错误。这段代码表示，当页面加载完毕之后，执行ext.messagebox这一行的语句。这里的alert方法和javascript里面的alert方法比较：页面效果如下：可以看到在这个页面中弹出了一个对话框，并且这个对话框可以任意的拖动。这个对话框完全是通过页面的样式进行控制的，它要比默认情况下的window.alert()外观好看的多。接下来我们使用ext来显示一个窗口。示例：说明：这里，我们定义了一个ext的window，window的标题是hello,window的尺寸是300x200，里面的内容是一个一级标题标签。实现效果如下：页面弹出了一个窗体，该窗体也是可以任意拖动的。第三章，ext组件1.组件的用法 组件可以直接通过new关键字来进行创建，比如创建一个窗口：new ext.window()创建一个表格：new ext.gridpanel()除了一些普通的组件以外，一般都会在构造函数中通过传递构造参数来创建组件。组件的构造函数中一般可以包含一个对象，这个对象包含创建组件所需要的配置属性及值，组件根据构造函数中参数的属性值来初始化这些组件。示例：该示例中我们使用new ext.panel()创建了一个panel组件。运行效果：2. 组件的配置属性 json数据：属性:值在extjs中，除了一些特殊的组件或类以外，所有的组件在初始化的时候都是可以在构造函数中使用一个包括属性名称及值的对象，这个对象中的信息也就是指组件的配置信息。比如，我们要配置一个面板：这里使用new ext.panel()，里面使用json数据来进行描述，定义它的title值是”面板”，html是面板的内容，height是面板的高度。再比如，我们创建一个按钮：这里使用new ext.button()表示创建一个按钮，里面的参数是，text是添加，表示创建的按钮里面的文字是添加。pressed是true，表示它是按下状态。height 30表示按钮的高度是30像素。handler等于ext.emptyfn表示点击该按钮的时候它所触发的函数。关于extjs中各个组件的配置属性及具体含义，可以在extjs说明文档中进行详细了解。第四章，事件处理1.addlistener(eventname,callback)extjs提供了一套强大的事件处理机制，通过这些事件处理机制可以响应用户的动作，监控控件的状态变化，更新控件视图的信息，与服务器进行交互等等。首先我们来看标准html中的事件处理：在这段代码中我们定义了一个函数a()，它是弹出一个对话框，我们在html页面中对按钮添加一个事件，直接在标签里使用onclick=a()它表示当我们点击这个按钮的时候，触发页面中定义的函数a()在ext中可以这样来做：首先我们使用ext.get(“btnalert”)来获取到这个按钮对象，然后可以直接调用该对象上的addlistener()方法，来为对象添加事件。在调用addlistener()方法这段代码中，第一个参数表示事件名称，这里我们使用的是click。第二个参数表示事件处理器或者整个响应函数。这段代码中可以看到，ext做到了页面的行为和代码相互分离，在html部分它不涉及到任何javascript代码，符合w3c提倡的页面，表现，和行为相分离的思想。第五章，ext面板1.panel面板panel是extjs控件的基础，很多高级控件都是在面板的基础上来扩展的，还有其他大多数组件也都直接或者间接的有关系。应用程序的界面一般情况下是由一个一个的面板通过不同的组织方式来形成的。面板的组成面板通常由以下几部分组成：顶部工具栏，底部工具栏，面板头部，面板底部，面板主区域。在面板类中还内置了面板展开、关闭的功能，并提供了一系列可以重用的工具按钮，使得我们可以轻松实现自定义的行为。面板可以放入其他的容器中，面板本身它是一个容器，它里面又可以包含各种其他的组件。面板的类名为ext.panel例如，这段代码可以显示出页面的各个组成部分：说明：首先我们使用new ext.panel()创建了一个面板，然后来定义面板的属性，使用renderto用来定义面板显示的位置，它显示id为hello的div中。定义title来表示面板的头部，定义width表示面板的宽度，height表示面板的高度，然后html表示面板的主区域内容，使用tbar用来定义一个顶部的工具栏，使用bbar用来定义一个底部的工具栏，定义buttons来显示一组按钮。实现效果如下：一般情况下，顶部工具栏或底部工具栏只需要一个，而面板中一般也很少直接包含按钮，一般会把面板上的按钮直接放到工具栏上面，例如下面的代码：说明：我们定义了一个顶部工具栏tbar，它里面显示一个刷新按钮，实现效果如下：可以看到，在这个面板中，面板的标题是hello，上面显示一个顶部的工具栏，里面有一个刷新按钮。2. 工具栏在面板中可以有工具栏，工具栏可以位于面板的顶部或者底部，ext中工具栏是由ext.toolbar这个类来表示的。工具栏上可以存放按钮、文本、分隔符等内容。面板对象中内置了很多实用的工具栏，可以直接通过面板的tools配置选项，往面板的头部加入预定义的工具栏选项。我们在面板的顶部添加了tools，分别有三个按钮，是保存、帮助、和关闭。它所实现的效果是这样的：可以看到面板的顶部右上角有一个保存按钮，一个帮助按钮和一个关闭按钮。在代码中我们定义了帮助按钮help它的事件函数，我们使用ext.message来弹出一个对话框，那么当我们点击help按钮的时候，它就会执行handler中的函数，来显示一个弹出的对话框，而点击其他的按钮不会产生任何行为，因为我们还没有定义点击他们时所执行的函数。第六章，窗口和对话框1.窗口extjs中窗口是由ext.window来定义的，这个类继承自panel，因此窗口其实是一个特殊的面板panel。窗口包含了浮动、可拖动、可关闭、最大化、最小化等这些属性。示例：说明：在这段代码中，我们使用了new ext.window()来定义了一个窗口，这个窗口中我们指定它的title、width、height和maximizable。实现效果如下：说明：当我们点击“新窗口”的时候，会在页面中显示一个窗口，这个窗口的标题是 窗口0、1、2、3这样来排列的，窗口也可以关闭，可以最大化，点击最大化后可以还原。2. 对话框由于传统使用alert()、confirm()等这些方法，来产生的对话框非常古板。extjs提供了一套美化的对话框，可以代替传统的alert()、confirm()等，实现华丽的应用程序界面。ext的对话框都封装在ext.messagebox类，这个类还有一个简写的形式ext.msg，我们可以直接通过ext.messagebox或ext.msg，来直接调用相应的对话框方法来显示ext对话框。示例：说明：我们使用ext.get()获取了页面中的这个按钮，然后给它添加一个onclick事件，这个事件里面的代码就是弹出一个对话框，使用的是ext.messagebox.alert()实现效果如下：说明：当点击页面上的按钮，它会在页面上显示这样一个对话框。除了alert()之外，ext还包含confirm()、prompt、progress、wait等这些对话框，另外，还可以根据需要显示自定义的对话框。普通对话框一般包括四个参数，比如confirm的方法签名为confirm(string title,string msg,function fn,object scope):参数title表示对话框的标题，msg表示对话框中的提示信息，这两个参数是必须的。后两个参数是可选的，fn表示当关闭对话框时执行的回调函数，scope表示回调函数执行的作用域。回调函数可以包含两个参数，即button和text，button表示我们点击的按钮，text表示对话框中有活动输入选项时的输入文本内容。我们可以在回调函数中通过button参数来判断用户作了什么样的操作，可以通过text来读取在对话框中用户输入的内容。示例：说明：我们使用ext.messagebox.confirm()来实现一个询问的对话框，我们定义它的title是“请确认”，它的message是“是否真的要删除指定的内容”，接下来指定了一个回调函数，这个函数用来处理用户点击按钮时来执行的代码，它的两个参数分别是button和text，它所显示的最终效果是模拟弹出一个询问的对话框。因此在实际应用中，这类代码可以改成：函数体中我们对button进行判断，if(button=”yes”)表示用户点击了确定按钮，那么我们来执行删除操作，当用户选择了no则忽略该操作。第七章，ajax请求ext在浏览器中通过ajax与服务器交换数据。1.ajax请求ext.ajax是一个全局的ajax请求类，它提供了使用ajax请求的简单途径，并且具有最大的灵活性。向服务器发送异步请求是最常见的ajax操作之一，在通常情况下需要自己创建一个xmlrequest对象，并且判断响应状态和处理返回值，这些操作基本上都是模块化的，因此ext.ajax封装了这些操作，可以轻松的进行ajax开发。ext.ajax.request是客户端向服务器发送请求的重要方法，示例：说明：这里我们定义url用来指定请求的服务器端url地址。params用来指定用户传递的参数，它可以是一个包含参数名称及值的对象，也可以是url编码的字符串形式。method用来指定发送ajax请求的method，可以是get或者post方式，默认是get我们定义callback用来执行ajax请求的回调函数，callback有三个