关于EXT2.0 的简单介绍_submit 2.0-优快云博客

本文链接：https://blog.youkuaiyun.com/java375378563/article/details/2318069

所有它可以在多个容器之间共享,不过好象只有Ext.Toolbar, Ext.Button 和 Ext.menu.Menu支持action接口:),因为容器要实现下面所有的方法setText(string), setIconCls(string), setDisabled(boolean), setVisible(boolean) and setHandler(function)方法:Action( Object config )构造,config定义为{ disabled : Boolean,//禁止使用 handler : Function,//事件句柄 hidden : Boolean,//隐藏 iconCls : String,//样式类 scope : Object, //handler将在哪个范围内执行 text : String //文本}disable() : voidenable() : voidsetDisabled( Boolean disabled ) : void禁止/允许each( Function fn, Object scope ) : void为每个实现了此action的componet应用fnhide() : voidshow() : voidsetHidden( Boolean hidden ) : void显示/隐藏setHandler( Function fn, Object scope ) : voidsetIconClass( String cls ) : voidsetText( String text ) : void重新设置config配置的属性值示例:function onItemCheck(item){Ext.MessageBox.alert("点击事件",String.format("您选择了{0}",item.text));}function showMenu(obj){Ext.MessageBox.alert("点击下拉",obj.getXTypes() )}Ext.QuickTips.init();var button=new Ext.SplitButton({ renderTo:Ext.getBody(), arrowHandler : showMenu, handler: onItemCheck, arrowTooltip : "更多", text:'按我', menu:'mainMenu'});Ext.Button简单的按钮类公有属性:disabled : Boolean允许?hidden : Boolean隐藏?pressed : Boolean按下?方法 [继承来的忽略]Button( Object config )构造可选config{ clickEvent : String, //handler响应的事件,默认是click cls : String, //样式 disabled : Boolean, //禁止 enableToggle : Boolean,//允许在按下没按下之间切换,添加移除x-btn-pressed样式类 handleMouseEvents : Boolean,//允许使用移入移出按下事件,默认是真 handler : Function, //响应clickEvent定义的事件 hidden : Boolean, //隐藏 icon : String, //图标文件地址,如果修改x-btn-text-icon样式类可以重定义默认icon iconCls : String, //和icon功能类似,但使用设定了background-image属性的样式定义 menu : Mixed //如果需要,可以为按钮定义菜单 menuAlign : String, //菜单对齐方式,默认值是tl-bl minWidth : Number, //最小宽度 pressed : Boolean, //是否按下 repeat : Boolean/Object,//是否需要重复定义鼠标按下事件,也可以是一个Ext.util.ClickRepeater配置对象 scope : Object, //handler事件的范围 tabIndex : Number, //table键顺序 text : String, //文本 toggleGroup : String, //如果定义一组enableToggle为真且toggleGroup值相同的button对象,这些对象同一时间内将只有一个处于按下状态 tooltip : String/Object, //提示信息,可以是一个字符串或QuickTips的配置对象 tooltipType : String, //可选值"qtip"(默认)或"title"之一 type : String //可选值"submit"/"reset"/"button"(默认)之一}focus() : void//得到焦点getText() : String//取得文本hasVisibleMenu() : Boolean//有可视的菜单?hideMenu() : void//隐藏菜单initComponent() : void//初始化容器setHandler( Function handler, [Object scope] ) : void//设置事件处理方法setText( String text ) : void//设置文本showMenu() : void//显示菜单toggle( [Boolean state] ) : void//切换按下状态示例:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" ><head> <title>Untitled Page</title> <link rel="stylesheet" rev="stylesheet" href="/css/ext-all.css" type="text/css" media="all" /> <script. type="text/javascript" src="/scripts/adapter/ext/ext-base.js"></script> <script. type="text/javascript" src="/scripts/ext-all.js"></script> <style. type="text/css"> /*--加入样式背景好直观一点*/ .x-btn-pressed button{ background-color:red; } </style> <script. type="text/javascript"> Ext.onReady(function(){ //有菜单的按钮 function onItemCheck(item){ Ext.MessageBox.alert("点击事件",String.format("您选择了{0}",item.text)); }var menu = new Ext.menu.Menu({ id: 'mainMenu', items: [ { text: 'menu1', handler: onItemCheck }, { text: 'menu2', handler: onItemCheck }]});var button=new Ext.Button({ renderTo:Ext.getBody(), text:'按我', menu:'mainMenu'});//有状态的探钮new Ext.Button({ renderTo:Ext.getBody(), text:'toggle button ', enableToggle:true});//分组的有状态按钮new Ext.Button({ renderTo:Ext.getBody(), text:'toggle button 1', enableToggle:true, toggleGroup:'toggleGroup', handler: onItemCheck});new Ext.Button({ renderTo:Ext.getBody(), text:'toggle button 2', enableToggle:true, toggleGroup:'toggleGroup', handler: onItemCheck}); }); </script></head><body></body></html>Ext.SplitButton上例中的带菜单按钮还不专业,于是有了Ext.SplitButton,专门为带有下拉菜单的按钮设计的方法:SplitButton( Object config )构造,config中加入了{ arrowHandler : Function, arrowTooltip : String}setArrowHandler( Function handler, [Object scope] ) : void设置下拉箭头的点击事件事件:arrowclick : ( MenuButton this, EventObject e )使用示例:比如上例中的菜单按钮可以改为function onItemCheck(item){Ext.MessageBox.alert("点击事件",String.format("您选择了{0}",item.text));}function showMenu(obj){Ext.MessageBox.alert("点击下拉",obj.getXTypes() )}Ext.QuickTips.init();var button=new Ext.SplitButton({ renderTo:Ext.getBody(), arrowHandler : showMenu, handler: onItemCheck, arrowTooltip : "更多", text:'按我', menu:'mainMenu'});Ext.CycleButton这是一个SplitButton的实用子类,用于在多个item之间切换状态,当然它也会带有menu可供选择,也可以直接点击按键在item之间切换方法: CycleButton( Object config ) 构造,config新增配置项{changeHandler : Function, //状态切换时的处理事件items : Array, //items应该是menu item的数组prependText : String, //前导textshowText : Boolean, //追加item的text到按钮显示}getActiveItem() : Ext.menu.CheckItemsetActiveItem( Ext.menu.CheckItem item, Boolean suppressEvent ) : void得到/设置活动选项toggleSelected() : void切换选择项,相当于点击一次按钮示例new Ext.CycleButton({ renderTo:Ext.getBody(), showText: true, prependText: 'View as ', items: [{ text:'text only', iconCls:'view-text', checked:true },{ text:'HTML', iconCls:'view-html' },{ text:'XML', iconCls:'view-html' } ], changeHandler:function(btn, item){ Ext.MessageBox.alert('Change View', item.text); }});