`

EXT核心API详解(十四)_Ext.Button/Ext.SplitButton/Ext.CycleButton

EXT活动HTMLXHTML 
阅读更多
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,    //前导text
showText : Boolean,    //追加item的text到按钮显示
}
getActiveItem() : Ext.menu.CheckItem
setActiveItem( 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);
    }
});
分享到：
| EXT核心API详解(十三)_Ext.Action
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    EXT核心API详解

    EXT核心API详解 1、Ext类 ………………………………… 2 2、Array类 …………………………… 4 3、Number类 …………………………… 4 4、String类 …………………………… 4 5、Date类 ……………………………… 5 ...

    ExtJS入门教程(超级详细)

    41、Ext.Button类 …………………… 36 42、Ext.SplitButton类 ……………… 38 43、Ext.CycleButton类 ……………… 39 44、Ext.form.BasicForm类 …………… 40 45、Ext.form.Field类 …………………… 41 46、Ext...

    基于springboot开发的前后端分离的简易进销存后台管理系统.zip

    基于springboot的java毕业&课程设计

    基于springboot-mqtt的温度、湿度、六氟化硫浓度实时监控系统.zip

    基于springboot的java毕业&课程设计

    会计信息化对华强公司内部审计的影响研究.docx

    会计信息化对华强公司内部审计的影响研究.docx

    修改谷歌提供的样例量子卷积神经网络模型，基于KDD99数据集进行训练，实现了网络攻击分类检测。.zip

    卷积神经网络（Convolutional Neural Networks, CNNs 或 ConvNets）是一类深度神经网络，特别擅长处理图像相关的机器学习和深度学习任务。它们的名称来源于网络中使用了一种叫做卷积的数学运算。以下是卷积神经网络的一些关键组件和特性： 卷积层（Convolutional Layer）： 卷积层是CNN的核心组件。它们通过一组可学习的滤波器（或称为卷积核、卷积器）在输入图像（或上一层的输出特征图）上滑动来工作。 滤波器和图像之间的卷积操作生成输出特征图，该特征图反映了滤波器所捕捉的局部图像特性（如边缘、角点等）。 通过使用多个滤波器，卷积层可以提取输入图像中的多种特征。 激活函数（Activation Function）： 在卷积操作之后，通常会应用一个激活函数（如ReLU、Sigmoid或tanh）来增加网络的非线性。 池化层（Pooling Layer）： 池化层通常位于卷积层之后，用于降低特征图的维度（空间尺寸），减少计算量和参数数量，同时保持特征的空间层次结构。 常见的池化操作包括最大池化（Max Pooling）和平均池化（Average Pooling）。 全连接层（Fully Connected Layer）： 在CNN的末端，通常会有几层全连接层（也称为密集层或线性层）。这些层中的每个神经元都与前一层的所有神经元连接。 全连接层通常用于对提取的特征进行分类或回归。 训练过程： CNN的训练过程与其他深度学习模型类似，通过反向传播算法和梯度下降（或其变种）来优化网络参数（如滤波器权重和偏置）。 训练数据通常被分为多个批次（mini-batches），并在每个批次上迭代更新网络参数。 应用： CNN在计算机视觉领域有着广泛的应用，包括图像分类、目标检测、图像分割、人脸识别等。 它们也已被扩展到处理其他类型的数据，如文本（通过卷积一维序列）和音频（通过卷积时间序列）。 随着深度学习技术的发展，卷积神经网络的结构和设计也在不断演变，出现了许多新的变体和改进，如残差网络（ResNet）、深度卷积生成对抗网络（DCGAN）等。

    用泽尼克多项式拟合表面的功能matlab代码.zip

    1.版本：matlab2014/2019a/2021a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。

    毕业设计基于java+Springboot+协同过滤的新闻推荐系统源码+全部资料（高分项目）.zip

    毕业设计基于java+Springboot+协同过滤的新闻推荐系统源码+全部资料（高分项目本资源中的源码都是经过本地编译过可运行的，评审分达到95分以上。资源项目的难度比较适中，内容都是经过助教老师审定过的能够满足学习、使用需求，如果有需要的话可以放心下载使用。 【备注】 1、该项目是个人高分毕业设计项目源码，已获导师指导认可通过，答辩评审分达到95分 2、该资源内项目代码都经过测试运行成功，功能ok的情况下才上传的，请放心下载使用！ 3、本项目适合计算机相关专业(如软件工程、计科、人工智能、通信工程、自动化、电子信息等)的在校学生、老师或者企业员工下载使用，也可作为毕业设计、课程设计、作业、项目初期立项演示等，当然也适合小白学习进阶。 4、如果基础还行，可以在此代码基础上进行修改，以实现其他功能，也可直接用于毕设、课设、作业等。毕业设计基于java+Springboot+协同过滤的新闻推荐系统源码+全部资料（高分项目毕业设计基于java+Springboot+协同过滤的新闻推荐系统源码+全部资料（高分项目毕业设计基于java+Springboot+协同过滤的新闻推荐系统源码+全部资

    基于vue可视化前段开发的拖拽编辑，页面生成工具.zip

    基于vue可视化前段开发的拖拽编辑，页面生成工具.zip

    HLC直播视频流播放器

    HLC直播视频播放器示例代码，代码2021年的时候因工作需要实现，参考网上资源采用了jquery等框架。

    基于卷积循环神经网络的数字识别.zip

    基于卷积循环神经网络的数字识别

    课设毕设基于SpringBoot+Vue的家具销售电商平台 LW+PPT+源码可运行.zip

    课设毕设基于SpringBoot+Vue的家具销售电商平台 LW+PPT+源码可运行.zip

    2007开关稳压电源（E题）.doc

    包含作品的设计论文doc文档，可直接修改，适合于电赛备赛、课程设计、毕设参考等。 摘 要 该电源以单端反激式DC-DC变换器为核心。市电通过自耦式调压器，隔离变压器，整流滤波后产生直流电压，经DC-DC变换得到题目所需输出电压，实现了开关稳压电源的设计。DC-DC变换器采用脉宽调制器（PWM）UC3842，通过调节占空因数使得输出电压UO在30V～36V范围内可调；微控制器与键盘显示构成了控制显示模块，能对输出电压进行键盘设定和步进调整，并显示输出电压、电流的测量和数字显示功能，形成了良好的人机界面。 关键词：DC-DC变换器，脉宽调制器（PWM）

    520节日画图代码.zip

    520是每年的5月20日，因数字“520”与“我爱你”发音相似而被许多年轻人用作表达爱意的节日。这个节日起源于中国互联网文化，逐渐传递到其他国家和地区。在这一天，情侣们通常会互送礼物、发表情、或者举行浪漫的活动来庆祝爱情。快来领取专属于程序员的浪漫吧！表白的套路很多，但都少不了送花送礼物，作为一个程序员，搞不懂现在流行的泡泡机、小猪、重力感应车等玩具，也不想去让朋友们去送钱炫耀，毕竟真情才重要，钱就物质了。我能给各位单身粉丝们做的可能就只有分享几个表白代码了，在电脑上敲上几行代码，让她在郁闷的周一得到一个大大的惊喜，很简单，一看就会，如果现在用不到也不要紧，先收藏起来，反正这样的节日很多，以后用的时候能找到。

    带你学AI基于PP-OCR和ErnieBot的字幕提取和智能视频问答

    本次分享将带领大家从 0 到 1 完成一个基于 OCR 和 LLM 的视频字幕提取和智能视频问答项目，通过 OCR 实现视频字幕提取，采用 ErnieBot 完成对视频字幕内容的理解，并回答相关问题，最后采用 Gradio 搭建应用。本项目旨在帮助初学者快速搭建入门级 AI 应用，并分享开发过程中遇到的一些坑，希望对感兴趣的同学提供一点帮助。 参考https://blog.csdn.net/u010522887/article/details/139025542，跟随笔者共同走完一个完整的视频问答项目，从基础的动手跑通 CRNN 文本识别任务，再到应用开发和部署，旨在帮助初学者快速入门 OCR 相关技术并搭建一个简单的应用。 资源包包括前端文档中提到的源码和示例视频。 本系列的后续文章将沿袭这一思路，继续分享更多采用 Paddle 深度学习框架服务更多产业应用的案例。如果对你有帮助，欢迎 **关注 收藏** 支持

    毕设设计-学生宿舍管理系统 基于SpringBoot实现，界面简洁，功能完善

    毕设设计-学生宿舍管理系统 基于SpringBoot实现，界面简洁，功能完善 主要功能 ● 定位打卡、宿舍智能分配、学生信息管理、资讯管理（权限设计）等 使用 ● mysql、git、springboot ● 数据库初始化sql存储在doc文件夹下面 设计一个基于Spring Boot的学生宿舍管理系统，你需要确保系统既满足实用性，又保证界面简洁、功能完善。以下是一个基本的设计方案，包括系统的功能模块、技术栈选择和界面设计要点。 ### 功能模块 1. **用户认证模块**： - 登录/登出功能。 - 用户权限管理（如学生、宿舍管理员、系统管理员）。 2. **学生信息管理**： - 学生基本信息录入、查询、修改和删除。 - 宿舍分配与调换。 3. **宿舍楼管理**： - 宿舍楼信息维护。 - 宿舍房间信息管理。 4. **维修报修管理**： - 学生报修申请。 - 维修状态跟踪。 5. **来访登记管理**： - 来访人员登记。 - 访问记录查询。 6. **公告与通知发布**： - 发布宿舍相关公告和通知。

    一个前后端分离的仿知乎问答论坛.zip

    基于springboot的java毕业&课程设计

    课程设计 基于Python的机器学习的人脸识别系统的设计与实现+详细文档+全部资料（高分项目）.zip

    课程设计 基于Python的机器学习的人脸识别系统的设计与实现+详细文档+全部资料（高分项目）.zip本资源中的源码都是经过本地编译过可运行的，评审分达到95分以上。资源项目的难度比较适中，内容都是经过助教老师审定过的能够满足学习、使用需求，如果有需要的话可以放心下载使用。 【备注】 1、该项目是个人高分毕业设计项目源码，已获导师指导认可通过，答辩评审分达到95分 2、该资源内项目代码都经过测试运行成功，功能ok的情况下才上传的，请放心下载使用！ 3、本项目适合计算机相关专业(如软件工程、计科、人工智能、通信工程、自动化、电子信息等)的在校学生、老师或者企业员工下载使用，也可作为毕业设计、课程设计、作业、项目初期立项演示等，当然也适合小白学习进阶。 4、如果基础还行，可以在此代码基础上进行修改，以实现其他功能，也可直接用于毕设、课设、作业等。课程设计 基于Python的机器学习的人脸识别系统的设计与实现+详细文档+全部资料（高分项目）.zip课程设计 基于Python的机器学习的人脸识别系统的设计与实现+详细文档+全部资料（高分项目）.zip课程设计 基于Python的机器学习的人脸

    基于springboot+thymeleaf构建的保险出单系统(含后台管理系统).zip

    基于springboot的java毕业&课程设计

Magicbox
Global site tag (gtag.js) - Google Analytics