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

  • Post author:
  • Post category:其他



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