html ext布局 顶层菜单,Extjs4 常用控件与面板、布局

1.使用逗号分隔参数列表配置组件

首先来看一个简单的逗号分隔参数列表的例子。这个例子非常简单，它用来显示信息提示框。

2.使用Json对象配置组件

接下来看一个使用Json对象配置组件的例子，很多地方习惯性称之为配置对象。

Ext.Msg.alert('提示', '逗号分隔参数列表');//使用Json对象配置var config ={                title:'使用Json对象配置',                msg:'这里是提示信息！'};            Ext.Msg.show(config);        });

ExtKS开放了大量配置项以满足程序员在实际项目中的不同需求，熟悉各个配置项的配置方式以及效果是我们快速掌握EXTJS的一个捷径。信息提示框组件介绍

Ext.window.MessageBox是一个工具类，用来生成各种风格的信息提示框。其实例对象可以通过Ext.MessageBox或Ext.Msg来访问，两者具有相同的效果，后者提供更简便的调用方式。

Ext.MessageBox提供的信息对话框显示的文本不仅支持纯文本显示还支持HTML格式文本，采用HTML格式文本进行排版，效果更加丰富多彩。

Javascript中标准的alert会阻塞浏览器脚本的执行，但是Ext.MessageBox不会，它是异步调用。

1.Ext.MessageBox.alert是一个只读信息提示框，可以为其提供一个回调函数，该函数将在单击按钮后被调用(不包括右上角的退出按钮)，所单击按钮的ID将作为唯一的参数传递到回调函数中。

2.Ext.MessageBox.confirm确认对话框，支持传入回调函数，与Ext.MessageBox.alert一致。

3.Ext.MessageBox.prompt显示用户输入信息的对话框。支持传入回调函数，所单击的按钮id以及文本框的内容将作为参数传递到回调函数中。

Ext.Msg.prompt("提示", "请输入信息",callback,true,'默认值');functioncallback(id, msg) {                alert("点击按钮:"+id+" 输入信息:"+msg);            }        });

4.Ext.MessageBox.wait()显示一个自动滚动的进度框。它被用在一个耗时的交互操作中，它不能定义一个时间间隔自动关闭，需要手动关闭。

5.Ext.MessageBox.show()基于配置显示新的信息提示框或重置一个已经存在的信息提示框。前面介绍的3个方法内部调用的都是它，尽管调用简捷，但是它不支持所有的配置项，要建立更加强大、个性化的提示框还需要掌握Ext.MessageBox.show方法做起。配置项太多，碍于篇幅，不列出，需要的人去查阅ExtJSAPI。该提示框是异步执行的，使用时请注意。

prompt: true,//含输入框

value: '请输入',//输入框默认值

fn: callback,//回调函数

buttons: Ext.Msg.YESNOCANCEL,//可用按钮icon:Ext.Msg.QUESTION            });        });

6.Ext.MessageBox其他功能

(1) 改变默认的按钮文字

Ext.Msg.msgButtons[0].setText('按钮一');//yes

Ext.Msg.msgButtons[1].setText('按钮二');//no

Ext.Msg.msgButtons[2].setText('按钮三');//cancel

Ext.Msg.msgButtons[3].setText('按钮四');                        Ext.Msg.show({                title:'提示',                msg:'防火防盗防校长',                modal:true,                buttons:Ext.Msg.YESNOCANCEL            });        });

(2) 动态更新信息提示框

(3) 更新进度以及提示信息

percentage = count / 10;//生成进度条上的文字

progressText = '当前完成度:' + percentage * 100 + '%';//更新信息提示对话框

msgBox.updateProgress(percentage, progressText, '当前时间:' + Ext.util.Format.date(new Date(), 'Y-m-d g:i:s A'));//刷新10次关闭信息提示对话框if (count > 10) {                        Ext.TaskManager.stop(task);                        msgBox.hide();                    }                },                interval:1000};            Ext.TaskManager.start(task);        });

进度条组件介绍

Ext.ProgressBar是一个可更新的进度条组件，该进度条具有手工模式和自动模式。手工模式下，需要自己控制进度条的显示，自动模式下，只要调用wait方法，进度条就会无限制的滚动下去，它适合为那么耗时长的同步操作进行提示。

renderTo: 'div'});        });

手工模式的进度条是通过调用进度条的updateProgress()方法来实现的。手工更新的进度条非常适合可以掌握程序的执行状态的长时间操作。例如文件的上传进度，如果有些操作无法实时获取进度，只能采用自动更新的进度条信息。

percentage = count / 10;                    progressText= percentage * 100 + '%';//更新信息 参数含义:百分比,进度条文字,是否使用动画效果

progressbar.updateProgress(percentage,progressText,true);                },                interval:1000,//方法执行时间间隔

repeat:6 //设置执行次数});        });

创建一个自动模式的进度条并不复杂，只用调用进度条的wait方法，进行必要的配置即可得到一个理想状态的自动更新的进度条了。

interval: 1000,//每1秒更新一次

increment: 10,//进度条分10次更新完毕

text: 'waiting',//进度条上的文字

scope: this,//回调函数的执行fanw

fn: function() {                    Ext.Msg.alert('提示', '更新完毕');                }            });        });

通过cls配置改变进度条的样式。

border-top: 1px solid #BEBEBE;            border-bottom: 1px solid #EFEFEF;            border-right: 0;        }

renderTo: 'ProgressBar',                cls:'custom'//使用自定义样式});            ProgressBar.wait({                duration:10000,//进度条持续更新10秒钟

interval: 1000,//每1秒钟更新一次

increment: 10//进度条分10次更新完毕});        });

实现工具和菜单栏

Ext.toolbar.Toolbar是工具栏的基础组件，它相当于容器，在其中可以放置各种工具栏元素，主要包括按钮、文字和菜单组件。

toolbar1

toolbar2

Ext.menu.Menu菜单

作为我们编写的第一个菜单栏，它以熟悉的文本编辑软件菜单栏为原型，主要分为文件菜单和编辑菜单，在文件下拉菜单中有3个菜单选项，分别是新建、打开、关闭，在编辑下拉菜单中包含复制、粘帖、剪切。

接下来看多级菜单的实现方式，在以下示例中是通过Ext.menu.Item的menu配置项来完成多级菜单的关联。

将更多组件加入菜单。再以上2个示例中介绍了简单菜单和多级菜单的创建，示例中菜单项都是Ext.menu.Menu对象，其表现形式中规中矩，下面演示一下向菜单栏

中添加丰富的组件。

文中示例代码下载