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;}
分享到:
相关推荐
而"Ext.Button的扩展"则是在这个基础上进行了定制化开发,增加了更个性化的交互效果,比如在鼠标悬停时改变图片背景,从而提供更丰富的视觉体验。 在描述中提到的功能,即当鼠标移动到按钮上时,按钮的背景图片会...
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...
**1.2 Button (Ext.Button)** - **xtype**: `button` - **功能描述**:Button 是一个简单的按钮控件,用于触发某些操作或事件。 - **主要用途**:用于各种用户交互操作,如提交表单、执行某个动作等。 **1.3 Color...
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 ...
37. **Ext.SplitButton类**:分隔按钮,结合了普通按钮和下拉菜单的功能。 38. **Ext.CycleButton类**:循环按钮,可以循环切换多个状态或选项。 39. **Ext.form.BasicForm类**:基础表单类,管理表单的提交和验证...
var button = Ext.create('Ext.button.Button', { text: '点击我', renderTo: Ext.getBody() }); button.on('click', function() { console.log('按钮被点击了!'); }); ``` #### 四、Ext框架的最佳实践 -...
- `splitbutton`:`Ext.SplitButton`,扩展了按钮,增加了下拉菜单的功能。 - `cycle`:`Ext.CycleButton`,一种特殊按钮,允许用户在预定义的选项之间循环切换。 - `buttongroup`:`Ext.ButtonGroup`,用于将多...
使用 `Ext.extend` 可以方便地扩展现有的Ext组件类,创建新的组件类型。例如,创建一个搜索面板组件: ```javascript SearchPanel = Ext.extend(Ext.Panel, { constructor: function () { this.addEvents('...
例如,'panel'、'button'或'grid',这决定了组件的具体行为。 3. **renderTo** - 指定组件应渲染到哪个DOM元素。如果没有设置,组件会被添加到最近的父容器中。 4. **width** 和 **height** - 设置组件的尺寸。...
var clearButton = Ext.create('Ext.button.Button', { text: '清除', handler: function() { combo.setValue([]); } }); // 将按钮添加到组合框的工具栏 combo.tbar = [clearButton]; ``` 以上就是使用ExtJS...
- `button`: `Ext.Button` - `buttongroup`: `Ext.ButtonGroup` - `colorpalette`: `Ext.ColorPalette` - `component`: `Ext.Component` - `container`: `Ext.Container` - `cycle`: `Ext.CycleButton` - `dataview`...
MyButton = Ext.extend(Ext.button.Button, { // 自定义方法和属性 initComponent: function() { MyButton.superclass.initComponent.call(this); // 调用父类方法 // 其他初始化操作 } }); // 创建实例 var ...
`Ext.grid.EditorGridPanel` 是一个扩展了 `Ext.grid.GridPanel` 的组件,允许直接在表格中编辑数据。它结合了表格视图和表单编辑功能,使得数据编辑变得更加直观。 #### 九、Ext.tree.TreePanel -- 树的使用 **...
- **`button` (Ext.Button)**: 这是最基础的按钮组件。它可以用于触发事件,如点击操作等。 - **`splitbutton` (Ext.SplitButton)**: 这是一种带有下拉菜单的按钮组件。除了可以作为一个普通的按钮外,还可以展开一...
toolbar.add(Ext.create('Ext.button.Button', buttonCfg)); } toolbar.doLayout(); // 重新布局以显示新添加的按钮 } ``` 4. **处理点击事件**:根据服务器返回的数据,我们可能需要为每个按钮指定一个处理函数...
Grid List是Grid的一种扩展,它不仅具有基本的表格功能,还可以进行更复杂的操作。本教程将详细介绍如何在Ext的Grid中实现带有radio单选功能的Grid List。 首先,我们需要理解Ext Grid的基本结构。一个Grid通常由...
- **Ext.Button**:详细介绍了按钮的各种形态和事件绑定。 - **Ext.MessageBox**:展示了不同类型的对话框,如警告、确认、输入等。 - **Ext.tip.ToolTip**:包括基本提示、快速提示以及控件上的提示使用。 - **Ext....
`Ext.get('myButton').on('click', function(){ alert("You clicked the button"); });`这段代码展示了如何绑定一个点击事件到一个按钮上,当按钮被点击时,会触发一个弹窗。 4. **元素样式操作**:Ext框架提供了...