EXTJS 4 窗口组件使用示例
2014-10-22 10:07
381 查看
一、整体效果图
二、使用说明及效果图
2.1、程序代码及说明:
2.1.1、窗口使用的代码说明
Ext.create('Ext.window.Window', {
title: '这是窗口标题',
height: 400,
width: 400,
layout: 'fit',
closable:true,
closeAction:'hide',
collapseDirection:'left',
collapseMode :'header',
collapsible :true,
plain:true,
titleAlign :'center',
draggable :false,
floatable:false,
header :true,
hideMode:'visibility',
headerPosition:'top',
modal:true,
onEsc:function(){
Ext.Msg.alert("提示信息","您按了esc键了!");
},
tools:[{
type:'refresh',
tooltip: 'Refresh form Data',
handler: function(event, toolEl, panel){
Ext.Msg.alert("提示信息","Refresh form Data!");
}
},{
type:'help',
tooltip: 'Get Help',
handler: function(event, toolEl, panel){
Ext.Msg.alert("提示信息","Get Help");
}
}],
items: [{
xtype: 'panel',
border: false,
frame:true,
html:'这是一个窗口'
}],
buttonAlign:'center',
buttons: [{
text: 'buttons_btn1',
tooltip:'这是buttons中的一个按钮.'
}]
}).show();
属性 | 说明 |
closable | boolean 默认为true 是否可以关闭窗口,若设置为false,则在窗口的右上角不会出现关闭按钮. |
closeAction | String 默认为:destroy 关闭窗口时执行的动作,destroy:将窗口销毁,hide:将窗口隐藏 |
collapseDirection | String 窗口折叠的方向,可设置为 'top', 'bottom', 'left'or 'right' |
collapsible | boolean 默认为false 是否可以将窗口折叠 |
titleAlign | String 默认为 left 标题的对齐方式,可设置为 "left", "right"or "center". |
draggable | boolean 默认为true 是否可以拖动窗口, |
header | boolean/object 设置为false时,不显示标题栏,同时也可以将一个header对象赋给它,用于自定以标题栏 |
hideMode | String 隐藏窗口的方式, display(none style),visibility(hidden style),offsets(移出可见区域) |
headerPosition | String 默认为top 标题栏的位置,可设置为 'top', 'bottom', 'left'or 'right' |
modal | boolean 默认为false 当设置为true是,窗口显示时,所有其他的组件都会被放到后面,不能被操作,知道窗口关闭或隐藏为止. |
onEsc | function 用于定义.按esc键的响应函数 |
tools | Object[]/Ext.panel.Tool[] 工具栏 |
dockedItems | Object/Object[] 可以在窗口的上/下/左/右部添加类似于toolbar的工具栏. |
bbar | Object/Object[] 在窗口的底部添加类似于toolbar的工具栏,类似的还有tbar/lbar/rbar |
buttonAlign | String 指定buttons定义的按钮的对齐方式,可设置为:'right', 'left' and 'center' |
buttons | Object/Object[] 指定窗口的一组操作按钮. |
相关文章推荐
- EXTJS 4 树形表格组件使用示例
- (9) ExtJS4.2 Window的用法示例 ExtJS中Window组件最小化 使用iframe填充ExtJS Window组件
- DotNET使用CoreLab推出的MYSQL访问组件示例(学习)
- ExtJs学习笔记基础篇(2)-Ext组件的使用
- [Android]自定义组件示例:使用attrs.xml文件定制RadioButton
- ExtJS TreeCheckNodeUI组件的使用 示例
- JavaScript ymPrompt弹窗组件 --父子窗口 获取值 使用实例
- OWA或Messenger样式的信息提示窗口——编写ASP.NET AJAX Extender控件(下):使用该控件(示例程序)
- ExtJS的FormPanel中的组件使用load加载远程的JSON数据的方法
- Extjs2.2 Itemselector的使用示例
- JDK线程池组件使用示例
- 在Myeclipse中使用Extjs的示例工程
- ExtJS2.0实用简明教程 - 组件的使用
- 使用extjs的Tree组件时,节点ID设置问题
- 使用EXTJS写的注册窗口
- 窗口的各种传值在线演示示例(示例都使用的page参数,内容页中的代码最好打开相应的内容页查看)
- 【Vegas原创】使用GreyBox组件实现ajax弹出式窗口效果
- ExtJs 学习笔记基础篇 Ext组件的使用第1/2页
- ExtJS专题(三):ExtJS组件的使用
- ExtJs 一些常用啊例子如界面布局,组件的使用等之类的