`
babydeed
  • 浏览: 238018 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

ext grid 单元格提示 出现图片

    博客分类:
  • Ext
阅读更多

代码简单 只是记录一下

 

  <html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=gbk">
        <title>03.grid</title>
        <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
        <script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
        <script type="text/javascript" src="../../ext-all.js"></script>
        <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){
			return "<div ext:qtip='<img src=\""+value+"\" width=100 hight=100/>'>"+value+"</div>";
		}}
    ]);

    var data = [
        ['1','name1','14-01.png'],
        ['2','name2','14-01.png'],
        ['3','name3','14-01.png'],
        ['4','name4','14-01.png'],
        ['5','name5','14-01.png']
    ];

    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: 'grid',
        store: store,
        cm: cm
    });

});
        </script>
    </head>
    <body>
        <div id="grid"></div>
    </body>
</html>

 

 

 

  • 大小: 10.9 KB
分享到:
评论

相关推荐

    Ext grid合并单元格

    根据提供的文件信息,我们可以深入探讨如何在 Ext JS 中实现 Grid 的单元格合并功能。此案例主要涉及到了自定义 GridView 的 `renderHeaders` 方法来达到单元格合并的目的,并且还涉及了模板(Template)的使用、...

    Ext合并单元格

    首先,我们要了解Ext JS中的Grid Panel是实现合并单元格的主要组件。Grid Panel是一个用于显示大量结构化数据的灵活控件,通过使用Store来存储数据,ColumnModel来定义列的布局和格式。 1. **合并策略**:在Ext JS...

    ext grid 合并行

    1. **理解EXT Grid的结构**:EXT Grid由一系列的行(Row)和列(Column)组成,每一行包含多个单元格(Cell)。行合并涉及将多个行的单元格合并为一个大单元格。 2. **自定义Renderer**:首先,我们需要创建一个...

    extjs单元格无法复制

    解决 ExtJS GridPanel 单元格无法选中复制的问题需要两个步骤:添加新的 CSS 样式和修改 Ext.grid.GridPanel 的 prototype。通过这些步骤,我们可以使得单元格的内容可以被选中和复制,从而提高用户体验。

    ext表格合并单元格的方法

    ### ext表格合并单元格的方法 #### 背景与概述 在进行Web开发时,特别是在使用Ext JS框架处理表格数据展示的过程中,经常会遇到需要合并单元格的情况。这不仅可以提升数据展示的美观性,还能增强数据的可读性和...

    Ext自定义Grid Cell插件

    在实际开发中,我们有时需要在Grid的单元格(Cell)中添加更丰富的交互元素,例如输入框、下拉选择器等,这时就涉及到了`Ext Grid CellEdit`的概念。`CellEdit`允许我们在单个单元格中进行编辑,而不是整个行,提高...

    一个很好的EXTGRID实例

    5. **编辑功能**:EXTGRID可以配置为行编辑或单元格编辑模式,方便用户直接在网格中添加、修改和删除数据。 6. **扩展性**:EXTGRID支持各种插件和扩展,如工具栏、分组视图、拖放功能、树形网格等,增强功能和交互...

    Ext的用户扩展控件-----可以在表格的单元格上弹出提示层信息

    "Ext的用户扩展控件-----可以在表格的单元格上弹出提示层信息"是一个专门为EXT的Grid组件设计的功能增强插件,它使得用户在鼠标悬停于表格的特定单元格时,能够显示更详细的信息提示,极大地提升了数据展示的交互性...

    EXT GridPanel获取某一单元格的值

    在EXT GridPanel中,获取某一单元格的值是常见的操作,特别是在实现自定义事件处理或数据验证时。 在提供的代码段中,我们看到一个监听`cellclick`事件的例子,这是EXT GridPanel中用于捕获用户点击单元格时的事件...

    ext grid 显示数据

    在EXT JS这个强大的JavaScript框架中,Grid组件是用于展示大量结构化数据的核心组件。"ext grid 显示数据"这一主题,是深入理解EXT JS开发的关键知识点之一,特别是在处理表格和列表展示时。在"LearningExtJS 第五...

    EXT grid导出EXCEL

    EXT Grid是一款基于JavaScript的强大的...在实际开发中,EXT Grid导出Excel的功能可以根据项目需求进行定制,例如添加自定义样式、合并单元格、设置条件格式等。理解上述步骤后,你可以根据具体需求进行扩展和优化。

    ext超酷的grid中放图片(ext3.2.1)

    标题"ext超酷的grid中放图片(ext3.2.1)"暗示了我们将探讨如何在EXT JS的Grid组件中嵌入和展示图片。EXT JS 3.2.1虽然已经是较旧的版本,但其核心概念和方法在后续版本中仍然适用,因此学习这部分内容对于理解EXT JS...

    ext grid 导出excel 代码实例

    - 处理样式和格式:EXT Grid的样式无法直接应用于Excel,所以你可能需要在构建Excel文件时指定单元格的样式。 - 处理大数据量:如果数据量过大,可能需要分批导出或者使用服务器端处理。 - 支持国际化:考虑不同语言...

    Ext4 grid打印

    Ext4 Grid打印是基于Ext JS库的一个功能,用于在网页中展示数据的表格组件。Ext4 Grid提供了丰富的功能,包括数据排序、筛选、分页以及列的动态调整等。在这个场景下,"grid打印"指的是将Grid中的数据导出或者可视化...

    Ext中的Grid控制纵向滚动条单次滚动量

    在处理大数据集时,Grid往往会出现纵向滚动条,以方便用户浏览表格内容。当数据行数非常多时,用户可能希望自定义滚动条的滚动量,即单次滚动鼠标滚轮时,Grid表格移动的行数。这涉及到对Grid Panel的滚动行为进行...

    Ext Grid导出Excel

    在IT行业中,Ext Grid是一款广泛使用的JavaScript组件,它允许开发者创建功能丰富的数据表格。这篇博客“Ext Grid导出Excel”探讨的主题是如何将Ext Grid中的数据显示在Microsoft Excel文件中,这在数据分析、报告...

    Ext框架的Grid使用介绍

    7. **插件支持**:EXT JS Grid有多种插件,如CellEditing用于单元格编辑,RowExpander用于行展开显示更多信息,RowBody用于在行内显示额外内容。 8. **响应式设计**:EXT JS的Grid支持响应式布局,自动适应不同屏幕...

    jq-extgrid表格插件

    **jq-extgrid表格插件详解** jq-extgrid是一款基于jQuery的强大的表格插件,它极大地扩展了基础的jQuery grid功能,提供了丰富的特性以满足复杂的表格展示需求。在Web开发中,尤其是在数据展示和操作上,jq-extgrid...

    在Ext的grid里实现带radio单选功能的gridlist

    在Ext JS这个强大的JavaScript框架中,开发人员经常需要创建数据展示组件,比如Grid,来显示大量数据并提供交互性。Grid List是Grid的一种扩展,它不仅具有基本的表格功能,还可以进行更复杂的操作。本教程将详细...

Global site tag (gtag.js) - Google Analytics