extjs4 버튼을 이미지 문제로 바꿉니다

Question

그래서 extjs 버튼을 이미지로 바꾸고 툴팁을 표시하려고합니다. 문제는 이미지를 표시하려고하고 extjs 버튼의 배경을 원하지 않는다는 것입니다. 다음은 내 코드입니다. http://jsfiddle.net/nCkZN/7/

CSS :

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

자바 스크립트 :

{ 
    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 
} 

편집 : 내가 이야기하고있는 무슨의 아이디어를 얻으려면, 여기에 JS 바이올린입니다 나는 텍스트 버튼을 대체 그 이미지 만 보여줍니다. 그러나 툴팁을 표시하지는 않습니다.

{ 
    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' 
} 

Answer 1

당신은 당신이 대안 일반 Ext.Img를 사용하고에 툴팁을 추가 할 수 있습니다 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; 
} 

을 통해 버튼의 모양을 수정할 수 있습니다. 버튼을 원하지 않을 때 버튼을 사용하는 것보다 더 깨끗하게 보입니다. 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> ' 
     } 
    }] 
}); 

Answer 2

배경 이미지 : url (../ www/css/slate/btn/question.png)! important;

첫 번째 문제는 URL 주위에 작은 따옴표가 필요하다는 것입니다. 이 변경 당신의 jsfiddle에서

:

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

둘째, 당신은 아마 당신이 실제로 텍스트가없는 경우 iconCls를 지정하지 않는, 당신은 단지 CLS를 전달하는 것이 더 낫다 . iconCls는 아이콘을 설정으로 전달하는 것입니다.