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.图文并茂的提示内容

[html]

<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') + '&nbsp;&nbsp;&nbsp;' + '<b>发布人:</b>' + view.getRecord(tip.triggerElement).get('Author') + '<br>' + '<br>' + '<b>标题：</b>"' + view.getRecord(tip.triggerElement).get('ArticleTitle') + '"<br>');
                }
            }
        });
    });

编辑器加载中...