| « | October 2025 | » | | 日 | 一 | 二 | 三 | 四 | 五 | 六 | | | | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | | |
|
公告 |
| 本博客在此声明所有文章均为转摘，只做资料收集使用。并无其他商业用途。 |
| Blog信息 |
|
blog名称:
日志总数:210
评论数量:205
留言数量:-19
访问次数:924146
建立时间:2007年5月10日 |
| |
|
 [EXT2.0]ExtJS2.0开发与实践笔记[1]——ExtJS中的Dialog与Form
文章收藏, 网上资源, 软件技术, 电脑与网络
李小白 发表于 2008/4/24 22:48:03 |
ExtJS2.0中提供了一整套的web表示层UI解决方案，令我们可以非常轻易的实现平时较为复杂的javascript操作，在此我以表示层开发中使用较多的Dialog与Form功能进行一次ExtJS2.0的实现演示。ExtJS2.0的配置及运行方式请参阅 ExtJS2.0开发与实践笔记[0]-初识ExtJSDialogExt.js (此中包含了ExtJS的确定，分支选择，进度条，输入框等四个应用实例)
500)this.width=500'>500)this.width=500'>/**//**500)this.width=500'> * 500)this.width=500'> */500)this.width=500'>500)this.width=500'>var DialogExt=function()...{ 500)this.width=500'>500)this.width=500'> /**//**500)this.width=500'> * 追踪输出500)this.width=500'> * @param {Object} str500)this.width=500'> */500)this.width=500'>500)this.width=500'> var trace=function(str)...{500)this.width=500'> //在ExtJS2.0中，log由Ext统一调度500)this.width=500'> Ext.log(str);500)this.width=500'> };500)this.width=500'> //设置Ext.Button别名为Button500)this.width=500'> var Button=Ext.Button;500)this.width=500'> //设置Ext.MessageBox别名为MessageBox500)this.width=500'> var MessageBox=Ext.MessageBox;500)this.width=500'>500)this.width=500'> //变量设置，用于保存DialogExt自身及当中键钮500)this.width=500'> var root; 500)this.width=500'> var btn0;500)this.width=500'> var btn1;500)this.width=500'> var btn2;500)this.width=500'> var btn3;500)this.width=500'> 500)this.width=500'> //返回操作500)this.width=500'>500)this.width=500'> return ...{500)this.width=500'> //初始化函数500)this.width=500'>500)this.width=500'> init:function()...{500)this.width=500'> //设定root等于this500)this.width=500'> root=this; 500)this.width=500'> //生成Ext按钮，绑定数据到Element，renderTo为绑定的按钮名，text为输出内容500)this.width=500'>500)this.width=500'> btn0=new Button(...{renderTo:'a',text:'确定选项'});500)this.width=500'>500)this.width=500'> btn1=new Button(...{renderTo:'b',text:'yes/no选项'});500)this.width=500'>500)this.width=500'> btn2=new Button(...{renderTo:'c',text:'输入框选项'});500)this.width=500'>500)this.width=500'> btn3=new Button(...{renderTo:'d',text:'进度条选项'});500)this.width=500'>500)this.width=500'> //确定选项500)this.width=500'>500)this.width=500'> btn0.on('click',function() ...{500)this.width=500'> MessageBox.alert(500)this.width=500'> '消息框',500)this.width=500'> 'Ext很简单。',500)this.width=500'> root.onResult);500)this.width=500'> });500)this.width=500'>500)this.width=500'> //yes/no选项500)this.width=500'>500)this.width=500'> btn1.on('click',function(evt) ...{500)this.width=500'> MessageBox.confirm(500)this.width=500'> '提问',500)this.width=500'> 'Ext是否很容易掌握？', 500)this.width=500'> root.onResult);500)this.width=500'> });500)this.width=500'>500)this.width=500'> //输入框选项500)this.width=500'>500)this.width=500'> btn2.on('click',function(evt) ...{500)this.width=500'> MessageBox.prompt(500)this.width=500'> '输入框',500)this.width=500'> '输入内容：',500)this.width=500'> root.onResult);500)this.width=500'> });500)this.width=500'>500)this.width=500'> //进度条选项500)this.width=500'>500)this.width=500'> btn3.on('click',function() ...{500)this.width=500'> //生成进度条，分别设定了标题，信息，宽，是否自动前进进度，是否自动关闭进度5项500)this.width=500'>500)this.width=500'> MessageBox.show(...{500)this.width=500'> title :'进度条',500)this.width=500'> msg :'初始化中…',500)this.width=500'> width :240,500)this.width=500'> progress:true,500)this.width=500'> closable:false500)this.width=500'> });500)this.width=500'>500)this.width=500'> //进度条定时处理500)this.width=500'>500)this.width=500'> var f=function(v) ...{500)this.width=500'>500)this.width=500'> return function()...{500)this.width=500'>500)this.width=500'> if (v<=10) ...{500)this.width=500'> MessageBox.updateProgress(500)this.width=500'> v/10,'读取进度 '+v+'/10');500)this.width=500'>500)this.width=500'> } else ...{500)this.width=500'> //隐藏Ext消息框500)this.width=500'> MessageBox.hide();500)this.width=500'> }500)this.width=500'> };500)this.width=500'> };500)this.width=500'> //进度条时间设定500)this.width=500'>500)this.width=500'> for (var i=1;i<=11;i++) ...{500)this.width=500'> setTimeout(f(i),i*1000);500)this.width=500'> }500)this.width=500'> });500)this.width=500'> },500)this.width=500'> //当前操作对象输出500)this.width=500'>500)this.width=500'> onResult:function(button,text)
阅读全文(2799) | 回复(0) | 编辑 | 精华 |
| | |
|