javascript - 防止显示 qtip

Question

如何防止 qtip 在包含“大”数据的网格 单元格上显示 不适合其宽度？ (关于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”设置为 true:http://docs.sencha.com/extjs/6.5.1/modern/Ext.grid.Grid.html#cfg-variableHeights

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