一、提示框(Ext.MessageBox.alert  或  Ext.Msg.alert)

alert( String title, String msg, [Function fn], [Object scope] ) :

title:标题

msg:显示内容

fn:回调函数

scope:作用域

Js代码

1. <script type="text/javascript">   
2.         Ext.onReady( function(){   
3.                         Ext.MessageBox.alert('Alert','弹出窗口Alert',function(){alert('abc')});                  
4.                }   
5.        );   
6. </script>  

Js代码

1. <script type="text/javascript">  
2.         Ext.onReady( function(){  
3.                         Ext.MessageBox.alert('Alert','弹出窗口Alert',function(){alert('abc')});                 
4.                }  
5.        );  
6. </script>  

<script type="text/javascript">
Ext.onReady( function(){
Ext.MessageBox.alert('Alert','弹出窗口Alert',function(){alert('abc')});
}
);
</script>

二、对话框(Ext.MessageBox.confirm  或  Ext.Msg.confirm)

confirm( String title, String msg, [Function fn], [Object scope] )

title:标题

msg:显示内容

fn:回调函数

Js代码

1. <script type="text/javascript">   
2.     Ext.onReady( function(){   
3.             Ext.MessageBox.confirm( "请确认", "是否要删除指定内容", function(button,text){   
4.                 alert(button);   
5.             } );   
6.         }   
7.     );   
8. </script>  

Js代码

1. <script type="text/javascript">  
2.     Ext.onReady( function(){  
3.             Ext.MessageBox.confirm( "请确认", "是否要删除指定内容", function(button,text){  
4.                 alert(button);  
5.             } );  
6.         }  
7.     );  
8. </script>  

<script type="text/javascript">
Ext.onReady( function(){
Ext.MessageBox.confirm( "请确认", "是否要删除指定内容", function(button,text){
alert(button);
} );
}
);
</script>

三、对话框(Ext.MessageBox.prompt 或 Ext.Msg.prompt )

prompt( String title, String msg, [Function fn], [Object scope] )

title:标题

msg:显示内容

fn:回调函数

Js代码

1. <script type="text/javascript">   
2.     Ext.onReady( function(){   
3.             Ext.MessageBox.prompt( "输入提示框", "请输入您的年龄", function(button,text){   
4.                 alert(button);   
5.                 alert(text);   
6.             } );   
7.         }   
8.     );   
9. </script>  

Js代码

1. <script type="text/javascript">  
2.     Ext.onReady( function(){  
3.             Ext.MessageBox.prompt( "输入提示框", "请输入您的年龄", function(button,text){  
4.                 alert(button);  
5.                 alert(text);  
6.             } );  
7.         }  
8.     );  
9. </script>  

<script type="text/javascript">
Ext.onReady( function(){
Ext.MessageBox.prompt( "输入提示框", "请输入您的年龄", function(button,text){
alert(button);
alert(text);
} );
}
);
</script>

四、对话框(Ext.MessageBox.show 或 Ext.MsgBox.show)

Js代码

1. Ext.onReady( function(){   
2.     Ext.MessageBox.show( {   
3.         title:"保存数据",   
4.         msg:"你已经作了一些数据修改，是否要保存当前内容的修改？",   
5.         buttons:Ext.Msg.YESNOCANCEL,   
6.         fn:save,   
7.         icon:Ext.MessageBox.QUESTION});   
8.     }   
9. );  

Js代码

1. Ext.onReady( function(){  
2.     Ext.MessageBox.show( {  
3.         title:"保存数据",  
4.         msg:"你已经作了一些数据修改，是否要保存当前内容的修改？",  
5.         buttons:Ext.Msg.YESNOCANCEL,  
6.         fn:save,  
7.         icon:Ext.MessageBox.QUESTION});  
8.     }  
9. ); 
   

Ext.onReady( function(){
Ext.MessageBox.show( {
title:"保存数据",
msg:"你已经作了一些数据修改，是否要保存当前内容的修改？",
buttons:Ext.Msg.YESNOCANCEL,
fn:save,
icon:Ext.MessageBox.QUESTION});
}
);

1.Ext.MessageBox.alert()方法
有四个参数：alert( title , msg , function(){} ，this)
其中title，msg为必选参数，function为可选参数，在关闭弹出窗口后触发,可以传入点击的按钮的id，第四个参数scope:指回调函数作用域。

Ext.Msg.alert(”Notice”,”hello world!”);  //alert会阻塞程序的执行，而Ext版的alert是异步执行
Ext.Msg.alert(”Notice”,”<font color=red>hello world!</font>”); //支持html格式
Ext.Msg.alert(”Notice”,”<font color=red>hello world!</font>”,function callback(id){alert(’您点的是’+id);});

2.Ext.MessageBox.confirm()方法

基本上同alert()方法一模一样。 注意这点：

这个参数e是什么？它是你点击的弹出框的按钮的值，三种值：yes,no,cancel. Alert()方法也是如此，不过只有两种值：ok，cancel.

回调函数可以传入一唯一参数：单击按钮的id，点击退出按钮也会触发此事件

3.Ext.MessageBox.prompt()方法
有五个参数，比前面alert方法多一个是否多行。

{header: "Controls", 



width: 60, 



sortable: false, 



renderer: function() {



return '<div class="controlBtn">



<img src="../shared/icons/fam/cog_edit.png"



width="16" height="16" 



class="control_edit">



<img src="../shared/icons/fam/folder_go.png"



width="16" height="16"



class="control_go"></div>';



}, 



dataIndex: 'company'}

• • Then you would setup an event handler on the click event.

grid.on('click', function(e) {



var btn = e.getTarget('.controlBtn');        



if (btn) {



var t = e.getTarget();



var v = this.getView();



var rowIdx = v.findRowIndex(t);



var record = this.getStore().getAt(rowIdx);            



var control = t.className.split('_')[1];



switch (control) {



case 'edit':



console.log('edit this record - ' + record.id);



break;



case 'go':



console.log('go to this record - ' + record.id);



break;



}            



}



}, grid);

• • Add the following CSS rule in array-grid.html to give some padding and change the cursor.

<style>



.controlBtn img {



padding-left: 4px;



cursor: pointer;



}



</style>

• • Using this same method you could add as many tools as you would like in the controls section and always give them the css class "controls_{toolname}". Ideally you would break this out into an XTemplate so that you could simply pass in whatever tools you would like to use and output them on the grid as well.
  
  

• Approach 2 utilizes a plugin as discussed here  :

http://rowactions.extjs.eu/

To finally scratch that itch, and move further along the Spring & ExtJS path, I turned my demo project into a basic template. The zip archive that you can grab at the bottom is a fully-configured Spring web application, including Tiles, Spring Security, Spring MVC, custom JSON view, Transactions and a Datasource.

To get started, grab the file, extract it to some directory. Open a shell, navigate to the Template directory and run the ant command ant dist. This will compile the whole project and create a Template.war file in the dist directory. Note, I use Java 6 for all development, so if you’re not at least at Java 5, you won’t be able to use this.

Before you drop the war file into Tomcat’s webapp directory, you’ll need to setup the database. First, copy the jar files in lib/tomcat into Tomcat’s lib directory. This is the MySQL JDBC driver and the JTA files for transactions. You’ll then need to create a new database on your local MySQL instance called tomcat. For simplicity in development, create a user with all rights to the tomcat database. Here’s the code to run from a MySQL shell:

create database tomcat;
use tomcat;
grant all on tomcat.* to tomcat@localhost identified by 'apache';

Your other option is to just put in your MySQL root username and password. To do that, or change the connection string completely, edit context.xml under web/META-INF. If you don’t use MySQL, you will have to edit this file and also put the correct driver in Tomcat’s lib directory.

Once you have the database setup, drop the Template.war file into your Tomcat webapps directory and startup Tomcat. Assuming Tomcat is configured to listen on port 8080, you can open the sample by browsing to http://localhost:8080/Template

The application only has a couple pages. First, the login page:

Spring Security is configured to route unauthenticated requests through this page for login. You can take a look at the applicationContext-security.xml file in WEB-INF to see how this was done. There are two users configured for now. User scott with a password of tiger and user bob with a password of password. Yes, not very clever, but it works. Scott is in both the ROLE_ADMIN and ROLE_USER roles, while Bob is only in ROLE_USER.

If you login with scott, you’ll be taken to the index page, which looks like this:

The index page simply contains a text box with a button. Entering a message and pressing the button results in an Ajax call to the server which echos the message back to the page. An HTML element in the middle of the page is updated with the result via JavaScript.

You’ll notice in the footer of the page you can see the currently logged in user on the left, and a link to log out on the right. Clicking the log out link takes you to the logout page, which looks like this:

Again, nothing fancy. Just a message saying you have logged out and a link to login again. Use the login link to login as bob and try the echo functionality again. This time you get a different result:

This demonstrates what happens with Spring Security via annotations. Here’s the echo method in the service layer:

As you can see, the method is secured with an annotation indicating the user must be in the ROLE_ADMIN role to use the method. Bob is only in the ROLE_USER role, so the call to this service fails.

The application makes use of a ResourceBundleMessageSource for the pages mapped through the htmlDispatch servlet. The login.jsp and logout.jsp don’t go through the dispatch servlet, so they can’t use the message bundle for the window and page title.

There is way too much to this simple application to cover completely now, but I’ll give the highlights of what to go look at in the major configuration files. Paths are relative to the project root:

1. web/WEB-INF/web.xml - notice that I configure two dispatch servlets. One catching *.htm and one *.json. This sets things up to treat Ajax requests differently. Spring Security is also configured here.
2. web/WEB-INF/applicationContext.xml – typical application context for a Spring application. I turn on annotation handling with package scanning under the sample.core package. Apache Tiles is configured in this file, and I have also configured a Transaction Manager around the JDBC DataSource. You should tweak this based on your underlying persistence preferences. I’m a RowMapper fan, but you can plug in Hibernate or JPA.
3. web/WEB-INF/htmlDispatch-servlet.xml - the context for web (*.htm) requests. This sets up the ResourceBundle for messages and a typical ViewResolver mapping the *.htm requests to jsp files under web/WEB-INF/jsp. Also configures component scanning for the sample.web package.
4. web/WEB-INF/jsonDispatch-servlet.xml – the context for Ajax (*.json) requests. Configures component scanning for the sample.json package and specifies a custom Ajax ViewResolver. This will automagically serialize all ModelMaps returned out of the Controller responded to *.json requests to JSON.
5. web/WEB-INF/applicationContext-security.xml – so simple to look at, yet so painful to figure out. This is the Spring Security configuration file. Although it looks deceptively simple, it was a beating to figure it all out. It enables annotation-driven security, which you saw on the EchoService above. It also sets up the form login and locks down all the pages. Note I leave the /resource directory open. This is where I put all my javascript, stylesheets and images. If you want to secure those resources, you’ll need to get more specific on the intercept-urls.
   Users are declared at the bottom. Passwords are clear text, which is fine for a trivial demo, but you would want to replace this with something more industrial-strength in a real application.
6. web/WEB-INF/tiles-config.xml – the Apache Tiles configuration. I only setup one definition here to keep it simple.
7. web/WEB-INF/jsp/layouts/baseLayout.jsp – the base layout used for tiles. I’m only inserting content at two locations in the template. In the HTML head section, I allow for an optional insert of headerContent. I use this to include JavaScripts specific to a page. The other content is within the center div called mainContent.
   Note that the body is pretty empty and that the divs all have the x-hidden class. This means they are not normally visible. I use an ExtJS Viewport for layout, which uses the contents of these divs.
8. web/resources/javascripts/layout.js – this JavaScript file was included in the baseLayout.jsp above. It creates the Viewport using a border layout.
9. web/resources/javascripts/index.js – the JavaScript file included for the index.jsp page. It decorates the plain HTML inputs on the page to do the cool Ajax stuff. Note towards the bottom how I use ExtJS to set focus on a form field and to bind the ENTER key to the submit button.
10. web/resources/javascripts/login.js – the JavaScript file use for the login.jsp page. If you look at login.jsp, you’ll notice there is no form. Everything is created by ExtJS from the login.js file, including the cool box effect. One trick is that Spring Security wants a normal form POST for the login form. I override the form to do a standard submit instead of an Ajax submit and set the form action explicitly.

This covers the major features. I’ll be using this as a base for other projects and will be expanding out my ExtJS demo. Since there are pretty much zero examples out there of tying together this stack, I hope this can be of use to some folks.

Project Template

• 2/28/2009 – upgrade to ExtJS 2.2.1, fixed compile issue on Linux, added in iBatis for ORM
• 3/26/2009 – I’ve setup a dev server with the latest version of the template at CodeZombie.com so you can check it out without having to install. User scott/tiger for credentials. I’ll be updating this install with a more feature-rich demo application shortly
• 3/28/2009 – changed around the project structure and build.xml to use Ivy for dependency management. Check the README.txt file in the root directory for the details.
• 4/28/2009 – updated the included JSON encoder to be able to return JSON arrays by using the key _root in the model map. If this key is found, its content will be used as the root element of the return JSON instead of encoding the whole map. Also removed the unicode characters from StringScrubber to make the compiler on Linux happy.

p.s. this pulls together a lot of jars and pieces from different folks to build the demo. If you use this for more than playing around, you need to make sure you respect whatever licenses the authors have in place.

基本组件：                                                                 

box                    Ext.BoxComponent                      具有边框属性的组件

button                Ext.Button                                      按钮

colorpalette      Ext.ColorPalette                            调色板

component       Ext.Component                            组件

container          Ext.Container                                容器

cycle                 Ext.CycleButton

dataview          Ext.DataView                                数据显示视图

datepicker       Ext.DatePicker                              日期选择面板

editor                Ext.Editor                                       编辑器

editorgrid         Ext.grid.EditorGridPanel              可编辑的表格

grid                   Ext.grid.GridPanel                         表格

paging              Ext.PagingToolbar                         工具栏中的间隔

panel                Ext.Panel                                        面板

progress          Ext.ProgressBar                            进度条

splitbutton        Ext.SplitButton                               可分裂的按钮

tabpanel           Ext.TabPanel                                 选项面板

treepanel         Ext.tree.TreePanel                         树

viewport           Ext.ViewPort                                  视图

window             Ext.Window                                   窗口

工具栏组件：

toolbar              Ext.Toolbar                                    工具栏

tbbutton            Ext.Toolbar.Button                         按钮

tbfill                   Ext.Toolbar.Fill                               文件

tbitem               Ext.Toolbar.Item                            工具条项目

tbseparator      Ext.Toolbar.Separator                  工具栏分隔符

tbspacer          Ext.Toolbar.Spacer                       工具栏空白

tbsplit               Ext.Toolbar.SplitButton                 工具栏分隔按钮

tbtext                Ext.Toolbar.TextItem                     工具栏文本项

表单及字段组件：

form                  Ext.FormPanel Form                     面板

checkbox         Ext.form.Checkbox checkbox       录入框

combo             Ext.form.ComboBox combo         选择项

datefield          Ext.form.DateField                        日期选择项

field                  Ext.form.Field                                 表单字段

fieldset            Ext.form.FieldSet                           表单字段组

hidden             Ext.form.Hidden                             表单隐藏域

htmleditor        Ext.form.HtmlEditor html               编辑器

numberfield     Ext.form.NumberField                   数字编辑器

radio                Ext.form.Radio                               单选按钮

textarea           Ext.form.TextArea                          区域文本框

textfield            Ext.form.TextField                          表单文本框

timefield           Ext.form.TimeField                         时间录入项

trigger              Ext.form.TriggerField                      触发录入项

Ext.data专题二：Ext.data.Connection

Ext.data.Connection 是对Ext.lib.Ajax的封装，它提供了配置使用Ajax的通用方式，它在内部通过Ext.lib.Ajax实现与后台的异步调用。与底层的 Ext.lib.Ajax相比，Ext.data. Connection提供了更简洁的配置方式，使用起来更方便。

Ext.data.Connection 主要用于在Ext.data.HttpProxy和Ext.data.ScriptTagProxy中执行与后台交互的任务，它会从指定的URL获得数 据，并把后台返回的数据交给HttpProxy或ScriptTagProxy处理，Ext.data.Connection的使用方式如代码清单

var conn = new Ext.data.Connection({

    autoAbort: false,

    defaultHeaders: {

        referer: 'http://localhost:8080/'

    },

    disableCaching : false,

    extraParams : {

        name: 'name'

    },

    method : 'GET',

    timeout : 300,

    url : '01-01.txt'

});

在使用 Ext.data.Connection之前，都要像上面这样创建一个新的Ext.Connection实例。我们可以在构造方法里配置对应的参数，比如 autoAbort表示链接是否会自动断开、default- Headers参数表示请求的默认首部信息、disableCaching参数表示请求是否会禁用缓存、extraParams参数代表请求的额外参数、 method参数表示请求方法、timeout参数表示连接的超时时间、url参数表示请求访问的网址等。

在创建了conn之后，可以调用request()函数发送请求，处理返回的结果，如下面的代码所示

Ext.data专题三：Ext.data.Record

Ext.data专题五：常用proxy之MemoryProxy

2. 使用ExtJS时需要解决如何服务端通信的问题。由于ExtJS只是一个客户端的框架，和服务端技术没有关系，也就没有相应的服务端的适配层，因此客户端如果要用ExtJS，则必须提供它需要的数据结构。ExtJS主要通过这几种方式和服务端进行通信：

• Ext.Ajax.request 做普通的异步请求，服务端可以根据实际情况返回JSON形式数据或者HTML片段；
• Ext.tree.TreeLoader 加载树形结构，服务端必须返回JSON形式数据，而且要符合Ext.tree.TreeNode的配置要求，否则自己做转换；
• Ext.data.Store及其派生类 加载表格形式的数据，服务端可以根据实际情况返回JSON形式数据或者XML形式数据，如果没有特殊要求，推荐返回JSON格式的数据；
• Ext.Element.update 局部更新，这个方法最总还是要调用Ext.Ajax.request方法，之所以把它单独列出来，是因为这种方式比较容易被忽视，但是在某些情况下还是挺 有用的，比如调用Ext.Panel.body.update()对某个Ext.Panel的内容进行局部更新，如果使用这种方式，那么服务端只能相应的 返回HTML片段了；

3. 使用ExtJS时的注意事项。ExtJS和其它的辅助性类库(Prototype、jQuery等)相比显得非常庞大，让很多很多初学者望而却步。经过近一年的学和用，对于ExtJS的使用，我总结了一下几个注意事项：

• 尽量使用ExtJS的方言。 ExtJS提供了很多有用的方法，解决客户端JavaScript常见的开发任务，常见的有查询HTMLDom，创建HTML元素，为HTML元素注册事件响应函数等，这些大可以全部使用ExtJS提供的方法，使自己代码构建与ExtJS之上，举几个例子：
  • 查询ID为container的DIV下所有的checkbox，可以使用：Ext.fly(‘container’).select(‘input[type=checkbox]’);
  • 在ID为container的DIV内创建一个按钮，可以使用：Ext.fly(‘container’).createChild({ tag: ‘input’, type: ‘button’});
  • 为ID为container的DIV的click事件注册处理函数，使用：Ext.fly(‘container’).on(‘click’, handlerFn, scope);
• ExtJS的自定义事件很好用，可以实现一对多的通知，而且任何自定义事件都可以中途停止，只要有一个处理函数返回false。
• Store合并成一个文件 用ExtJS显示数据，自然就需要用到Ext.data.Store及其派生出来的类，可以考虑所有的Store合并到一个文件，这样对重用有很大的帮助。
• 脚本文件管理 尽可能的每个模块做成一个类，一个类一个文件，类似与Java或C# 的文件处理方法，每个文件注明其作用，依赖的文件等，如果太多的话可以考虑写一个配置文件，通过读配置文件来输出脚本到客户端。
• 调试和部署分别加载Debug和Release版本的脚本 ExtJS附带的例子中没有使用完整Debug版本的例子，所以很多人找不到完整的Debug版本的引用顺序，通过对Source文件夹下的ext.jsb文件进行分析，就可以得到正确的加载顺序，如下：
  • Debug
    1. /ext-path/source/core/ext.js
    2. /ext-path/source/adapter/ext-base.js
    3. /ext-path/ext-all-debug.js
  • Release
    1. /ext-path/adapter/ext/ext-base.js
    2. /ext-path/ext-all.js
• 对Script进行压缩 对项目中有大量的JavaScript的话，对其进行压缩是很有必要的，这里我推荐的是ExtJS的论坛提供的JS Builder，可以通过配置文件来对Script和CSS进行压缩，据说ExtJS就是用这个工具进行压缩的，不过有一个缺点，就是不支持UTF-8编码。

4. ExtJS的优点和缺点总结。经过近一年的尝试，ExtJS的优缺点总结如下：

• 优点
  • 一致的类库 这点在1.1版本时还不是很完善，但是到了2.0以后，ExtJS内部经过了翻天覆地的变化，特别是UI组件，有统一的基类，给人的感觉很像是一个运行在浏览器上的运行时框架，这一点只有在对ExtJS熟练了之后才能体会到。
  •  托管页面呈现 ExtJS在发展到2.0之后，不仅UI类库一致了，而且渲染方式也是统一的，用官方的话说，是Managed Rendering，这一点使得UI的扩展也比较一致，有利于以后的维护与发展。
  • 相对丰富的文档和示例 毫无疑问，刚刚接触到ExtJS的人多数都是被它附带的例子和开发文档吸引过去的，它的文档做的确实不错。
  • 华丽而成熟的界面 ExtJS在2.0之后的界面真的是没得说，不仅华丽，而且相对很成熟。
• 缺点
  • 没有合适的开发利器 毫无疑问，一个好的开发工具可以大大的提高编码的速度，但是对于ExtJS，始终没有一个完美的开发工具，可以推荐的有Aptana Studio， Spket IDE，和Spket 提供的提示文件，但是都是各有优缺点，都不完美，只能一边看SDK一边写代码。
  • 没有界面设计工具 虽然有人提供了一个在线的界面设计工具，但是和Visual Studio提供的ASP.Net设计工具来说，真的可以说是天壤之别。因此，只能一边预览，一边写代码。
  • 文档不全 虽然ExtJS提供的文档很丰富，但是还是跟不上源代码的更新速度，所以，经常要通过看源代码，调试才能真正解决问题。
  • 不能编译 这一点可以说是JavaScript的缺点（如果能编译，就不叫JavaScript了），在实际的开发中，经常会敲错一些代码，比如大小写错误等，不能通过编译得到反馈，只能在运行时排错，导致开发的效率比较低下。

5. 使用ExtJS做应用的一些建议。多数人认为ExtJS的脚本体积很大，不适合放到互联网上，对于这一点，有如下建议：

1. 部署到互联网上的Web应用一定要加载Release版本的ExtJS
2. 可以考虑只加载必须的组件，build目录下脚本文件都是压缩过的，如果项目中用到的ExtJS的组件不是很多，可以只加载用到的
3. 考虑使用IIS的文件压缩功能
4. 使用Google的Gears，把所有的静态文件做客户端缓存
5. 使用ADOBE的AIR，把脚本打包到客户端运行

总的来说，ExtJS是一个不错的框架，它陪伴我走过了精彩的2008，也许在未来的2009，我会转向其它的RIA技术，但是我至少会继续关注ExtJS，同时也希望这个框架能够顽强的生存下去。

PS，共享一些学习资料：

• ExtJS 2.0 简介 （推荐反复阅读，细细体会）
• ExtJS的用户扩展合集 （推荐常去看看）
• 如何用ExtJS构建大型应用 （可以说是做ExtJS开发的指导思想）
• ExtJS 2.0 类库的脑图 （可以加深对ExtJS类库的继承关系的理解）