ToolTip信息提示框

xtype: 'dataview',
                    reference: 'statisticalpanel',
                    width: document.documentElement.clientWidth - 35,
                    store: {
                        autoLoad: true,
                        type: 'statisticalstore'
                    },
                    listeners: {
                        'afterRender': 'statisticalstore'
                    },
                    itemTpl: [
                        '<table width="100%" cellspacing="0" cellpadding="0"><tr>' +
                        '<td style="width:49%;padding: 0 12px;"><table><tr>' +
                        '<td style="width:6.5%;"><i style="font-size: 2em;" class="fa fa-area-chart" ></i></td>' +
                        '<td style="width:8.5%;cursor: pointer;" id="sumnum" >' 
                        '<p style="text-align:center;font-size:18px;color:red;margin-top: 5px;padding-top:10px;border-right:1px solid #e3e4e4;">{num}项' +
                        '</br><span style="color:black;font-size:12px;text-align:center;margin: 0px;">总数</span></p></td>' +
                        '</tr></table></td>' +
                        '</tr></table>'
                    ]

//显示弹出框
    dataviewShowToolTip: function (idname) {
        Ext.Ajax.request({
            method: 'POST',
            url: Ext.getPath('/Contract/GetDataByParms'),
            params: {
                identifier: idname
            },
            success: function (response, opts) {
                response = JSON.parse(response.responseText);
                var html = '<table style="color:black;" cellpadding="0" cellspacing="0" width="100%">' +
                    '<tr>' +
                    '<td> 2</td>' +
                    '<td>1</td>' +
                    '<td>3</td>' +
                    '<td>4</td>' +
                    '</tr >';
                if (response.length > 0) {
                    Ext.Array.each(response, function (data) {
                        html += '<tr>' +
                            '<td> <div id=' + idname+'_'+ data.Id + ' tabindex="0" role="button" style="font-size:18px;height:18px;width:18px;cursor:pointer;" class="x-fa fa-eye" data-qtip="查看"></div></td>' +
                            '<td>' + data.Code + '</td>' +
                            '<td>' + data.Name + '</td>' +
                            '<td>' + data.Date + '</td>' +
                            '</tr >';
                    });
                    html += '</table>';
                    var tips = [{
                        target:idname,
                        anchor: 'left',
                        html: html,
                        width: 415,
                        autoHide: false,
                        closable: true,
                        style: 'background-color:#e8e8e8;border-color:#e8e8e8;',
                        listeners: {
                            'afterrender': function (me, eOpts) {
                                Ext.Array.each(response, function (data) {
                                    var dom = document.getElementById(idname + '_' + data.Id );
                                    dom.onclick = function () {
                                        (new Controller()).showDetail(data, '查看', 'detali');
                                    }
                                });
                            }
                        }
                    }];
                    this.tips = Ext.Array.map(tips, function (cfg) {
                        cfg.showOnTap = true;
                        return new Ext.tip.ToolTip(cfg);
                    });
                    
                }
            },
            failure: function () {
            }
        });

    },
    //afterRender提示框初始化
    statisticalstore: function (view) {
        var me = this;
        view.store.on('load', function (store, storedata, state, read) {
            for (var data in storedata[0].data) {
                if (data != "id")
                    me.dataviewShowToolTip(data);
            }
        });
    },
    //显示详情界面
    showContractDetail: function (data, title, type) {
        var record = Ext.create('record ', data);
        this.showDetailView(record, title, type);
    }

Ext.define('record', {extend: 'Ext.data.Model' });

猜你喜欢

转载自blog.csdn.net/qq_20426717/article/details/91428759