ext.form.field.combobox tooltip 항목에 있습니다
문제
아래 콤보 코드는 다음과 같습니다.
Ext.define('Grade', {
extend: 'Ext.data.Model',
fields: [
{ name: 'id', type: 'int' },
{ name: 'name', type: 'string' }
]
});
Ext.define('GradeCombo', {
extend: 'Ext.form.field.ComboBox',
alias: 'widget.gradecombo',
queryMode: 'local',
valueField: 'id',
displayField: 'name',
store: {
model: 'Grade',
data: [
{ id: 1, name: 'A' },
{ id: 2, name: 'B' },
{ id: 3, name: 'C' }
]
}
});
.
여기에는 콤보를위한 레이아웃 코드가 있습니다.
Ext.onReady(function(){
Ext.widget('panel', {
renderTo: 'pan1',
title: 'Basic Panel',
width:300,
height:100,
defaults: {
bodyPadding: 10,
border: false,
xtype: 'panel',
layout: 'anchor'
},
layout: 'hbox',
items: [{
fieldLabel: 'Grade',
xtype: 'gradecombo',
width: 234
}]
});
});
.
사용자가 콤보 항목의 드롭 다운에서 마우스를 마우스에 올 때 각 등급의 설명을위한 툴팁 메시지를 표시하고 싶습니다.설명 저장소가 있습니다.
var store = ['Marks between 70 and 80', 'Marks between 60 and 70', 'Marks between 50 and 60'];
.
이를 달성하는 방법을 알려주십시오.
감사합니다.
해결책
기본적으로 설정할 수있는 툴팁 속성이 있지만 다음과 같은 ComboBox ListConfig 속성의 getInnertpl 메서드를 재정의하여 드롭 다운 목록에 표시되는 것을 완전히 사용자 정의 할 수 있습니다.
listConfig: {
loadingText: 'Searching...',
emptyText: 'No matching posts found.',
// Custom rendering template for each item
getInnerTpl: function() {
return '<a class="search-item" href="http://www.sencha.com/forum/showthread.php?t={topicId}&p={id}">' +
'<h3><span>{[Ext.Date.format(values.lastPost, "M j, Y")]}<br />by {author}</span>{title}</h3>' +
'{excerpt}' +
'</a>';
}
}
.
전체 코드 샘플 : http://docs.sencha.com/ext-js/4-1/extjs-build/examples/form/forum-search.js
와 가장 중요한 것은 팁 자체입니다.템플릿에서 생성중인 요소에 다음 HTML 속성을 추가하십시오. Data-QTIP="이것은 마크 업에서 빠른 팁입니다!"다음 지침에 따라 툴팁을 제어 할 수 있습니다. http://docs.sencha.com/ext-js/4-1/#!/api/ext.tip.quickmanager
제휴하지 않습니다 StackOverflow