extjs学习笔记--toolTip
今天学习了extjs中的tooltip和quicktip.
(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；
<script type="text/javascript">
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', {
id:'test_panel',
title:'quicktip study',
width:200,
height:150,
renderTo:'quicktip'
});
Ext.tip.QuickTipManager.register({//Ext.tip.QuickTipManager.tips注册一个QuickTips
target:'test_panel',
title:'tooltip',
text:'this tooltip was added in code',
width:100,
dismissDelay:10000,//(重写QuickTips的config中的dismissDelay)
autoHide:true,
cls:''
});
})
</script>
</head>
<body>
<div id="quicktip" style="padding:30px;">
</div>
<input type="button" value="OK" data-qtitle="OK Button" data-qwidth="100"
data-qtip="This is a quick tip from markup!" data-qclass="padding:30px;">
</input>
</body>
