`

怎样在Ext.Button中增加图标

    博客分类:
  • ext
阅读更多
ExtJs的每一个组件(Component)在初始化的时候,都会有一个配置参数(Config)
{
在Ext2中,基本上所有的组件的构造函数只接受一个参数,
这个参数或者是一个Config Object或都是一个Array of Config Object
}

其中,许多组件,如Menu,Button都有一个配置选项iconCls(icon-class),很明显,这个是用来配置按钮等的图标的,所以假设我们要初始化一个Button,我们在JS里这样写:
var button = new Ext.Button({ 
        text: "Hello", 
        iconCls: "hello-button" 
});


然后我们再在CSS中写下如下规则:
.hello-button { 
        background: url(images/hello.png) left top no-repeat; 
}


把JS和CSS文件都正确的引入到页面当中后,我们只能看到按钮上空出来了一个放置图片的位置,而图片并没有显示出来,通过使用Firebug(http://www.getfirebug.com)来查看页面,通过Inspect我们生成的按钮的Style,我们发现CSS规则hello-button被Ext原有的CSS规则覆盖掉了。但是官方给的Sample里是可以用的啊,查看Sample里的CSS,我发现它比我写的多了一行字,!important,然后,我把我原有的CSS规则修正为:
.hello-button { 
        background: url(images/hello.png) left top no-repeat !important; 
}


Bingo~这次图片正确的显示在了按钮上。

当然,按照官方的API,你还有另外一种在按钮上添加图标的方法,将button的Config如下设置:
var button = new Ext.Button({ 
        text: "Hello", 
icon: "images/public.gif", 
        cls: "x-btn-text-icon" 
});


这样做的坏处在于,你必须将图片的位置写入到JS里,没有将表现的部分从JS里脱离,如果使用第一种方法的话,可以更容易的更改某个按钮的图标。






引自:
http://www.cnblogs.com/doublog/archive/2009/07/02/1515885.html


-
分享到:
评论

相关推荐

    ExtJs实用图标大全

    在ExtJs中,图标是提升用户界面美观度和交互性的重要元素,尤其对于按钮、菜单项、工具栏等组件,图标能够直观地表示功能,增强用户的认知。 "ExtJs实用图标大全"包含了近千个专为ExtJs设计的小图标,尺寸为16x16...

    Ext组件描述,各个组件含义

    **1.2 Button (Ext.Button)** - **xtype**: `button` - **功能描述**:Button 是一个简单的按钮控件,用于触发某些操作或事件。 - **主要用途**:用于各种用户交互操作,如提交表单、执行某个动作等。 **1.3 Color...

    EXTJS 项目图标

    Ext.create('Ext.button.Button', { text: '我的按钮', iconCls: 'x-fa fa-check', // 使用预定义的CSS类 // icon: 'path/to/icon.png', // 或者使用自定义的图片URL handler: function() { console.log('按钮...

    Ext_MessageBox

    根据给定的信息,我们可以深入探讨ExtJS中`Ext.MessageBox`组件的使用方法及特性。`Ext.MessageBox`是ExtJS框架中用于显示模态对话框的一个非常实用的功能组件,它可以用来展示提示信息、请求用户输入、确认操作等。...

    Ext2_Button示例

    在本示例“Ext2_Button”中,我们将聚焦于ExtJS 2.x版本中的按钮(Button)组件,它是ExtJS用户界面中的一个重要元素。 按钮组件在ExtJS中扮演着各种角色,如触发事件、导航、提交表单等。让我们深入了解一下ExtJS ...

    EXT 最新icon图标大集合,节省时间专用

    在标题和描述中提到的"EXT 最新icon图标大集合",意味着这个压缩包可能包含EXT JS或EasyUI最新版本中的各种图标资源。这些图标通常用于按钮、菜单项、工具栏以及其他用户界面元素,以提供视觉反馈和增强用户体验。...

    extjs小图标(项目小图标大全)

    在ExtJS中,小图标是用户界面中常见的元素,它们可以用来美化UI,指示状态,或者作为操作按钮。"extjs小图标(项目小图标大全)"这个资源集合了5000个专门用于ExtJS项目的图标,为开发者提供了广泛的选择,以满足不同...

    learning ext js 中文版之在对话框中添加图标和按钮事件

    "学习EXT JS中文版之在对话框中添加图标和按钮事件"这一主题深入探讨了如何为EXT JS的对话框(Modal Dialog)增添视觉吸引力和功能性,通过添加图标和响应式按钮事件来提升用户体验。 EXT JS中的对话框通常用于显示...

    EXT核心API详解.doc

    26. **Ext.data.MemoryProxy类**:内存数据代理,用于存储在内存中的数据。 27. **Ext.data.ScriptTagProxy类**:通过脚本标签加载远程数据的代理。 28. **Ext.data.DataReader类**:数据读取器,解析服务器返回的...

    Ext--MessageBox教程

    在上述代码中,`buttons: Ext.MessageBox.INFO`表示对话框显示的是一个信息图标,`fn`参数是回调函数,当用户点击按钮时执行。`buttonId`会返回用户点击的按钮标识,如'ok'(确定)、'yes'(是)或'no'(否)。 `...

    extjs弹出框 n秒后消失

    为了使弹出框在n秒后自动关闭,我们需要创建一个延时任务,并在任务中调用`Ext.MessageBox.hide`方法。延时任务的创建和启动可以通过`new Ext.util.DelayedTask(function() { ... })`和`delay`方法实现。以下是一个...

    ext 图标大全 icon 1000个常用图标

    在实际应用中,这些图标可以被直接集成到EXT应用中,通过CSS类名或者图片路径引用。例如,使用EXT的按钮组件(Ext.button.Button),可以通过配置`glyph`属性来设置图标,或者使用`ui`属性配合预定义的图标样式。...

    ext图标全集

    在实际开发中,除了基本的图标显示,还需要考虑图标在不同主题下的表现,EXT框架通常提供了多套主题供选择,图标颜色和样式会随主题变化。此外,图标在响应式设计中也很关键,确保在各种屏幕尺寸和设备上都能良好...

    Coolite的Button使用方法借鉴.pdf

    在Coolite框架中,Button控件不仅可以包含文本,还可以显示图标来增强其视觉效果。图标可以通过设置`Icon`属性或者`IconCls`属性来实现。`Icon`属性通常用于直接指定预定义的图标,而`IconCls`则允许你使用自定义的...

    extjs小图标

    在大型应用中,一次性加载所有图标可能会增加页面加载时间。因此,可以使用懒加载策略,只在需要时加载图标资源。 6. 5000个ExtJS小图标: 压缩包中的5000个图标可能包含多种样式和用途,可以根据需要选择并集成...

    Ext常用属性总结

    在IT行业中,ExtJS是一个广泛使用的JavaScript库,用于构建富客户端Web应用程序。它提供了一套完整的组件模型,包括各种UI控件和数据管理工具。本文将深入探讨"Ext常用属性总结"这一主题,帮助开发者更好地理解和...

    extjs帮助文档pdf版

    - `Ext.apply()`: 将一个对象的属性合并到另一个对象中。 #### 2. Array 类 (P.4) - **概述**:提供了一系列操作数组的方法。 - **常用方法**: - `Ext.Array.contains(array, item)`: 检查数组是否包含特定项。 ...

    ExtJs_xtype一览

    - `button`:`Ext.Button`,用于创建标准的按钮,可以包含文本、图标或两者都有。 - `splitbutton`:`Ext.SplitButton`,扩展了按钮,增加了下拉菜单的功能。 - `cycle`:`Ext.CycleButton`,一种特殊按钮,允许...

    Ext常用功能开发总结

    在本文中,我们将深入探讨基于ExtJS库的前端开发中的一些关键功能,特别是与表格相关的操作,以及对话框、弹出窗口和可伸缩面板的使用。ExtJS是一款强大的JavaScript框架,它为创建复杂的Web应用程序提供了丰富的...

Global site tag (gtag.js) - Google Analytics