Ext JS入门

阅读更多

Ext js介绍

ExtJS是一种主要用于创建前端用户界面，是一个基本与后台技术无关的前端ajax框架，Ext JS的最初目的是对Yahoo_UI进行扩展，参考了java Swing的实现机制，主要的特色是界面效果表现力强，Ext JS属于一种Ajax框架，同类的Ajax框架有Prototype，Dojo，GWT。

建立Ext JS的开发环境

1.到Ext官网下载ext js程序包，现在最新版本是4.0，

2.下载开发工具Spket插件，至于为什么要下载Spket,因为在eclipse通过Spket插件有利于我们进行Ext js的开发。

对Ext的了解

要了解Ext js就是了解我们下载的Ext包

先来看一下Ext包结构（版本不同会有一些差别，我用的是4.0，下面介绍一下几个重要的文件）

docs：Ext API帮助文档；

examples：使用Ext技术做出的示例；

resources：ExtUI资源文件，如css、images文件；

source：无压缩的Ext全部源代码(里面分类存放);

ext-all.js：压缩后的Ext全部源代码；

ext-all-dubug.js：无压缩的Ext全部源代码(用于调试)；

Ext js知识框架

1.Ext js类库

2.Ext js布局

3.Ext js组件

基本的知识点就包括以上几个方面（可以类似于Swing）

看一段示例代码

Ext.onReady(function(){	
    Ext.QuickTips.init();	
    Ext.form.Field.prototype.msgTarget='side';
    var login = new Ext.FormPanel({ 
        labelWidth:80,
        url:'user_login.action', 
        frame:true, 
        title:'请登陆', 
        defaultType:'textfield',
		monitorValid:true,

        items:[{ 
                fieldLabel:'用户名', 
                name:'username', 
                allowBlank:false 
            },{ 
                fieldLabel:'密码', 
                name:'password', 
                inputType:'password', 
                allowBlank:false 
            }], 
        buttons:[{ 
                text:'登陆',
                formBind: true,	 
                handler:function(){ 
                    login.getForm().submit({ 
                        method:'POST', 
                        waitTitle:'连接中...', 
                        waitMsg:'发送数据...', 
                        success:function(){ 
                        	Ext.Msg.alert('状态', '登陆成功!', function(btn, text){
				   			if (btn == 'ok'){					   				
		                        var redirect = 'user_check.action'; 
		                        window.location = redirect;
								win.destroy();
				   				
                                   }
			        });
                        },
                        failure:function(form, action){ 
                           
                                Ext.Msg.alert('状态','登陆失败,请重试!'); 
                             
                            login.getForm().reset(); 
                        } 
                    }); 
                } 
            },{
			text: '取消',
			handler:function(){
				win.destroy();
			}//重置表单
			}] 
    }); 	
    var win = new Ext.Window({
        layout:'fit',
        width:300,
        height:150,
        closable: true,
        resizable: false,
        plain: true,
        border: false,
        modal:true,
        items: [login]
	});
	win.show();
});

 

看一个Ext js实现的实例

 

学习Ext js的经验

1.多看Ext js包下的示例

2.多调试

3.多抄些例子

 

 

 

• 
• 大小: 64.5 KB

• 
• 大小: 74.3 KB

• 查看图片附件