ExtJS2.0开发与实践笔记[1]——ExtJS中的Dialog与Form

简介:
ExtJS2.0中提供了一整套的web表示层UI解决方案,令我们可以非常轻易的实现平时较为复杂的javascript操作,在此我以表示层开发中使用较多的Dialog与Form功能进行一次ExtJS2.0的实现演示。

ExtJS2.0的配置及运行方式请参阅  ExtJS2.0开发与实践笔记[0]-初识ExtJS

DialogExt.js (此中包含了ExtJS的确定,分支选择,进度条,输入框等四个应用实例)
/**
 * 
 
*/

var  DialogExt = function ()
    
/**
     * 追踪输出
     * @param {Object} str
     
*/

    
var trace=function(str){
        
//在ExtJS2.0中,log由Ext统一调度
        Ext.log(str);
    }
;
    
//设置Ext.Button别名为Button
    var Button=Ext.Button;
    
//设置Ext.MessageBox别名为MessageBox
    var MessageBox=Ext.MessageBox;

    
//变量设置,用于保存DialogExt自身及当中键钮
    var root;   
    
var btn0;
    
var btn1;
    
var btn2;
    
var btn3;
    
    
//返回操作
    return {
        
//初始化函数
        init:function(){
            
//设定root等于this
            root=this
            
//生成Ext按钮,绑定数据到Element,renderTo为绑定的按钮名,text为输出内容
            btn0=new Button({renderTo:'a',text:'确定选项'});
            btn1
=new Button({renderTo:'b',text:'yes/no选项'});
            btn2
=new Button({renderTo:'c',text:'输入框选项'});
            btn3
=new Button({renderTo:'d',text:'进度条选项'});

            
//确定选项
            btn0.on('click',function() {
                MessageBox.alert(
                    
'消息框',
                    
'Ext很简单。',
                    root.onResult);
            }
);

            
//yes/no选项
            btn1.on('click',function(evt) {
                MessageBox.confirm(
                    
'提问',
                    
'Ext是否很容易掌握?'
                    root.onResult);
            }
);

            
//输入框选项
            btn2.on('click',function(evt) {
                 MessageBox.prompt(
                    
'输入框',
                    
'输入内容:',
                    root.onResult);
            }
);

            
//进度条选项
            btn3.on('click',function() {
                
//生成进度条,分别设定了标题,信息,宽,是否自动前进进度,是否自动关闭进度5项
                 MessageBox.show({
                   title   :
'进度条',
                   msg     :
'初始化中…',
                   width   :
240,
                   progress:
true,
                   closable:
false
                }
);

                
//进度条定时处理
                var f=function(v) {
                    
return function(){
                    
if (v<=10{
                         MessageBox.updateProgress(
                            v
/10,'读取进度 '+v+'/10');
                        }
 else {
                         
//隐藏Ext消息框
                         MessageBox.hide();
                        }

                    }
;
                }
;
                
//进度条时间设定
                for (var i=1;i<=11;i++{
                     setTimeout(f(i),i
*1000);
                }

            }
);
        }
,
        
//当前操作对象输出
        onResult:function(button,text){
            trace(
"点击按钮:"+button+" 输出文本:"+text);
        }

    }
;
}
();
// 设定onReady,Ext将在dom加载完毕后自动调用其中操作
Ext.onReady(DialogExt.init,DialogExt, true );

Dialog.html
< html >
< head >
    
< meta  http-equiv ="Content-Type"  content ="text/html; charset=UTF-8" >
    
< title > DialogExt </ title >
    
<!-- 加载ExtJs资源[当调用Ext.log调试时,需要使用debug方式的js] -->
    
< link  rel ="stylesheet"  type ="text/css"  href ="resources/css/ext-all.css"   />
    
< script  type ="text/javascript"  src ="adapter/ext/ext-base.js" ></ script >
    
< script  type ="text/javascript"  src ="ext-all-debug.js" ></ script >
    
<!-- 加载我的js文件 -->
    
< script  type ="text/javascript"  src ="DialogExt.js" ></ script >
</ head >
< body >
    
<!-- 设置Element,以供DialogExt.js调用 -->
    
< table  cellspacing ="5" >
        
< tr >
            
< td >< div  id ="a" ></ div ></ td >
            
< td >< div  id ="b" ></ div ></ td >
            
< td >< div  id ="c" ></ div ></ td >
            
< td >< div  id ="d" ></ div ></ td >    
        
</ tr >
    
</ table >
</ body >
</ html >

效果图如下:




form应用实例,在此我演示了Ext中简单的Form生成方式。

FormExt.js
FormExt = function () {
    
var trace=function(str){
        Ext.log(str);
    }
;
    
//1.1版为Ext.form.Form
    var Form=Ext.form.FormPanel;
    
var MessageBox=Ext.MessageBox;
    
var TextField=Ext.form.TextField;
    
//变量设置
    var root;     
    
var form;      
    
var textField0;
    
var textField1;
    
var textField2;
    
var textField3;
    
return {
        
//初始化FormExt
        init:function(){
            root
=this;

            
//生成窗体
            form=new Form({
                
//样式
                baseCls: 'x-plain',
                
//label宽
                labelWidth: 75,
                
//数据提交地址
                url:'save.jspa'
            }
);

            
//生成TextField
            textField0=new TextField({
                fieldLabel:
'姓名',
                name      :
'name',
                width     :
175,
                allowBlank:
false
            }
);
            textField1
=new TextField({
                fieldLabel:
'地址',
                name      :
'address',
                width     :
175
            }
);
            textField2
=new TextField({
                fieldLabel:
'年齢',
                name      :
'age',
                width     :
175
            }
);
            textField3
=new TextField({
                fieldLabel:
'email',
                name      :
'email',
                
//验证类型为email
                vtype     :'email',
                width     :
175
            }
);
            
            
//将TextField加载入form
            form.add(textField0,textField1,textField2,textField3);
        
            
//生成按钮
            form.addButton('保存',function(){
                MessageBox.alert(
'消息框','保存数据')}
);
            form.addButton(
'取消',function(){
                MessageBox.alert(
'消息框','取消操作')}
);
            
            
//将form内容实施到名称为frmExt的div上
            form.render('frmExt');
        }

    }
;
    
}
();
// 设定onReady,Ext将在dom加载完毕后自动调用其中操作
Ext.onReady(FormExt.init,FormExt, true );


FormExt.html
< html >
< head >
    
< meta  http-equiv ="Content-Type"  content ="text/html; charset=UTF-8" >
    
< title > FormExt </ title >
    
<!-- ExtJS资源引入 -->
    
< link  rel ="stylesheet"  type ="text/css"  href ="resources/css/ext-all.css"   />
    
< script  type ="text/javascript"  src ="adapter/ext/ext-base.js" ></ script >
    
< script  type ="text/javascript"  src ="ext-all-debug.js" ></ script >
    
<!-- 我的js文件 -->
    
< script  type ="text/javascript"  src ="FormExt.js" ></ script >
</ head >
< body >
    
<!-- frame -->
    
< div  style ="width:300px;" >
        
< div  class ="x-box-tl" >< div  class ="x-box-tr" >< div  class ="x-box-tc" ></ div ></ div ></ div >
        
< div  class ="x-box-ml" >< div  class ="x-box-mr" >< div  class ="x-box-mc" >
            
< h3  style ="margin-bottom:5px;" > Ext的form </ h3 >
        
< div  id ="frmExt" ></ div >
        
</ div ></ div ></ div >
        
< div  class ="x-box-bl" >< div  class ="x-box-br" >< div  class ="x-box-bc" ></ div ></ div ></ div >
    
</ div >
</ body >
</ html >


ExtJS自2.0开始UI库已经有了极大的丰富,基本可满足我们日常开发所需的一切效果,而在Java操作中我们习以为常的很多功能,都能够在Ext找到对应的操作。在下回我将着重介绍 Ext中 Layout的使用。

PS:由于ExtJS类库较多,所以将于较后进行介绍,目前仅以实例为主,现阶段请参阅ExtJS2.0的doc文档。



本文转自 cping 51CTO博客,原文链接:http://blog.51cto.com/cping1982/129953

相关文章
|
移动开发 开发框架 JavaScript
EasyUI与EXTjs有什么区别
EasyUI与EXTjs有什么区别
EasyUI与EXTjs有什么区别
|
前端开发 JavaScript 程序员
layui(类ui)入门指南
开始使用 - 入门指南 l        ayui(谐音:类UI) 是一款采用自身模块规范编写的前端 UI 框架,遵循原生 HTML/CSS/JS 的书写与组织形式,门槛极低,拿来即用。
3171 0
|
JavaScript 程序员 前端开发
|
JSON JavaScript 数据格式
|
前端开发 JavaScript .NET