ExtJs中gridPanle值浮动层显示不论是汉字,字符,还是数字都实现自动换行效果

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>

    <base href="<%=basePath%>">
   
    <title>My JSP 'index.jsp' starting page</title>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <!--
 <link rel="stylesheet" type="text/css" href="styles.css">
 -->
<link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css" />
<!-- EXT基础文件,此处为正式版本  -->
<script  type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>
<!-- EXT主文件,正式版本 -->
<script type="text/javascript" src="ext/ext-all.js"></script>

<script type="text/javascript" src="comm.js"></script>

  </head>
 
  <body>
    <script type="text/javascript"> 
 Ext.onReady(function(){

    Ext.QuickTips.init();
     var cm = new Ext.grid.ColumnModel([  
        {header:'编号',dataIndex:'id',width:35},  
        {header:'名称',dataIndex:'name',width:50},  
       {id:'descn',header:'描述',dataIndex:'descn',width:200,renderer:function(value){
       //第一种方式======================================单个使用====================================== 
            // var showTip ="<div style='word-break:break-all;word-wrap:break-word;'>"+value+"</div>";
           //alert(showTip);
           //alert('<div style="word-break:break-all; word-wrap:break-word;background-color:#FF0000;width:50px;" ext:qtip="'+aa+'">'+value+'</div>');
           // return '<div style="background-color:#FF0000; width:600px;" ext:qtip="'+showTip+'">'+value+'</div>';
        
        }}  
    ]);  
 
    var data = [  
        ['1','name1','我是个好人00000000000000000000000000000000000000000000000000000000hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhk精神力氟己定散浪费'],  
        ['2','name2','你好你好你好你哈你哈年后搜佛顶山减肥搜地sdfsdfdsfadsfdsfdsafadsfadsfasdfasssssssssssssssssssssssssss'],  
        ['3','name3','你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好1'],  
        ['4','name4','你好你好你好你哈你哈年后搜佛顶山减肥搜地方身份将圣灵丹方剂dsl疯狂桔色律动开飞机上浪费金轮大厦'],  
        ['5','name5','pngssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss']  
   ];  
 
    var store = new Ext.data.Store({  
        proxy: new Ext.data.MemoryProxy(data),  
        reader: new Ext.data.ArrayReader({}, [  
            {name: 'id'},  
            {name: 'name'},  
            {name: 'descn'}  
        ])  
    });  
    store.load();  
 
    var grid = new Ext.grid.GridPanel({  
        autoHeight: true,  
        renderTo: 'div1',  
        store: store,  
        cm: cm  
    });  
    });
 
  </script>
<div id="div1"></div>
  </body>
</html>

 

 

//这是本人想了一天没想出来,最后回去玩了会桌球之后,灵感来的!经验证完全符合要求的!比网上的说的更细!可以直接运行测试的!如有不明白之处,留言,或者QQ:309470574  为你解答

你可能感兴趣的:(JavaScript,html,ext)