如题,所以我想做成每个选项都有鼠标悬停提示的,不知道该怎么做?谢谢
function ready()
{
Ext.QuickTips.init();
//分页ComboBox 只要设置pageSize属性即可
var store = new Ext.data.Store
({
proxy: new Ext.data.HttpProxy({url:"comboJson.aspx?Flag=0"}), // 数据源
reader: new Ext.data.JsonReader({totalProperty:"totalPorperty",root:"result",fields:[{name: 'ID'},{name: 'TypeCName'}]})// 如何解析
});
store.load({params:{start:0,limit:6}});
var comboBox = new Ext.form.ComboBox
({
[color=red] tpl: '<tpl for="."><div ext:qtip="提示:ID={ID};TypeCName={TypeCName}" class="x-combo-list-item">{TypeCName}</div></tpl>',[/color] id:"ComboBox_ID",
editable:true,//默认为true,false为禁止手写和联想功能
store:store,
emptyText:'请选择',
mode: 'remote',//指定数据加载方式,如果直接从客户端加载则为local,如果从服务器断加载 则为remote.默认值为:remote
typeAhead: true,
triggerAction: 'all',
valueField:'ID',
displayField:'TypeCName',
selectOnFocus:true,
renderTo:'hello',
width:240,
border:true,
frame:true,
resizable:true
});
}
Ext.onReady(ready);
使用jtip插件
[url=http://codylindley.com/blogstuff/js/jtip/]http://codylindley.com/blogstuff/js/jtip/[/url]
通过设置ListWidth属性即可固定combo下拉列表的宽度;
如果非要设置Tip可以参考我这段代码:
[code="js"]
<br> Ext.onReady(function(){<br> new Ext.form.ComboBox({<br> renderTo: 'combo',<br> emptyText: '请选择..',//提示字符串<br> forceSelection: true,//强制选择<br> triggerAction: 'all',//点击下拉按钮全部显示<br> mode:'local',<br> store: new Ext.data.ArrayStore({<br> fields:['id','name'],<br> data:[['1','aaa'],['2','bbb'],['3','ccc']]<br> }),<br> displayField:'id',<br> valueField:'id',<br> listeners: {<br> expand: {//只有expand之后才可获得view对象<br> fn: function(combo){<br> var view = combo.view;<br> var store = combo.getStore();<br> combo.tip = new Ext.ToolTip({<br> target: view.el, //整体目标对象<br> delegate: '.x-combo-list-item ',//每次选中list都显示Tip<br> trackMouse: true,<br> renderTo: document.body,//实例化时渲染到body元素<br> listeners: { //显示之前改变文本内容<br> beforeshow: function updateTipBody(tip){<br> var name = view.getRecord(tip.triggerElement).get('name');//获取对应Record对象的name值<br> tip.body.dom.innerHTML = 'Over Record ID '+name;<br> }<br> }<br> });<br> },<br> single:true//执行一次后销毁<br> }<br> }<br> });<br> });<br>
listwidth
加tpl属性即可