亚洲精品一区二区三区四区高清,精品资源在线看,日本一区二区免费在线

Ext FormPanel submit 提交与Ext.Ajax.request提交的区别（转）

seal — Sun, 06 Dec 2009 12:17:00 GMT

前置�Q?/div>

后台成功�q�回字符�Ԍ��{success:true,msg:'操作成功�Q?}

后台��p�|�q�回字符�Ԍ��{success:false,errors:'操作��p�|�Q?}

当submi提交�Ӟ��action不存在后台返回下囑֭��W�串�Q?/div>

下面所有的action不存在，是指url路径不存�?/div>

FormPanel 提交代码如下�Q?/div>

var G = new Ext.form.FormPanel({})

G.getForm().submit({//客户端的数据提交�l�服务器
                    url:wayfoon.MMS.DataPage +'/ext2Upload.action',
                    //waitMsg:"正在提交表单数据�Q�请�E�候。。。。。�?,
                    failure:function(form, action){
                        Ext.MessageBox.alert('警告', action.result.errors);
                    },
                    success: function(form, action){
                        Ext.MessageBox.alert('信息', action.result.msg);
                     }
                });

�Ҏ��后台json 字符�?success的��|��ture/false�Q�自动选择failure或者success�Q�也可以捕捉前台错误�Q�走failure��程�Q�，比如数据非法而被强制提交�Ӟ��

后台字符串需要通过action.result 转成json 字符�Ԍ��供我们按习惯的方法��用，

对于后台异常处理�Q�比�?action不存在，则无能�ؓ力，会出JavaScript错误�Q?/div>

错误处，ext-all.js的代�?/div>

this.decode = function(json) {
//alert(json);
return eval("(" + json + ")")
}

原因是无法将上图�Q�如图）的字�W�串转成json字符�Ԍ��D��无法判断走哪个流�E�，而正常情况下�Q�返回的�?{success:true,msg:'操作成功�Q?}或其他�?/div>

试了��上面代码��用try{}catch (){} �q�是不能解决JavaScript错误�Q�我们一般可以避免这�U�后台错误，如果非得解决的话�Q�不知道有没有好的解��x��法�?/div>

Ext.Ajax.request提交代码如下�Q?/div>

Ext.Ajax.request({
    url:wayfoon.MMS.DataPage+'/cpSMS.action?action=submitSMS',
    method:'POST',
    params:'id='+id,
    success:function(form,action){
        var obj = Ext.util.JSON.decode(form.responseText);
        if(obj.success==true)
        {
            Ext.Msg.alert('提示',obj.msg);
            ds.reload();
        }
        else
        {
            //Ext.Msg.alert('提示',obj.errors);
            Ext.Msg.alert('提示',obj.msg);
        }

    },
    failure:function(form,action){
        Ext.Msg.alert('警告','�pȝ��错误');
    }
});

后台字符串通过Ext.util.JSON.decode 转成json字符�?/div>

不能自动�Ҏ��json字符串success的值来选择��程 �Q�需要根据obj.success的值来判断走哪个流�E?/div>

该failure:可以捕捉�pȝ��异常�Q�比如，数据未曾提交到后台或action 不存在，此时走failure ��程

seal 2009-12-06 20:17 发表评论

Ext.MessageBox(�?

seal — Fri, 04 Dec 2009 12:26:00 GMT

一、提�C�框(Ext.MessageBox.alert �?nbsp; Ext.Msg.alert)

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

title:标题

msg:昄��内容

fn:回调函数

scope:作用�?/p>

Js代码

"text/javascript">
Ext.onReady( function(){
Ext.MessageBox.alert('Alert','弹出�H�口Alert',function(){alert('abc')});
}
);

Js代码

Ext.onReady( function(){
Ext.MessageBox.alert('Alert','弹出�H�口Alert',function(){alert('abc')});
}
);

二、对话框(Ext.MessageBox.confirm �?nbsp; Ext.Msg.confirm)

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

title:标题

msg:昄��内容

fn:回调函数

Js代码

"text/javascript">
Ext.onReady( function(){
Ext.MessageBox.confirm( "��L��?, "是否要删除指定内�?, function(button,text){
alert(button);
} );
}
);

Js代码

Ext.onReady( function(){
Ext.MessageBox.confirm( "��L��?, "是否要删除指定内�?, function(button,text){
alert(button);
} );
}
);

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

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

title:标题

msg:昄��内容

fn:回调函数

Js代码

"text/javascript">
Ext.onReady( function(){
Ext.MessageBox.prompt( "输入提示�?, "误��入您的年�?, function(button,text){
alert(button);
alert(text);
} );
}
);

Js代码

Ext.onReady( function(){
Ext.MessageBox.prompt( "输入提示�?, "误��入您的年�?, function(button,text){
alert(button);
alert(text);
} );
}
);

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

Js代码

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

Js代码

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

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

1.Ext.MessageBox.alert()�Ҏ��
有四个参敎ͼ�alert( title , msg , function(){} �Q�this)
其中title�Q�msg为必选参敎ͼ�function为可选参敎ͼ�在关闭弹出窗口后触发,可以传入点击的按钮的id�Q�第四个参数scope:指回调函��C��用域�?/p>

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

2.Ext.MessageBox.confirm()�Ҏ��

基本上同alert()�Ҏ��一模一栗��?注意�q�点�Q?/p>

Ext.MessageBox.confirm(“title“,“msg“,function(e){alert(e);});

�q�个参数e是什么？它是你点�ȝ��弹出框的按钮的��|��三种��|��yes,no,cancel. Alert()�Ҏ��也是如此�Q�不�q�只有两�U��|��ok�Q�cancel.

回调函数可以传入一唯一参数�Q�单��L��钮的id�Q�点击退出按钮也会触发此事�g

3.Ext.MessageBox.prompt()�Ҏ��
有五个参敎ͼ�比前面alert�Ҏ��多一个是否多行�?/p>

Ext.MessageBox.prompt(“title“,“msg“);

Ext.Msg.prompt(’Notice’,'误��入你的姓名：’,function callback(id,msg){alert(’单击的按钮ID�Q?#8217;+id+’"n您输入的姓名是：’+msg);},this,false);
//输入”javachen”,点击ok按钮�Q�弹�?/span>单击的按钮ID�Q?span style="color: #008000;">OK 您输入的姓名是：javachen

Ext.MessageBox.prompt(“title“,“msg“,function(e,text){alert(e+“-“+text);},this,true);//true为多行，this表示作用�?/span>

4.Ext.MessageBox.show()�Ҏ��
功能很强大，采用config配置形式�Q�比前面的方法��用更方便�?参数很多�Q�在此列举最常用的配�|�参敎ͼ�

1.animEl:对话框弹出和关闭时的动画效果�Q�比如设�|��ؓ“id1”�Q�则从id1处弹出�ƈ产生动画�Q�收�~�则相反
2.buttons:弹出框按钮的讄��Q�主要有以下几种�Q�Ext.Msg.OK,
Ext.Msg.OKCANCEL,
Ext.Msg.CANCEL,
Ext.Msg.YESNO,
Ext.Msg.YESNOCANCEL
你也可以自定义按钮上面的字：{“ok“,“我本来是ok�?/span>“}�?若设为false�Q�则不显�C�Z�Q何按�?
3.closable:如果为false�Q�则不显�C�右上角的小叉叉�Q�默认�ؓtrue�?br /> 4.msg:“消息的内�?/span>“
5.title:“标题“
6.fn:关闭弹出框后执行的函�?br /> 7.icon�Q�弹出框内容前面的图标，取��gؓExt.MessageBox.INFO�Q?br /> Ext.MessageBox.ERROR,
Ext.MessageBox.WARNING,
Ext.MessageBox.QUESTION
8.width:弹出框的宽度�Q�不带单�?br /> 9.prompt�Q�设为true�Q�则弹出框带有输入框
10.multiline�Q�设为true�Q�则弹出框带有多行输入框
11.progress:设�ؓtrue�Q�显�C��度条�Q�（但是是死的）
12.progressText:昄��在进度条上的�?br /> 13.wait�Q�设为true�Q�动态显�C�progress
14.waitConfig:配置参数�Q�以控制昄��progress

例子�Q?/span>

Ext.Msg.show({
title:’Notice’,
msg:’误��入您的姓名！’,
width:300,
prompt:true,
//multiline:true,
//wait:true,
//progress:true,
//progressText:’progressing’,
closable:true,
modal:true,

buttons:Ext.Msg.OKCANCEL,
icon:Ext.Msg.INFO
});

5.Ext.MessageBox.wait()

参数 msg�Q�显�C�Z��?nbsp; title�Q�标�? config�Q�配�|�信�?/div>

例子�Q?/div>

Ext.Msg.wait(’��L��待，操作正在�q�行�?#8217;,'Notice’);

Ext.Msg.wait(’��L��待，操作正在�q�行中！’,'Notice’,
{
text:’processing’,
duration:2700,   //�q�度条在被重�|�前�q�行的时�?/span>
interval:300,        //�q�度条的旉��间隔
increment:10,      //�q�度条的分段数量
fn:function callback(){
alert(”complete”);

}

});

6.Ext.MessageBox.hide()

把显�C�着的当前message box隐藏��h��?br /> 参数: �? Returns: Ext.MessageBox

7.Ext.MessageBox.updateProgress�Q�）

Ext.MessageBox.updateProgress(value,”ProgressText”,”msg”) //(三个参数�Q�看名字��q��道意�?�Q?/span> 注意value�?-1之间的数�Q�表�C��度条的进�?

8.修改默认的按钮文�?/span>

Ext.Msg.buttonText={

yes:’ yes’,

no:’no’,

ok:’ok’,
cancel:’cancel’
};

Ext.Msg.buttonText.yes=’Yes’;

9.动态跟新提�C�框

1)跟新提示文字

var msgBox = Ext.MessageBox.show({
title:’提示’,
msg:’动态跟新的信息文字’,
modal:true,
buttons:Ext.Msg.OK
})
//Ext.TaskMgr是一个功能类�Q�用来定时执行程序，
//在这里我们��用它来定时触发提�C�Z��息的更新�?/span>
Ext.TaskMgr.start({
run:function(){
msgBox.updateText(’会动的时��_��’+new Date().format(’Y-m-d g:i:s A’));
},
interval:1000
});

2).跟新�q�度条及提示信息

var msgBox = Ext.MessageBox.show({
title:’提示’,
msg:’动态跟新的�q�度条和信息文字’,
modal:true,
width:300,
progress:true
})

var count = 0;//滚动条被��h��的次�?/span>
var percentage = 0;//�q�度癑ֈ��?/span>
var progressText = ”;//�q�度条信�?/span>

Ext.TaskMgr.start({
run:function(){
count++; //��h��10�ơ后关闭信息提示对话�?/span>
if(count > 10){
msgBox.hide();
}
//计算�q�度
percentage = count/10;
//生成�q�度条文�?/span>
progressText = ‘当前完成度：’+percentage*100 + “%”;
//更新信息提示对话�?/span>
msgBox.updateProgress(percentage,progressText,
‘当前旉��Q?#8217;+new Date().format(’Y-m-d g:i:s A’));

},
interval:1000
});

seal 2009-12-04 20:26 发表评论

Extjs 如何动态添加window的items��（转）

seal — Tue, 01 Dec 2009 07:50:00 GMT

JScript code

seal 2009-12-01 15:50 发表评论

How to add a column with tools for each record?

seal — Mon, 30 Nov 2009 06:57:00 GMT

Approach 1
- Use the array grid example in your packaged download array-grid.js
- Add an extra column to the column model definition and a custom renderer.

{header: "Controls", 



width: 60, 



sortable: false, 



renderer: function() {



return '






width="16" height="16" 



class="control_edit">






width="16" height="16"



class="control_go">
';



}, 



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.

- 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/

seal 2009-11-30 14:57 发表评论

ExtJs----布局(�?

seal — Thu, 19 Nov 2009 09:00:00 GMT

摘要: 布局概述 �?EXT中，所有的布局都是从Ext.Container开始的�Q�Ext.Container的父�c�L��Ext.BoxComponent�?Ext.BoxComponent是一个盒子组�Ӟ��可以定义宽度�Q�高度和位置�{�属性。作为子�c�，Ex... 阅读全文

seal 2009-11-19 17:00 发表评论

Springing Around with ExtJS

seal — Thu, 19 Nov 2009 07:21:00 GMT

While playing around more with ExtJS and Spring, I ran in to one of my favorite annoyances �?setting up a new project. I can create a new webapp in IDEA (or Eclipse) and add some dependencies, but it is still pretty empty. Maven can go a bit farther, but I don’t like how it handles transitive dependencies. None of these will really give me a good starting point out of the box without either copying a bunch of stuff over from other projects or writing a lot from scratch.

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:

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.
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.
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.
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.
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.
web/WEB-INF/tiles-config.xml – the Apache Tiles configuration. I only setup one definition here to keep it simple.
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.
web/resources/javascripts/layout.js – this JavaScript file was included in the baseLayout.jsp above. It creates the Viewport using a border layout.
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.
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.

seal 2009-11-19 15:21 发表评论

ExtJS中get、getDom、getCmp、getBody、getDoc的��用（转）

seal — Wed, 18 Nov 2009 14:13:00 GMT

Ext中包含了几个以get开头的�Ҏ��Q�这些方法可以用来得到文档中DOM、得到当前文档中的组件、得到Ext元素�{�，在��用中要注意区别��用�?br />
1、get�Ҏ��
get�Ҏ��用来得到一个Ext元素�Q�也��是�c�d��为Ext.Element的对象， Ext.Element�c�L��Ext对DOM的封装，代表DOM的元素，可以为每一个DOM创徏一个对应的Element对象�Q�可以通过Element对象上的�Ҏ��来实现对DOM指定的操作，比如用hide�Ҏ��可以隐藏元素、initDD�Ҏ��可以让指定的DOM��h��拖放�Ҏ��等。get�Ҏ��其实�? Ext.Element.get的简写�Ş式�?br /> get�Ҏ��中只有一个参敎ͼ��q�个参数是�؜合参敎ͼ�可以是DOM节点的id、也可以是一个Element、或者是一个DOM节点对象�{��?br /> 代码�Q?br />

aaa

Ext.onReady(function(){
       var e=new Ext.Element("EXTJS");
       alert(Ext.get("EXTJS"));
       alert(Ext.get(document.getElementById("EXTJS")));
       alert(Ext.get(e));
}); 三个�Ҏ��都可以得��C��个与DOM节点 EXTJS对应的Ext元素�?br />
2、getCmp�Ҏ��Q�获得Ext�l��g�?/font>
getCmp�Ҏ��用来获得一个Ext�l��g�Q�也��是一个已�l�在��面中初始化了的Component或其子类的对象，getCmp�Ҏ��其实是Ext.ComponentMgr.get�Ҏ��的简写�Ş式。getCmp�Ҏ��中只有一个参敎ͼ�也就是组件的id�?br /> 代码�Q?br />

aaa

Ext.onReady(function(){
       var h=new Ext.Panel({
            id:"h2",
            title:"",
            renderTo:"EXTJS",
            width:300,
            height:200
       });
       Ext.getCmp("h2").setTitle("新的标题");

});在代码中�Q�我们��用Ext.getCmp("h2").来得到id为h2的组�Ӟ��q�调用其setTitle�Ҏ��来设�|�该面板的标题�?br />
3、getDom�Ҏ��Q�获得DOM节点
getDom�Ҏ��能够得到文��中的DOM节点�Q�该�Ҏ��中包含一个参敎ͼ�该参数可以是DOM节点的id、DOM节点对象或DOM节点对应的Ext元素(Element)�{��?br /> 代码�Q?br />

tttt

Ext.onReady(function(){
       var e=new Ext.Element("EXTJS");
       Ext.getDom("EXTJS");
       Ext.getDom(e);
       Ext.getDom(e.dom);
});三个语句�q�回都是同一个DOM节点对象�?br />
4、getBody�Ҏ��Q�得到文档的body节点元素(Element)�?/font>
该方法直接得到文档中与document.body�q�个DOM节点对应的ExtJS元素�Q�Element�Q�，实质��是把document.body对象��装成ExtJS元素对象�q�回�Q�该�Ҏ��不带��M��参数。比如下面的代码把面板h直接渲染到文��的body元素中�?br /> Ext.onReady(function(){
       var h=new Ext.Panel({title:"��试",width:300,height:200});
       h.render(Ext.getBody());
});

5、getDoc�Ҏ��Q�获得与document对应的Ext元素(Element)
getDoc�Ҏ��实质上就是得到当前html文��对象�Q�也��是把document对象��装成ExtJS的Element对象�q�回�Q�该�Ҏ��不带��M��参数�Q�即�Q?br /> getDoc = function(){
    return Ext.get(document);
}

seal 2009-11-18 22:13 发表评论

Ext中初始化配置��iconCls的��用方�?�?

seal — Wed, 18 Nov 2009 14:02:00 GMT

使用�q�Ext�Q?a >http://www.extjs.com�Q? 的同志都应该知道�Q�每一个组�Ӟ��Component�Q�在初始化的时候，都会有一个配�|�参敎ͼ�Config�Q�{在Ext2中，基本上所有的�l��g的构造函数只接受一个参敎ͼ��q�个参数或者是一个Config Object或都是一个Array of Config Object}�Q�其中，许多�l��g�Q�如Menu�Q�Button都有一个配�|�选项iconCls�Q�很明显�Q�这个是用来配置按钮�{�的图标的，所以假设我们要初始化一个Button�Q�我们在JS里这样写�Q?br /> var button = new Ext.Button({
text: "Hello",
iconCls: "hello-button"
});

然后我们再在CSS中写下如下规则：
.hello-button {
background: url(images/hello.png) left top no-repeat;
}

把JS和CSS文�g都正��的引入到页面当中后�Q�我们只能看到按钮上�I�出来了一个放�|�图片的位置�Q�而图片�ƈ没有昄��出来�Q�通过使用Firebug�Q?a >http://www.getfirebug.com�Q? 来查看页面，通过Inspect我们生成的按钮的Style�Q�我们发现CSS规则hello-button被Ext原有的CSS规则覆盖掉了。但是官方给的Sample里是可以用的啊，查看Sample里的CSS�Q�我发现它比我写的多了一行字�Q?important�Q�然后，我把我原有的CSS规则修正为：
.hello-button {
background: url(images/hello.png) left top no-repeat !important;
}

Bingo~�q�次囄��正确的显�C�在了按钮上�?

当然�Q�按照官方的API�Q�你�q�有另外一�U�在按钮上添加图标的�Ҏ��Q�将button的Config如下讄��Q?br /> var button = new Ext.Button({
        text: "Hello",
        icon: "images/public.gif",
        cls: "x-btn-text-icon"
});

�q�样做的坏处在于�Q�你必须��图片的位置写入到JS里，没有��表现的部分从JS里脱��，如果使用�W�一�U�方法的话，可以更容易的更改某个按钮的图标�?/p>

seal 2009-11-18 22:02 发表评论

ExtJS的xtype列表

seal — Wed, 18 Nov 2009 13:47:00 GMT

xtype Class

基本�l��g�Q?/strong>

box                    Ext.BoxComponent                      ��h��Ҏ��属性的�l��g

button                Ext.Button                                      按钮

colorpalette      Ext.ColorPalette                            调色�?/p>
component       Ext.Component                            �l��g

container          Ext.Container                                容器

cycle                 Ext.CycleButton

dataview          Ext.DataView                                数据昄��视图

datepicker       Ext.DatePicker                              日期选择面板

editor                Ext.Editor                                       �~�辑�?/p>
editorgrid         Ext.grid.EditorGridPanel              可编辑的表格

grid                   Ext.grid.GridPanel                         表格

paging              Ext.PagingToolbar                         工具栏中的间�?/p>
panel                Ext.Panel                                        面板

progress          Ext.ProgressBar                            �q�度�?/p>
splitbutton        Ext.SplitButton                               可分裂的按钮

tabpanel           Ext.TabPanel                                 选项面板

treepanel         Ext.tree.TreePanel                         �?/p>
viewport           Ext.ViewPort                                  视图

window             Ext.Window                                   �H�口

工具栏组�Ӟ��

toolbar              Ext.Toolbar                                    工具�?/p>
tbbutton            Ext.Toolbar.Button                         按钮

tbfill                   Ext.Toolbar.Fill                               文�g

tbitem               Ext.Toolbar.Item                            工具条项�?/p>
tbseparator      Ext.Toolbar.Separator                  工具栏分隔符

tbspacer          Ext.Toolbar.Spacer                       工具栏空�?/p>
tbsplit               Ext.Toolbar.SplitButton                 工具栏分隔按�?/p>
tbtext                Ext.Toolbar.TextItem                     工具栏文本项

表单及字�D늻��Ӟ��

form                  Ext.FormPanel Form                     面板

checkbox         Ext.form.Checkbox checkbox       录入�?/p>
combo             Ext.form.ComboBox combo         选择��?/p>
datefield          Ext.form.DateField                        日期选择��?/p>
field                  Ext.form.Field                                 表单字段

fieldset            Ext.form.FieldSet                           表单字段�l?/p>
hidden             Ext.form.Hidden                             表单隐藏�?/p>
htmleditor        Ext.form.HtmlEditor html               �~�辑�?/p>
numberfield     Ext.form.NumberField                   数字�~�辑�?/p>
radio                Ext.form.Radio                               单选按�?/p>
textarea           Ext.form.TextArea                          区域文本�?/p>
textfield            Ext.form.TextField                          表单文本�?/p>
timefield           Ext.form.TimeField                         旉��录入��?/p>
trigger              Ext.form.TriggerField                      触发录入��?/p>

seal 2009-11-18 21:47 发表评论

seal — Tue, 17 Nov 2009 06:57:00 GMT

Ext.data专题一�Q�Ext.data��?/a>

Ext.data在命名空间中定义了一�p�d��store、reader和proxy�?/span>

Grid和ComboxBox都是以Ext.data为媒介获取数据的�Q�它包含异步加蝲、类型�{换、分��늭�功能�?/span>

Ext.data默认支持Array、JSON、XML�{�数据格式，可以通过 Memory、HTTP、ScriptTag�{�方式获得这些格式的数据。如果要实现新的协议和新的数据结构，只需要扩展reader和proxy卛_��? DWRProxy��实��C��自��n的proxy和reader�Q�让EXT可以直接从DWR获得数据

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

Ext.data.Connection 是对Ext.lib.Ajax的封装，它提供了配置使用Ajax的通用方式�Q�它在内部通过Ext.lib.Ajax实现与后台的异步调用。与底层�? Ext.lib.Ajax相比�Q�Ext.data. Connection提供了更��z�的配置方式�Q��用�v来更方便�?/span>

Ext.data.Connection 主要用于在Ext.data.HttpProxy和Ext.data.ScriptTagProxy中执行与后台交互的�Q务，它会从指定的URL获得�? 据，�q�把后台�q�回的数据交�l�HttpProxy或ScriptTagProxy处理�Q�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之前�Q�都要像上面�q�样创徏一个新的Ext.Connection实例。我们可以在构造方法里配置对应的参敎ͼ�比如 autoAbort表示链接是否会自动断开、default- Headers参数表示��h��的默认首部信息、disableCaching参数表示��h��是否会禁用缓存、extraParams参数代表��h��的额外参数�? method参数表示��h��Ҏ��、timeout参数表示�q�接的超时时间、url参数表示��h��讉K��的网址�{��?/span>

在创��Z��conn之后�Q�可以调用request()函数发送请求，处理�q�回的结果，如下面的代码所�C?/span>

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

Ext.data.Record��是一个设定了内部数据�c�d��的对象，它是Ext.data.Store的最基本�l�成部分。如果把Ext.data.Store看作是一张二�l�表�Q�那么它的每一行就对应一个Ext.data. Record实例�?/span>

Ext.data.Record的主要功能是保存数据�Q��ƈ且在内部数据发生改变时记录修改的状态，它还可以保留修改之前的原始倹{�?/span>

我们使用Ext.data.Record旉��常都是由create()函数开始，首先用create()函数创徏一个自定义的Record�c�d��Q�如下面的代码所�C��?/span>

var PersonRecord = Ext.data.Record.create([

    {name: 'name', type: 'string'},

    {name: 'sex', type: 'int'}

]);

PersonRecord��是我们定义的新�c�d��Q�包含字�W�串�c�d��的name和整数类型的sex两个属性，然后我们使用new关键字创建PersonRecord的实例，如下面的代码所�C��?/span>

var boy = new PersonRecord({

    name: 'boy',

    sex: 0

});

创徏对象�Ӟ��可以直接通过构造方法�ؓ对象赋予初始��|��?boy'赋值给name�Q?赋值给sex�?/span>

现在�Q�我们得��C��PersonRecord的实例boy�Q�如何才能得到它的属性呢�Q�以下三�U�方式都可以获得boy中name属性的数据�Q�如下面的代码所�C��?/span>

alert(boy.data.name);

alert(boy.data['name']);

alert(boy.get('name'));

�q�里涉及 Ext.data.Record的data属性，�q�是定义在Ext.data.Record中的一个公共属性，用于保存当前record对象的所有数据�? 它是一个JSON对象�Q�可以直接从它里面获得需要的数据。可以通过Ext.data.Record的get()函数方便��C��data属性中获得指定的属�? 倹{�?/span>

如果我们需要修改boy中的数据�Q�请不要使用以下方式直接操作data�Q�如下面的代码所�C��?/span>

    boy.data.name = 'boy name';

    boy.data['name'] = 'boy name';

而应该��用set()函数�Q�如下面的代码所�C��?/span>

    boy.set('name', 'body name');

set()函数会判断属性值是否发生了改变�Q�如果改变了�Q�就要将当前对象的dirty属性设�|��ؓtrue�Q��ƈ��修改之前的原始值放入modified对象中，供其他函��C��用。如果直接操作data中的��|��record��无法记录属性数据的修改情况�?/span>

Record的属性数据被修改后，我们可以执行如下几种操作�?/span>

q   commit()�Q�提交）�Q�这个函数的效果是设�|�dirty为false�Q��ƈ删除modified中保存的原始数据�?/span>

q   reject()�Q�撤销�Q�：�q�个函数的效果是��data中已�l�修改了的属性值都恢复成modified中保存的原始数据�Q�然后设�|�dirty为false�Q��ƈ删除保存原始数据的modified对象�?/span>

q   getChanges()获得修改的部分：�q�个函数会把data中经�q�修改的属性和数据攑֜�一个JSON对象里�ƈ�q�回。例如上例中�Q�getChanges()�q�回的结果是{name:’body name’}�?/span>

q   我们�q�可以调用isModified()判断当前record中的数据是否被修攏V�?/span>

      Ext.data.Record�q�提供了用于复制record实例的函数copy()�?/span>

var copyBoy = boy.copy();

�q�样我们��得��C��boy的一个副本，它里面包含了boy的data数据�Q�但copy()函数不会复制dirty和modified�{�额外的属性倹{�?/span>

Ext.data专题四：Ext.data.Store

Ext.data.Store是EXT中用来进行数据交换和数据交互的标准中间�g�Q�无论是Grid�q�是ComboBox�Q�都是通过它实现数据读取、类型�{换、排序分��和搜烦�{�操作的�?/span>

Ext.data.Store中有一个Ext.data.Record数组�Q�所有数据都存放在这些Ext.data. Record实例中，为后面的��d��和修�Ҏ��作做准备�?/span>

一、Ext.data.Store基本应用

在��用之前，首先要创��Z��个Ext.data.Store的实例，如下面的代码所�C��?/span>

var data = [

    ['boy', 0],

    ['girl', 1]

];

var store = new Ext.data.Store({

    proxy: new Ext.data.MemoryProxy(data),

    reader: new Ext.data.ArrayReader({}, PersonRecord)

});

store.load();

每个store最��需要两个组件的支持�Q�分别是proxy和reader�Q�proxy用于从某个途径��d��原始数据�Q�reader用于��原始数据�{换成Record实例�?/span>

�q�里我们使用的是 Ext.data.MemoryProxy和Ext.data.ArrayReader�Q�将data数组中的数据转换成对应的几个 PersonRecord实例�Q�然后放入store中。store创徏完毕之后�Q�执行store.load()实现�q�个转换�q�程�?/span>

�l�过转换之后�Q�store里的数据��可以提供给Grid或ComboBox使用了，�q�就是Ext.data. Store的最基本用法�?/span>

二、Ext.data.Store�Ҏ��据进行排�?/span>

Ext.data.Store提供了一�p�d��属性和函数�Q�利用它们对数据�q�行排序操作�?/span>

可以在创建Ext.data.Store时��用sortInfo参数指定排序的字�D�和排序方式�Q�如下面的代码所�C��?/span>

var store = new Ext.data.Store({

    proxy: new Ext.data.MemoryProxy(data),

    reader: new Ext.data.ArrayReader({}, PersonRecord),

    sortInfo: {field: 'name', direction: 'DESC'}

});

�q�样�Q�在store加蝲数据之后�Q�就会自动根据name字段�q�行降序排列。对store使用store.setDefaultSort('name','DESC');也会辑ֈ�同样效果�?/span>

也可以在��M��时候调用sort()函数�Q�比如store.sort('name', 'DESC');�Q�对store中的数据�q�行排序�?/span>

如果我们希望获得store的排序信息，可以调用getSortState()函数�Q�返回的是类似{field: "name", direction: " DESC"}的JSON对象�?/span>

与排序相关的参数�q�有 remoteSort�Q�这个参数是用来实现后台排序功能的。当讄��为remoteSort:true�Ӟ��store会在向后台请求数据时自动加入sort 和dir两个参数�Q�分别对应排序的字段和排序的方式�Q�由后台获取�q�处理这两个参数�Q�在后台�Ҏ��需数据�q�行排序操作。remoteSort:true也会�? 致每�ơ执行sort()旉��要去后台重新加蝲数据�Q�而不能只�Ҏ��地数据进行排序�?/span>

三、Ext.data.Store加蝲及显�C�数�?/span>

store创徏好后�Q�需要调用load()函数加蝲数据�Q�加载成功后才能对store中的数据�q�行操作。load()调用的完整过�E�如下面的代码所�C��?/span>

store.load({

    params: {start:0,limit:20},

    callback: function(records, options, success){

        Ext.Msg.alert('info', '加蝲完毕');

    },

    scope: store,

    add: true

});

params是在store加蝲时发送的附加参数�?/span>

callback是加载完毕时执行的回调函敎ͼ�它包�?个参敎ͼ�records参数表示获得的数据，options表示执行load()时传递的参数�Q�success表示是否加蝲成功�?/span>

Scope用来指定回调函数执行时的作用域�?/span>

Add为true�Ӟ��load()得到的数据会��d��在原来的store数据的末��，否则会先清除之前的数据，再将得到的数据添加到store中�?/span>

一般来��_��Z��对store中的数据�q�行初始化，load()函数只需要执行一�ơ。如果用params参数指定了需要��用的参数�Q�以后再�ơ执行reload()重新加蝲数据�Ӟ��store会自动��用上�ơload()中包含的params参数内容�?/span>

如果有一些需要固定传递的参数�Q�也可以使用baseParams参数执行�Q�它是一个JSON对象�Q�里面的数据会作为参数发送给后台处理�Q�如下面的代码所�C��?/span>

store.baseParams.start = 0;

store.baseParams.limit = 20;

为store加蝲数据之后�Q�有时不需要把所有数据都昄��出来�Q�这时可以��用函数filter和filterBy对store中的数据�q�行�q��o�Q�只昄��W�合条�g的部分，如下面的代码所�C��?/span>

filter( String field, String/RegExp value, [Boolean anyMatch],
[Boolean caseSensitive] ) : void

filter()函数的用法与之前谈到的find()�怼��Q�如下面的代码所�C��?/span>

store.filter('name', 'boy');

对应的filterBy()与findBy()�c�M��Q�也可以在自定义的函��C��实现各种复杂判断�Q�如下面的代码所�C��?/span>

store.filterBy(function(record) {

    return record.get('name') == 'girl' && record.get('sex') == 1;

});

如果惛_��消过滤�ƈ昄��所有数据，那么可以调用clearFilter()函数�Q�如下面的代码所�C��?/span>

store.clearFilter();

如果想知道store上是否设�|�了�q��o器，可以通过isFiltered()函数�q�行判断�?/span>

四、Ext.data.Store其他功能

除了上面提到的数据获取、排序、更新、显�C�等功能外，store�q�提供了其他一些功能函数�?/span>

collect( String dataIndex, [Boolean allowNull], [Boolean bypassFilter] ) : Array

collect函数获得指定的dataIndex对应的那一列的数据�Q�当allowNull参数为true�Ӟ��q�回的结果中可能会包含null、undefined或空字符�Ԍ�� 否则collect函数会自动将�q�些�I�数据过滤掉。当bypassFilter参数为true�Ӟ��collect的结果不会受查询条�g的媄响，无论查询�? 件是什么都会忽略掉�Q�返回的信息是所有的数据�Q�如下面的代码所�C��?/span>

alert(store.collect('name'));

�q�样会获得所有name列的��|��C�Z��中返回的是包含了'boy'�?girl'的数�l��?/span>

getTotalCount()用于在翻��|��获得后台传递过来的数据��L��。如果没有设�|�翻��，get- TotalCount()的结果与getCount()相同�Q�都是返回当前的数据��L��Q�如下面的代码所�C��?/span>

alert(store.getTotalCount());

indexOf(Ext.data.Record record)和indexOfId(String id)函数�Ҏ��record或record的id获得record对应的行��P��如下面的代码所�C��?/span>

alert(store.indexOf(store.getAt(1)));

alert(store.indexOfId(1001));

loadData(object data, [Boolean append])从本地JavaScript变量中读取数据，append为true�Ӟ��读取的数据附加到原数据后，否则执行整体更新�Q�如下面的代码所�C��?/span>

store.loadData(data, true);

Sum(String property, Number start, Number end):Number用于计算某一个列从start到end的��d��Q�如下面的代码所�C��?/span>

alert(store.sum('sex'));

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

MemoryProxy只能从JavaScript对象获得数据�Q�可以直接把数组�Q�或JSON和XML格式的数据交�l�它处理�Q�如下面的代码所�C��?/span>

var proxy = new Ext.data.MemoryProxy([
    ['id1','name1','descn1'],
    ['id2','name2','descn2']
]);

HttpProxy使用HTTP协议�Q�通过Ajax��d��台取数据�Q�构造它旉��要设�|?/span>url:'xxx.jsp'参数。这里的url可以替换成�Q何一个合法的�|�址�Q�这样HttpProxy才知道去哪里获取数据�Q�如下面的代码所�C��?/span>

var proxy = new Ext.data.HttpProxy({url:'xxx.jsp'});

后台需要返回EXT所需要的JSON格式的数据，下面的内容就是后��C��用JSP的一个范例，如下面的代码所�C��?/span>

response.setContentType("application/x-json");

Writer out = response.getWriter();

out.print("[" +

        "['id1','name1','descn1']" +

        "['id2','name2','descn2']" +

    "]");

��h��意，�q�里的HttpProxy不支持跨域，它只能从同一域中获得数据。如果想跨域�Q�请参考下面的ScriptTagProxy�?/span>

常用proxy之ScriptTagProxy

ScriptTagProxy的用法几乎和HttpProxy一��P��如下面的代码所�C��?/span>

var proxy = new Ext.data.ScriptTagProxy({url:'xxx.jsp'});

从这里也看不出来它是如何支持跨域的，我们�q�需要在后台�q�行相应的处理，如下面的代码所�C��?/span>

String cb = request.getParameter("callback");

response.setContentType("text/javascript");

Writer out = response.getWriter();

out.write(cb + "(");

out.print("[" +

        "['id1','name1','descn1']" +

        "['id2','name2','descn2']" +

    "]");

out.write(");");

其中的关键就在于从请求中�? 得的callback参数�Q�这个参数叫做回调函数。ScriptTag- Proxy会在当前的HTML��面里添加一�?lt;script type="text/javascript"src="xxx.jsp"> 标签�Q�然后把后台�q�回的内�Ҏ��加到�q�个标签中，�q�样��可以解册��域访问数据的问题。�ؓ了让后台�q�回的内容可以在动态生成的标签中运行，EXT会生成一个名为callback的回调函敎ͼ��q�把回调函数的名�U�C��递给后台�Q�由后台生成callback(data)形式的响应内容，然后�q�回�l�前台自动运行�?/span>

虽然上述处理�q�程比较隄��解，但是我们只需要了解ScriptTagProxy的用法就��_��了。如果还惌��一步了解ScriptTagProxy的运行过�E�，可以使用Firebug查看动态生成的HTML以及响应的JSON内容�?/span>

最后我们来分析一下EXT的API文��中提供的�C�Z��Q�这�D�后��C��码会自动判断��h��的类型，�q�回支持ScriptTagProxy或HttpProxy的数据，如代码清�?0-2所�C��?/span>

代码清单　在后台同时支持HttpProxy和ScriptTagProxy

boolean scriptTag = false;

String cb = request.getParameter("callback");

if (cb != null) {

    scriptTag = true;

    response.setContentType("text/javascript");

} else {

    response.setContentType("application/x-json");

}

Writer out = response.getWriter();

if (scriptTag) {

    out.write(cb + "(");

}

out.print(dataBlock.toJsonString());

if (scriptTag) {

    out.write(");");

}

代码中通过判断��h��中是否包含callback参数来决定返回何�U�数据类型。如果包含，��p��回ScriptTagProxy需要的数据�Q�否则，��当作HttpProxy处理�?/span>

seal 2009-11-17 14:57 发表评论

seal — Sun, 15 Nov 2009 06:22:00 GMT

1. ExtJS的定位是RIA�Q�和Prototype、jQuery�{�类库的定位不同。��用ExtJS做开发，��是意味着以客��L��开发�ؓ主，不然��׃��叫RIA框架了，而Prototype、jQuery�{�只是辅助性的客户端框�Ӟ��和ExtJS不在同一条�v跑先上。如果一定要和其它的框架做比较的话，应该�?a target="_blank">Isomorphic SmartClient�?a target="_blank">Backbase Enterprise Ajax之类的框架做比较�Q�当�Ӟ��和他们相比，ExtJS�q�是有很大的优势的�?/p>
2. 使用ExtJS旉��要解军_��何服务端通信的问�?/strong>。由于ExtJS只是一个客��L��的框�Ӟ��和服务端技术没有关�p�，也就没有相应的服务端的适配层，因此客户端如果要用ExtJS�Q�则必须提供它需要的数据�l�构。ExtJS主要通过�q�几�U�方式和服务端进行通信�Q?

Ext.Ajax.request 做普通的异步��h��Q�服务端可以�Ҏ��实际情况�q�回JSON形式数据或者HTML片段�Q?

Ext.tree.TreeLoader 加蝲树�Ş�l�构�Q�服务端必须�q�回JSON形式数据�Q�而且要符合Ext.tree.TreeNode的配�|�要求，否则自己做�{换；

Ext.data.Store及其�z��c?/strong> 加蝲表格形式的数据，服务端可以根据实际情况返回JSON形式数据或者XML形式数据�Q�如果没有特�D�要求，推荐�q�回JSON格式的数据；

Ext.Element.update 局部更斎ͼ��q�个�Ҏ��最总还是要调用Ext.Ajax.request�Ҏ��Q�之所以把它单独列出来�Q�是因�ؓ�q�种方式比较�Ҏ��被忽视，但是在某些情况下�q�是�? 有用的，比如调用Ext.Panel.body.update()�Ҏ��个Ext.Panel的内容进行局部更斎ͼ�如果使用�q�种方式�Q�那么服务端只能相应�? �q�回HTML片段了；

3. 使用ExtJS时的注意事项。ExtJS和其它的辅助性类�?Prototype、jQuery�{?相比昑־�非常庞大�Q�让很多很多初学者望而却步。经�q�近一�q�的学和用，对于ExtJS的��用，我�ȝ��了一下几个注意事��：

��量使用ExtJS的方�a��?ExtJS提供了很多有用的�Ҏ��Q�解军_��L��JavaScript常见的开发�Q务，常见的有查询HTMLDom�Q�创建HTML元素�Q��ؓHTML元素注册事�g响应函数�{�，�q�些大可以全部��用ExtJS提供的方法，使自�׃��码构��Z��ExtJS之上�Q��D几个例子�Q?

查询ID为container的DIV下所有的checkbox�Q�可以��用：Ext.fly(‘container’).select(‘input[type=checkbox]’);

在ID为container的DIV内创��Z��个按钮，可以使用�Q?span style="color: #ff8000; font-family: Courier New;">Ext.fly(‘container’).createChild({ tag: ‘input’, type: ‘button’});

为ID为container的DIV的click事�g注册处理函数�Q��用：Ext.fly(‘container’).on(‘click’, handlerFn, scope);

ExtJS的自定义事�g很好�?/strong>�Q�可以实��C��对多的通知�Q�而且��M��自定义事仉��可以中途停止，只要有一个处理函数返回false�?

Store合�ƈ成一个文�?/strong> 用ExtJS昄��数据�Q�自然就需要用到Ext.data.Store及其�z��出来的类�Q�可以考虑所有的Store合�ƈ��C��个文�Ӟ��q�样寚w��用有很大的帮助�?

脚本文�g��理 ��可能的每个模块做成一个类�Q�一个类一个文�Ӟ��c�M��与Java或C# 的文件处理方法，每个文�g注明其作用，依赖的文件等�Q�如果太多的话可以考虑写一个配�|�文�Ӟ��通过读配�|�文件来输出脚本到客��L��?

调试和部�|�分别加载Debug和Release版本的脚�?/strong> ExtJS附带的例子中没有使用完整Debug版本的例子，所以很多�h找不到完整的Debug版本的引用顺序，通过对Source文�g夹下的ext.jsb文�g�q�行分析�Q�就可以得到正确的加载顺序，如下�Q?

Debug

/ext-path/source/core/ext.js

/ext-path/source/adapter/ext-base.js

/ext-path/ext-all-debug.js

Release

/ext-path/adapter/ext/ext-base.js

/ext-path/ext-all.js

对Script�q�行压羃 寚w��目中有大量的JavaScript的话�Q�对其进行压�~�是很有必要的，�q�里我推荐的是ExtJS的论坛提供的JS Builder�Q�可以通过配置文�g来对Script和CSS�q�行压羃�Q�据说ExtJS��是用这个工兯��行压�~�的�Q�不�q�有一个缺点，��是不支持UTF-8�~�码�?

4. ExtJS的优点和�~�点�ȝ��。经�q�近一�q�的��试�Q�ExtJS的优�~�点�ȝ��如下�Q?

优点

一致的�c�d�� �q�点�?.1版本时还不是很完善，但是��C��2.0以后�Q�ExtJS内部�l�过了翻天覆地的变化�Q�特别是UI�l��g�Q�有�l�一的基�c�，�l��h的感觉很像是一个运行在��览器上的运行时框架�Q�这一点只有在对ExtJS熟练了之后才能体会到�?

托管��面呈现 ExtJS在发展到2.0之后�Q�不仅UI�c�d��一致了�Q�而且渲染方式也是�l�一的，用官方的话说�Q�是Managed Rendering�Q�这一点��得UI的扩展也比较一��_��有利于以后的�l�护与发展�?

相对丰富的文��和�C�Z�� 毫无疑问�Q�刚刚接触到ExtJS的�h多数都是被它附带的例子和开发文��吸引过�ȝ��Q�它的文��做的确实不错�?

华丽而成熟的界面 ExtJS�?.0之后的界面真的是没得��_��不仅华丽�Q�而且相对很成熟�?

�~�点

没有合适的开发利�?/strong> 毫无疑问�Q�一个好的开发工具可以大大的提高�~�码的速度�Q�但是对于ExtJS�Q�始�l�没有一个完��的开发工��P��可以推荐的有Aptana Studio�Q?Spket IDE�Q�和Spket 提供的提�C�文�?/a>�Q�但是都是各有优�~�点�Q�都不完��，只能一边看SDK一边写代码�?

没有界面设计工具 虽然有�h提供了一�?a target="_blank">在线的界面设计工�?/a>�Q�但是和Visual Studio提供的ASP.Net设计工具来说�Q�真的可以说是天壤之别。因此，只能一辚w��览，一边写代码�?

文档不全 虽然ExtJS提供的文档很丰富�Q�但是还是跟不上源代码的更新速度�Q�所以，�l�常要通过看源代码�Q�调试才能真正解决问题�?

不能�~�译 �q�一点可以说是JavaScript的缺点（如果能编译，��׃��叫JavaScript了）�Q�在实际的开发中�Q�经�怼�敲错一些代码，比如大小写错误等�Q�不能通过�~�译得到反馈�Q�只能在�q�行时排错，��D��开发的效率比较低下�?

5. 使用ExtJS做应用的一些徏�?/strong>。多��C�h认�ؓExtJS的脚本体�U�很大，不适合攑ֈ�互联�|�上�Q�对于这一点，有如下徏议：

部��v��C��联网上的Web应用一定要加蝲Release版本的ExtJS

可以考虑只加载必��ȝ��l��g�Q�build目录下脚本文仉��是压�~�过的，如果��目中用到的ExtJS的组件不是很多，可以只加载用到的

考虑使用IIS的文件压�~�功�?

使用Google的Gears�Q�把所有的静态文件做客户端缓�?

使用ADOBE的AIR�Q�把脚本打包到客��L��q�行

�ȝ��来说�Q�ExtJS是一个不错的框架�Q�它陪伴我走�q�了�_�ֽ��?008�Q�也许在未来�?009�Q�我会�{向其它的RIA技术，但是我至��会�l�箋��x��ExtJS�Q�同时也希望�q�个框架能够��强的生存下厅R�?/p>
PS�Q�共享一些学习资料：

ExtJS 2.0 ��?/a> �Q�推荐反复阅读，�l�细体会�Q?

ExtJS的用��h��展合�?/a> �Q�推荐常�ȝ��看）

如何用ExtJS构徏大型应用 �Q�可以说是做ExtJS开发的指导思想�Q?

ExtJS 2.0 �c�d��的脑�?/a> �Q�可以加深对ExtJS�c�d��的��承关�pȝ��理解�Q?/li>

seal 2009-11-15 14:22 发表评论

亚洲精品一区二区三区四区高清,精品资源在线看,日本一区二区免费在线

Ext FormPanel submit 提交与Ext.Ajax.request提交的区别（转）

Ext.MessageBox(�?

一、提�C�框(Ext.MessageBox.alert �?nbsp; Ext.Msg.alert)

二、对话框(Ext.MessageBox.confirm �?nbsp; Ext.Msg.confirm)

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

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

Extjs 如何动态添加window的items��（转）

How to add a column with tools for each record?

ExtJs----布局(�?

Springing Around with ExtJS

ExtJS中get、getDom、getCmp、getBody、getDoc的��用（转）

Ext中初始化配置��iconCls的��用方�?�?

ExtJS的xtype列表

Ext.data专题一�Q�Ext.data����?/a>

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

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

Ext.data专题四：Ext.data.Store

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

Ext.data专题一�Q�Ext.data��?/a>