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

少年阿郎

浏览: 38323 次
性别:

最近访客更多访客>>

ldl420783321

loren_mt

flying461

moon_lights

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

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

博客分类：

ExtJs

ext html javascript

<%@ 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="ext/resources/css/ext-all.css" />

<script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>

<script type="text/javascript" src="ext/ext-all.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>