Question

我如何阻止 qtip在grid cell上显示＆＃34; large＆＃34; data不适合宽度？（在 ExtJS 6.5.2 - 现代工具包）

示例

将此添加到sencha小提琴：

 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;

并设置网格＆＃34;变量高度＆＃34;为真：http://docs.sencha.com/extjs/6.5.1/modern/Ext.grid.Grid.html#cfg-variableHeights

注意：在小提琴中，使用网格＆＃34; cls＆＃34;来应用CSS规则。 config param，样式放在index.html

中

防止显示qtip

1 个答案: