防止qtip显示

Question

如何防止 qtip 在 grid cell 上显示 "large" data不适合它的宽度？（关于 ExtJS 6.5.2 - 现代工具包）

例子

将此添加到 sencha fiddle:

 Ext.application({
    name : 'Fiddle',

    launch : function() {
        var store = Ext.create('Ext.data.Store', {
    fields: ['name', 'email', 'phone'],
    data: [
        { 'name': 'Lisaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa',  "email":"lisa@simpsons.com",  "phone":"555-111-1224"  },
        { 'name': 'Bart',  "email":"bart@simpsons.com",  "phone":"555-222-1234" },
        { 'name': 'Homer', "email":"home@simpsons.com",  "phone":"555-222-1244" },
        { 'name': 'Marge', "email":"marge@simpsons.com", "phone":"555-222-1254" }
    ]
    });

    Ext.create('Ext.grid.Grid', {
    title: 'Simpsons',

    store: store,

    columns: [
        { 
            text: 'Name',  
            dataIndex: 'name', 
            minWidth: 200, 
            //flex: 1,
            //cellWrap: true,
            cell: {
                bodyStyle: {
                    whiteSpace: 'normal'
                }
            }
        },
        { text: 'Email', dataIndex: 'email', flex: 2, minWidth: 250 },
        { text: 'Phone', dataIndex: 'phone', flex: 1,  minWidth: 120 }
    ],

    //height: 200,
    //layout: 'fit',
    fullscreen: true
    });
    }
    });

Answer 1

没有工具提示的网格

默认换行但没有工具提示，演示：https://fiddle.sencha.com/#view/editor&fiddle/29ii

具有环绕功能的网格

演示：https://fiddle.sencha.com/#view/editor&fiddle/29if

简而言之，您需要设置这些规则来包装内容：

white-space: normal;
word-break: break-word;

并将网格的 "variableHeights" 设置为真：http://docs.sencha.com/extjs/6.5.1/modern/Ext.grid.Grid.html#cfg-variableHeights

注意：在 fiddle 中，CSS 规则使用网格的 "cls" 配置参数应用，样式放置在 index.html

中

防止qtip显示

Prevent qtip from showing

javascript

grid

extjs

tooltip