1

所以我正在尝试用图像替换 extjs 按钮并让它显示一些工具提示。问题是我只想显示图像而不想要 extjs 按钮的背景。下面是我的代码。要了解我在说什么，这里是 js 小提琴：http: //jsfiddle.net/nCkZN/7/

CSS：

.question {
    background-image: url(../www/css/slate/btn/question.png) !important;
    background-repeat: no-repeat;
}

Javascript：

{
    xtype: 'button',
    iconCls: 'question',
    tooltip: "<b>read-only</b>:Read-only users will have read only access to all pages<br> ",
    padding: '2 6 2 7',
    width: 20,
    height: 24
}

编辑：我用文本替换了按钮，只显示图像。但它不会显示工具提示。

{
    xtype: 'text',
    cls: 'question',
    tooltip: "<b>read-only</b>:Read-only users will have read only access to all pagess ",
    height: 20,
    padding: '12 6 2 7'
}
4

2 回答 2

6

您可以通过 CSS http://jsfiddle.net/nCkZN/10/修改按钮的外观

Ext.create('Ext.form.Panel', {
    title: 'Contact Info',
    width: 300,
    bodyPadding: 10,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'button',
        cls: 'my-btn', // Add this so you can style the button
        iconCls:'questionIcon',
        tooltip:"<b>read-only</b>:Read-only users will have read only access to all pages<br> ",
        padding: '2 6 2 7'                    
    }]
});​

CSS

.questionIcon {
  background-image:url(http://www.myimage.com/pic.png) !important;
  background-repeat: no-repeat;            
}

.my-btn {
  border-radius: 0;
  background-image: none;
  border: 0;
}

您也可以使用常规Ext.Img并向其添加工具提示。当您不想要按钮时，似乎比使用按钮更干净。http://jsfiddle.net/nCkZN/15/

Ext.create('Ext.form.Panel', {
    title: 'Contact Info',
    width: 300,
    bodyPadding: 10,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'image',
        src:'http://www.southampton.ac.uk/isolutions/computing/elearn/blackboard/small_pen.gif',
        padding: '2 6 2 7',
        listeners: {
            render: function(cmp) {
                Ext.create('Ext.tip.ToolTip', {
                    target: cmp.el,
                    html: "<b>read-only</b>:Read-only users will have read only access to all pages<br> "
                });
            }
        }
    }]
});​

您真正想要的是一种向任何组件添加工具提示的方法。这是一个插件来做到这一点。

Ext.define('Ext.ux.Tooltip', {
    extend: 'Ext.AbstractPlugin',
    alias: 'plugin.ux-tooltip',

    /**
     * @cfg html The text to put into the tooltip
     */
    init: function(cmp) {
        var me = this;
        cmp.on('render', function() {
            Ext.create('Ext.tip.ToolTip', {
                target: cmp.el,
                html: me.html
            });        
        });
    }
});

现在很容易向任何组件添加工具提示http://jsfiddle.net/nCkZN/17/

Ext.create('Ext.form.Panel', {
    title: 'Contact Info',
    width: 300,
    bodyPadding: 10,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'image',
        src:'http://www.southampton.ac.uk/isolutions/computing/elearn/blackboard/small_pen.gif',
        padding: '2 6 2 7',
        plugins: {
            ptype: 'ux-tooltip', 
            html: '<b>read-only</b>:Read-only users will have read only access to all pages<br> '
        }
    }]
});

​</p>

于 2012-12-12T19:17:06.343 回答
0

背景图片：网址（../www/css/slate/btn/question.png）！重要；

第一个问题是您的网址需要单引号。

在您的 jsfiddle 中，更改为：

.question{
  background-image:url('http://www.southampton.ac.uk/isolutions/computing/elearn/blackboard/small_pen.gif');
  background-repeat: no-repeat;
}​

其次，如果您实际上没有任何文本，您可能不想指定 iconCls，最好只传递一个 cls。我认为 iconCls 是如果您将图标作为配置传递。

于 2012-12-12T19:01:33.157 回答