`
shaohan126448
  • 浏览: 115837 次
  • 来自: 北京
社区版块
存档分类
最新评论

ext 控件属性

阅读更多
Ext.Action
action实现一个脱离了容 器的事件,所有它可以在多个容器之间共享,不过好象只有Ext.Toolbar, Ext.Button 和 Ext.menu.Menu支持action接口:),因为容器要实现下面所有的方法setText(string), setIconCls(string), setDisabled(boolean), setVisible(boolean) and setHandler(function)

方法:
Action( Object config )
构造,config定义为
Javascript代码 复制代码
  1. {   
  2. disabled : Boolean,//禁止使用   
  3. handler : Function,//事件句柄   
  4. hidden : Boolean,//隐藏   
  5. iconCls : String,//样式类   
  6. scope : Object, //handler将在哪个范围内执行   
  7. text : String //文本   
  8. }  
{
disabled : Boolean,//禁止使用
handler : Function,//事件句柄
hidden : Boolean,//隐藏
iconCls : String,//样式类
scope : Object, //handler将在哪个范围内执行
text : String //文本
}


disable() : void
enable() : void
setDisabled( Boolean disabled ) : void
禁止/允许

each( Function fn, Object scope ) : void
为每个实现了此action的componet应用fn

hide() : void
show() : void
setHidden( Boolean hidden ) : void
显示/隐藏

setHandler( Function fn, Object scope ) : void
setIconClass( String cls ) : void
setText( String text ) : void
重新设置config配置的属性值

示例:
Javascript代码 复制代码
  1. function onItemCheck(item){   
  2. Ext.MessageBox.alert("点击事件",String.format("您选择了{0}",item.text));   
  3. }   
  4. function showMenu(obj){   
  5. Ext.MessageBox.alert("点击下拉",obj.getXTypes() )   
  6. }Ext.QuickTips.init();   
  7. var button=new Ext.SplitButton({   
  8.      renderTo:Ext.getBody(),   
  9.      arrowHandler : showMenu,   
  10.      handler: onItemCheck,   
  11.      arrowTooltip : "更多",   
  12.      text:'按我',   
  13.      menu:'mainMenu'  
  14. });  
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
Javascript代码 复制代码
  1. {   
  2. clickEvent : String,    //handler响应的事件,默认是click   
  3. cls : String,        //样式   
  4. disabled : Boolean,    //禁止   
  5. enableToggle : Boolean,//允许在按下没按下之间切换,添加移除x-btn-pressed样式类   
  6. handleMouseEvents : Boolean,//允许使用移入移出按下事件,默认是真   
  7. handler : Function,    //响应clickEvent定义的事件   
  8. hidden : Boolean,    //隐藏   
  9. icon : String,        //图标文件地址,如果修改x-btn-text-icon样式类可以重定义默认icon   
  10. iconCls : String,    //和icon功能类似,但使用设定了background-image属性的样式定义   
  11. menu : Mixed        //如果需要,可以为按钮定义菜单   
  12. menuAlign : String,    //菜单对齐方式,默认值是tl-bl   
  13. minWidth : Number,    //最小宽度   
  14. pressed : Boolean,    //是否按下   
  15. repeat : Boolean/Object,//是否需要重复定义鼠标按下事件,也可以是一个Ext.util.ClickRepeater配置对象   
  16. scope : Object,    //handler事件的范围   
  17. tabIndex : Number,    //table键顺序   
  18. text : String,        //文本   
  19. toggleGroup : String,    //如果定义一组enableToggle为真且toggleGroup值相同的button对象,这些对象同一时间内将只有一个处于按下状态   
  20. tooltip : String/Object, //提示信息,可以是一个字符串或QuickTips的配置对象   
  21. tooltipType : String,    //可选值"qtip"(默认)或"title"之一   
  22. type : String        //可选值"submit"/"reset"/"button"(默认)之一   
  23. }  
{
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
//切换按下状态


示例:
Html代码 复制代码
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml" >  
  3. <head>  
  4.     <title>Untitled Page</title>  
  5.      <link rel="stylesheet" rev="stylesheet" href="/css/ext-all.css" type="text/css" media="all" />  
  6.      <script. type="text/javascript" src="/scripts/adapter/ext/ext-base.js"></script>  
  7.      <script. type="text/javascript" src="/scripts/ext-all.js"></script>  
  8.      <style. type="text/css">  
  9.       /*--加入样式背景好直观一点*/   
  10.       .x-btn-pressed button{   
  11.          background-color:red;   
  12.       }   
  13.      </style>  
  14.      <script. type="text/javascript">  
  15.      Ext.onReady(function(){   
  16.        
  17. //有菜单的按钮   
  18.      function onItemCheck(item){   
  19.         Ext.MessageBox.alert("点击事件",String.format("您选择了{0}",item.text));   
  20.      }   
  21. var menu = new Ext.menu.Menu({   
  22.      id: 'mainMenu',   
  23.      items: [   
  24.          {   
  25.              text: 'menu1',   
  26.              handler: onItemCheck   
  27.          },   
  28.          {   
  29.              text: 'menu2',   
  30.              handler: onItemCheck   
  31.          }]   
  32. });var button=new Ext.Button({   
  33.      renderTo:Ext.getBody(),   
  34.      text:'按我',   
  35.      menu:'mainMenu'   
  36. });//有状态的探钮   
  37. new Ext.Button({   
  38.      renderTo:Ext.getBody(),   
  39.      text:'toggle button ',   
  40.      enableToggle:true   
  41. });//分组的有状态按钮   
  42. new Ext.Button({   
  43.      renderTo:Ext.getBody(),   
  44.      text:'toggle button 1',   
  45.      enableToggle:true,   
  46.      toggleGroup:'toggleGroup',   
  47.      handler: onItemCheck   
  48. });   
  49. new Ext.Button({   
  50.      renderTo:Ext.getBody(),   
  51.      text:'toggle button 2',   
  52.      enableToggle:true,   
  53.      toggleGroup:'toggleGroup',   
  54.      handler: onItemCheck   
  55. });      });   
  56.      </script>  
  57. </head>  
  58. <body></body>  
  59. </html>  
<!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 )


使用示例:
比如上例中的菜单按钮可以改为
Javascript代码 复制代码
  1. function onItemCheck(item){   
  2. Ext.MessageBox.alert("点击事件",String.format("您选择了{0}",item.text));   
  3. }   
  4. function showMenu(obj){   
  5. Ext.MessageBox.alert("点击下拉",obj.getXTypes() )   
  6. }   
  7.   
  8. Ext.QuickTips.init();   
  9. var button=new Ext.SplitButton({   
  10.      renderTo:Ext.getBody(),   
  11.      arrowHandler : showMenu,   
  12.      handler: onItemCheck,   
  13.      arrowTooltip : "更多",   
  14.      text:'按我',   
  15.      menu:'mainMenu'  
  16. });  
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新增配置项
Javascript代码 复制代码
  1. {   
  2. changeHandler : Function,    //状态切换时的处理事件   
  3. items : Array, //items应该是menu item的数组   
  4. prependText : String,    //前导text   
  5. showText : Boolean,    //追加item的text到按钮显示   
  6. }  
{
changeHandler : Function,    //状态切换时的处理事件
items : Array, //items应该是menu item的数组
prependText : String,    //前导text
showText : Boolean,    //追加item的text到按钮显示
}


getActiveItem() : Ext.menu.CheckItem
setActiveItem( Ext.menu.CheckItem item, Boolean suppressEvent ) : void
得到/设置活动选项
toggleSelected() : void
切换选择项,相当于点击一次按钮

示例
Javascript代码 复制代码
  1. new Ext.CycleButton({   
  2.      renderTo:Ext.getBody(),   
  3.      showText: true,   
  4.      prependText: 'View as ',   
  5.      items: [{   
  6.          text:'text only',   
  7.          iconCls:'view-text',   
  8.          checked:true  
  9.      },{   
  10.          text:'HTML',   
  11.          iconCls:'view-html'  
  12.      },{   
  13.          text:'XML',   
  14.          iconCls:'view-html'  
  15.      }   
  16.      ],   
  17.      changeHandler:function(btn, item){   
  18.         Ext.MessageBox.alert('Change View', item.text);   
  19.      }   
  20. });  
分享到:
评论

相关推荐

    Ext控件大全,适合新手学习

    根据提供的文件信息,我们可以深入探讨Ext控件的相关知识点。标题提到的是“Ext控件大全”,并且描述中指出这些资料非常适合IT人士尤其是新手学习使用。接下来,我们将基于此内容详细解析Ext控件的基础知识、应用...

    EXT 控件拖动例子

    1. **阻止默认浏览器拖放行为**:在控件上设置`unselectable`属性,防止文本被选中。 2. **设置拖动标志**:使用CSS来定义拖动时控件的外观。 3. **处理数据交换**:在拖放过程中,可能需要传递某些数据,例如控件的...

    Ext常用属性总结

    本文将深入探讨"Ext常用属性总结"这一主题,帮助开发者更好地理解和利用ExtJS的特性。 首先,让我们了解几个基本的ExtJS概念。`Ext.Component`是所有UI组件的基础类,它拥有众多属性来控制组件的行为、外观和交互。...

    ext控件demo+中文API+ext教程.pdf

    EXT控件是EXT框架中的核心元素,它们提供了丰富的用户界面组件,如按钮、表格、面板、窗口、菜单等,使得开发者可以构建出交互性强、功能完备的网页应用。 在EXT开发中,"ext控件demo"是非常重要的学习资源。它通常...

    EXT控件实例以及CHM

    通过查阅CHM文档,开发者可以快速查找特定组件的属性、方法和事件,有助于他们在实际项目中更有效地使用EXT控件。 EXT控件的使用涉及到前端开发的多个方面,包括HTML、CSS和JavaScript的深入理解,以及对MVC模式的...

    ext 树控件+数据库

    EXT树控件是EXT库中的一个重要组件,它允许开发者创建可交互的、层次结构的视图,常用于展现数据的层级关系,如组织结构、文件系统等。本文将深入探讨如何使用EXT树控件结合JSON数据进行数据传递和显示,以及如何...

    EXT 自定义控件扩展

    EXT控件是EXT框架的基础,它们提供了丰富的UI元素,如按钮、表格、面板、窗口等。通过EXT自定义控件扩展,开发者可以进一步拓展这些基础控件的功能,或者创建全新的控件类型,以满足项目中的特殊需求。以下是一些...

    Ext .net控件

    - 配置属性:在属性窗口中设置控件的属性,如大小、颜色、数据源等。 - 编写代码逻辑:在后台代码中处理事件,如按钮点击、数据加载等。 - 数据绑定:利用.NET的数据绑定机制与后端数据源连接,实现动态数据展示...

    extjs4的Ext.frorm.Panel控件属性说明和表单控件说明

    主要用例子说明extjs4的form表单的运用,其中有表单属性说明,表单控件运用说明如: title:'表单', //表单标题 bodyStyle:'padding:5 5 5 5', //表单边距 height:120, //表单高度 width:200, //表单宽度 ...

    EXT各个控件属性(7)[整理].pdf

    以下是根据提供的内容解析出的EXT控件相关知识点: 1. 按钮(Button): - `disabled` 属性:用于控制按钮是否可用。当设置为 `true` 时,按钮将被禁用;设置为 `false` 时,按钮恢复正常。例如,`Ext.getCmp('...

    EXT控件lovcombo

    在EXT控件lovcombo中,"displayfield"和"valuefield"是两个关键属性。"displayfield"定义了在界面上显示给用户的文本字段,而"valuefield"则指定了当用户选择一个选项时,实际存储的值。这两个字段通常应该保持一致...

    ext3.0所有控件演示代码

    这个压缩包文件提供了EXT3.0中的几乎全部控件的演示代码,覆盖了表格、表单、分页工具栏以及图标等多个重要组件的使用方法。下面将详细介绍这些知识点。 1. 表格(Grid):EXT3.0的表格控件是其核心功能之一,能够...

    Ext表格控件和树控件

    ### Ext表格控件和树控件 #### 表格控件 ##### 1.1 基本表格 `GridPanel` 在Ext JS框架中,`GridPanel` 是一种用于展示和管理表格数据的重要组件。它提供了丰富的功能,例如排序、缓存、拖动列、隐藏列、自动显示...

    Ext时间日期选择控件,精确到秒

    标题“Ext时间日期选择控件,精确到秒”指出了该控件允许用户选择时间到秒级别,这对于需要精确时间记录的应用场景(如日程安排、定时任务等)非常关键。EXTJS提供了多种时间日期选择控件,如`MyTimeField.js`、`...

    Ext用户扩展控件---------googlechart 利用google画图

    Ext用户扩展控件——Google Chart,是一种将Google的图表服务与EXTJS框架相结合的技术,用于在Web应用中创建丰富的、动态的数据可视化效果。EXTJS是一个强大的JavaScript库,它提供了丰富的用户界面组件,而Google ...

    ExtPanel和其他控件

    在本文中,我们将深入探讨Ext.Net框架中的几个关键控件及其属性,包括ExtPanel、Resizable、GridPanel、TreeNode以及Store和ComboBox。这些控件在构建富客户端Web应用程序时扮演着重要角色。 首先,让我们来看看Ext...

    EXT js 4带时间的日期控件

    EXT JS 4 版本在日期控件方面提供了丰富的功能,使得开发者可以方便地处理日期和时间输入。在这个特定的资源中,我们关注的是一个集成时间选择的日期控件,这在需要精确到时、分、秒的场景下非常有用。 EXT JS 4 的...

    ext3.x 改写的datatimefiled时间控件

    在EXT JS框架中,"ext3.x 改写的datetimefield时间控件"是一个自定义组件,主要用于增强原生EXT JS 3.x版本中的DateTimeField功能。这个控件为用户提供了更丰富的日期和时间选择能力,增加了对时、分、秒的选择,...

    Ext DateField控件 - 只选择年月插件

    Ext DateField控件是Ext JS库中的一个组件,主要用于处理日期相关的输入。在Web应用程序中,用户经常需要输入或选择日期,DateField控件提供了一个交互式的界面来完成这一任务。然而,有时我们可能只需要用户选择...

    ext grid网格控件实例

    EXT Grid控件是EXT JS库中的一个核心组件,它用于创建功能丰富的数据网格,能够高效地展示和操作大量数据。EXT Grid广泛应用于J2EE框架中,为Web应用提供了强大的数据展示和交互能力。在本实例中,我们将探讨四种...

Global site tag (gtag.js) - Google Analytics