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很简单。
‘
,
版权声明:本文为cping1982原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。