实现Ext的grid单元格数据过长换行显示

http://www.cnblogs.com/yqin/archive/2010/08/30/1812480.html

Grid的单元格对数据显示都是采用省略的办法来处理的，即内容长度超过单元格长度时自动隐藏超过的部分并使用省略号...来显示，这样虽然也很好，但有时我们可能还是希望它能完全的显示出来，即采用换行显示。

最简单的办法莫过于直接修改ext-all.css，但俺一般不侵入ext的源文件，那就自己用别的方法实现吧。

方法其实也很简单，判断该grid是否需要换行显示。如果是则加上这段代码：

1 
     dataGrid.store.on(
    '
    load
    '
    , 
    function
    ()

    2 
     {

    3 
          dataGrid.el.select(
    "
    table[class=x-grid3-row-table]
    "
    ).each(
    function
    (x) {

    4 
              x.addClass(
    '
    x-grid3-cell-text-visible
    '
    );

    5 
          });

    6 
     });

    7 
            
         

CSS文件内容：

1 
      
    <
    style type
    =
    "
    text/css
    "
    >
    

    2 
                

    3 
        .x
    -
    grid3
    -
    cell
    -
    text
    -
    visible .x
    -
    grid3
    -
    cell
    -
    inner{overflow:visible;padding:3px 3px 3px 5px;white
    -
    space:normal;}

    4 
        

    5 
      
    <
    /
    style>