您的位置：首页 > Web前端 > JavaScript

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

2008-08-26 00:33 429 查看

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>

<title>DialogExt</title>

</head>

<body>

<tr>

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

<title>FormExt</title>

</head>

<body>

<h3 style="margin-bottom:5px;">Ext的form</h3>

</div></div></div>

</div>

</body>

</html>

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

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航