`
luck332
  • 浏览: 86370 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

扩展EXT.BUTTON

阅读更多
Ext.ux.ImageButton = function(cfg) {
    Ext.ux.ImageButton.superclass.constructor.call(this, cfg);
};

Ext.extend(Ext.ux.ImageButton, Ext.Button, {
    onRender : function(ct, position) {
        this.disabledImgPath = this.disabledImgPath || this.imgPath;
        var tplHTML = '<div><a href="###" class="image-btn"><span> {imgText:htmlEncode}</span></a></div>';
        var tpl = new Ext.Template(tplHTML);
        var btn, targs = {
            imgText : this.text || ""
        };

        btn = tpl.append(ct, targs, true);

        btn.on("click", this.onClick, this);

        this.el = btn;
        if (this.hidden) {
            this.hide();
        }
    },
    disable : function(newImgPath) {
        var replaceImgPath = newImgPath || this.disabledImgPath;
        if (replaceImgPath)
            this.el.dom.firstChild.src = replaceImgPath;
        this.disabled = true;
    },
    enable : function(newImgPath) {
        var replaceImgPath = newImgPath || this.imgPath;
        if (replaceImgPath)
            this.el.dom.firstChild.src = replaceImgPath;
        this.disabled = false;
    }
});
Ext.reg('imagebutton', Ext.ux.ImageButton);

.image-btn {background:url(./image/image_bg.gif) left 0;color:#222222;text-decoration:none;height:21px;float:left;cursor:hand;margin:0 5px 0 0;}
.image-btn:hover {background:url(./image/image_bg.gif) left -21px;text-decoration:none;height:20px;}
.image-btn span {background:url(./image/image_bg.gif) right 0;padding:1px 8px 0px 0;vertical-align:middle;margin:0 0 0 8px;float:left;line-height:20px;height:21px;}
.image-btn:hover span {background:url(./image/image_bg.gif) right -20px;color:#000;padding:1px 8px 0px 0;margin:0 0 0 8px;height:21px;}

 

分享到:
评论
1 楼 hhb_jonson 2010-02-23  
在傲游浏览器下不能用啊

相关推荐

    Ext.Button的扩展

    而"Ext.Button的扩展"则是在这个基础上进行了定制化开发,增加了更个性化的交互效果,比如在鼠标悬停时改变图片背景,从而提供更丰富的视觉体验。 在描述中提到的功能,即当鼠标移动到按钮上时,按钮的背景图片会...

    extjs4.1-ux.rar

    3、Ext.ux.upload.Button 4、Ext.ux.toggleslide.ToggleSlide 5、Ext.ux.container.ButtonSegment 6、Ext.ux.grid.plugin.RowEditing 7、Ext.ux.grid.plugin.DragSelector 8、Ext.ux.grid.plugin.SortMenu 9、Ext.ux...

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

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

    Ext Js权威指南(.zip.001

    6.1.7 扩展选择器 / 248 6.1.8 ext.domquery的使用方法 / 249 6.1.9 ext js选择器的总结 / 252 6.2 获取单一元素:ext.dom.element / 252 6.2.1 从错误开始 / 252 6.2.2 使用ext.get获取元素 / 253 6.2.3 ...

    EXT核心API详解.doc

    37. **Ext.SplitButton类**:分隔按钮,结合了普通按钮和下拉菜单的功能。 38. **Ext.CycleButton类**:循环按钮,可以循环切换多个状态或选项。 39. **Ext.form.BasicForm类**:基础表单类,管理表单的提交和验证...

    新版ext教程.pdf

    var button = Ext.create('Ext.button.Button', { text: '点击我', renderTo: Ext.getBody() }); button.on('click', function() { console.log('按钮被点击了!'); }); ``` #### 四、Ext框架的最佳实践 -...

    ExtJs_xtype一览

    - `splitbutton`:`Ext.SplitButton`,扩展了按钮,增加了下拉菜单的功能。 - `cycle`:`Ext.CycleButton`,一种特殊按钮,允许用户在预定义的选项之间循环切换。 - `buttongroup`:`Ext.ButtonGroup`,用于将多...

    ext常用注释

    使用 `Ext.extend` 可以方便地扩展现有的Ext组件类,创建新的组件类型。例如,创建一个搜索面板组件: ```javascript SearchPanel = Ext.extend(Ext.Panel, { constructor: function () { this.addEvents('...

    Ext常用属性总结

    例如,'panel'、'button'或'grid',这决定了组件的具体行为。 3. **renderTo** - 指定组件应渲染到哪个DOM元素。如果没有设置,组件会被添加到最近的父容器中。 4. **width** 和 **height** - 设置组件的尺寸。...

    extjs实现下拉框多选

    var clearButton = Ext.create('Ext.button.Button', { text: '清除', handler: function() { combo.setValue([]); } }); // 将按钮添加到组合框的工具栏 combo.tbar = [clearButton]; ``` 以上就是使用ExtJS...

    ExtJS3总结内容

    - `button`: `Ext.Button` - `buttongroup`: `Ext.ButtonGroup` - `colorpalette`: `Ext.ColorPalette` - `component`: `Ext.Component` - `container`: `Ext.Container` - `cycle`: `Ext.CycleButton` - `dataview`...

    ext面向对象和继承

    MyButton = Ext.extend(Ext.button.Button, { // 自定义方法和属性 initComponent: function() { MyButton.superclass.initComponent.call(this); // 调用父类方法 // 其他初始化操作 } }); // 创建实例 var ...

    老师整理的extjs学习笔记

    `Ext.grid.EditorGridPanel` 是一个扩展了 `Ext.grid.GridPanel` 的组件,允许直接在表格中编辑数据。它结合了表格视图和表单编辑功能,使得数据编辑变得更加直观。 #### 九、Ext.tree.TreePanel -- 树的使用 **...

    ExtJs xtype一览

    - **`button` (Ext.Button)**: 这是最基础的按钮组件。它可以用于触发事件,如点击操作等。 - **`splitbutton` (Ext.SplitButton)**: 这是一种带有下拉菜单的按钮组件。除了可以作为一个普通的按钮外,还可以展开一...

    关于ExtJS的工具栏动态添加按钮(从后台数据库读取信息).doc

    toolbar.add(Ext.create('Ext.button.Button', buttonCfg)); } toolbar.doLayout(); // 重新布局以显示新添加的按钮 } ``` 4. **处理点击事件**:根据服务器返回的数据,我们可能需要为每个按钮指定一个处理函数...

    在Ext的grid里实现带radio单选功能的gridlist

    Grid List是Grid的一种扩展,它不仅具有基本的表格功能,还可以进行更复杂的操作。本教程将详细介绍如何在Ext的Grid中实现带有radio单选功能的Grid List。 首先,我们需要理解Ext Grid的基本结构。一个Grid通常由...

    ExtJs4_笔记.docx

    - **Ext.Button**:详细介绍了按钮的各种形态和事件绑定。 - **Ext.MessageBox**:展示了不同类型的对话框,如警告、确认、输入等。 - **Ext.tip.ToolTip**:包括基本提示、快速提示以及控件上的提示使用。 - **Ext....

    EXT中文手册.pdf

    `Ext.get('myButton').on('click', function(){ alert("You clicked the button"); });`这段代码展示了如何绑定一个点击事件到一个按钮上,当按钮被点击时,会触发一个弹窗。 4. **元素样式操作**:Ext框架提供了...

Global site tag (gtag.js) - Google Analytics