extjs學習筆記--toolTip

時間 2019-12-01

標籤 extjs 學習筆記 tooltip 简体版

原文原文鏈接

今天學習了extjs中的tooltip和quicktip.javascript

(1)tooltip:

tooltip的config有：

對齊：trackMouse，mouseOffSet，anchor，anchorToTarget，anchorOffset，具體用法與詳解以下：

var store=Ext.create('Ext.data.ArrayStore', {

fields:['name','email','phone'],

data:[

['testone','testone@.com','123123123'],

['testtwo','testtwo@.com','456456456'],

['testthere','testthere@.com','789789789'],

['testfour','testfour@.com','123456789'],

['testfive','testfive@.com','987654321']

]

});

var grid=Ext.create('Ext.grid.Panel', {

title:'tooltip study',

width:400,

height:200,

store:store,

renderTo:'tooltip',

columns:[{

header:'姓名',

dataIndex:'name',

flex:1

},{

header:'郵箱',

dataIndex:'email',

flex:1

},{

header:'電話',

dataIndex:'phone',

flex:1

}],

tbar:[{

text:'save'

},'->',{

text:'select',

id:'select'

}]

});

grid.getView().on('render', function(view) {

view.tip=Ext.create('Ext.tip.ToolTip', {

target:view.el,//target 值爲元素或是id

delegate:view.itemSelector,

trackMouse:true,

renderTo:'tooltip',

listeners: {

beforeshow: function(tip) {

tip.update(view.getRecord(tip.triggerElement).get('email'));

}

})

});

var tip=Ext.create('Ext.tip.ToolTip', {

target:'select',

html:'select one row',

autoHide:true,//自動隱藏

showDelay:100,

hideDelay:200,

dismissDelay :0,

trackMouse:false,//true：隨着鼠標移動

mouseOffSet:[60,60],//從鼠標位置開始偏移(X/Y)

anchor:'right',//top,right,bottom,left

anchorToTarget:true,//false時，用anchor對齊，true時，用defaultAlign(默認值: "tl-bl?")對齊

defaultAlign:'t-b?',

anchorOffset:10,//anchor的值是top或bottom時，anchor arrow水平偏移；anchor值是left或right時，nchor arrow豎直偏移

closable : true,//有關閉按鈕

draggable: true//能夠拖動

})

注： grid中加入tooltip時，能夠經過監聽grid.getView的render事件來添加tooltip，而不能直接經過監聽grid的render事件來實現。

contentEl:從頁面也load內容。

（2）QuickTips

不管是使用Ext.tip.QuickTipManager.register仍是html Element建立QuickTips， 都必須先初始化全局的QuickTips---Ext.tip.QuickTipManager.init();

target Element的config：maxWidth，minwidth，showDelay，hideDelay，trackMouse，dismissDelay；
target Element的config：target（必需要有），text（必需要有的），title，width，dismissDelay，autoHide，cls；
html元素自動建立快速提示工具的config：
hide：對應autoHide=false；
* qclass:對應於cls；
* qtip：對應於text；(必須)
* qtitle：對應於title；
* qwidth：對應於width；

具體應用以下面例子：

Ext.onReady( function() {

Ext.tip.QuickTipManager.init();//初始化全局的QuickTips，爲建立QuickTips作準備

Ext.apply(Ext.tip.QuickTipManager.getQuickTip(), {

maxWidth:300,

minwidth:500,

showDelay:50,

hideDelay:50,

trackMouse:true,

dismissDelay:1000

});

Ext.create('Ext.panel.Panel', {