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 版权协议,转载请附上原文出处链接和本声明。