Ext.tip.Tooltip 提示
1.最简单的提示
[html]
<div id="tip1" class="TipDiv">普通提示</div>
[js]
1 Ext.create('Ext.tip.ToolTip', { 2 target: 'tip1', 3 html: '最简单的提示' 4 });
2.可关闭的提示
[html]
1 <div id="tip2" class="TipDiv">不自动隐藏</div>
[js]
1 Ext.create('Ext.tip.ToolTip', { 2 target: 'tip2', 3 html: '请点击关闭按钮', 4 title: '标题', 5 autoHide: false, 6 closable: true, 7 draggable: true //可以允许被拖动 8 });
3.Ajax提示,提示的内容来自服务端
[html]
<div id="tip3" class="TipDiv"> Ajax提示</div>
[js]
Ext.create('Ext.tip.ToolTip', { target: 'tip3', width: 200, autoLoad: { url: 'AjaxTipData', params: { data: "测试参数"} }, dismissDelay: 15000 //15秒后自动隐藏 });
4.提示跟随鼠标移动
[html]
1 <div id="tip4" class="TipDiv">跟随鼠标</div>
[js]
1 Ext.create('Ext.tip.ToolTip', { 2 target: 'tip4', 3 html: '跟随鼠标的提示', 4 trackMouse: true // 跟随鼠标移动 5 });
5.带箭头的提示
[html]
1 <div id="tip6" class="TipDiv">指定提示方向</div>
[js]
1 Ext.create('Ext.tip.ToolTip', { 2 target: 'tip6', 3 anchor: 'buttom', //指定箭头的指向 top,left,right 4 width: 120, 5 anchorOffset: 50, //指定箭头的位置 6 html: '带箭头的提示,并指定方向' 7 });
5.图文并茂的提示内容
[<div id="tip7" class="TipDiv"> 高级自定义</div>
<div style="display:none;">
<div id="tipContent">
<ul> <li>提示项1</li>
<li>提示项2</li>
<li>提示项3</li>
<li>提示项4</li>
</ul>
<img src="http://www.cnblogs.com/Img/Ext/house.jpg" alt="图片" />
</div>
</div>
[js]
Ext.create('Ext.tip.ToolTip', { title: '<a href="#">链接式标题</a>', id: 'toolTip7', target: 'tip7', anchor: 'left', html: null, width: 415, autoHide: false, closable: true, contentEl: 'tipContent', //用id为tipContent的html标签内容作为提示信息 listeners: { 'render': function () { this.header.on('click', function (e) { e.stopEvent(); Ext.Msg.alert('提示', '标题被点击.'); Ext.getCmp('toolTip7').hide(); }, this, { delegate: 'a' }); } } });
在extjs控件上使用提示
Ext.QuickTips.init(); Ext.create("Ext.Button", { renderTo: Ext.get("tipdiv"), text: "按钮上的快速提示", tooltip: "提示信息" });
1 //按钮上的自定义提示 2 Ext.create("Ext.Button", { 3 renderTo: Ext.get("tipdiv"), 4 text: "按钮上的自定义提示", 5 id: "bt1" 6 }); 7 Ext.create('Ext.tip.ToolTip', { 8 target: 'bt1', 9 anchor: 'buttom', 10 width: 120, 11 anchorOffset: 50, 12 html: '按钮上的自定义提示信息' 13 });
Grid 提示
Ext.getCmp('grid').getView().on('render', function (view) { view.tip = Ext.create('Ext.tip.ToolTip', { target: view.el, delegate: view.itemSelector, trackMouse: true, listeners: { beforeshow: function updateTipBody(tip) { tip.update('<b>时间:</b>' + view.getRecord(tip.triggerElement).get('inputtime') + ' ' + '<b>发布人:</b>' + view.getRecord(tip.triggerElement).get('Author') + '<br>' + '<br>' + '<b>标题:</b>"' + view.getRecord(tip.triggerElement).get('ArticleTitle') + '"<br>'); } } }); });