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

基本表格GridPanel

阅读更多
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<html>
<head>
   <title></title>
   <meta http-equiv="content-type" content="text/html; charset=UTF-8">
   <script type="text/javascript" src="/test/extjs/adapter/ext/ext-base.js"></script>
   <script type="text/javascript" src="/test/extjs/ext-all.js"></script>
   <script type="text/javascript" src="/test/extjs/ext-all-debug.js"></script>
   <link rel="stylesheet" type="text/css" href="/test/extjs/resources/css/ext-all.css">
   <script type="text/javascript">
     function showUrl(value){
        return '<a href="http://'+value+'">'+value+'</a>';
     }
    
      Ext.onReady(function(){
        var data = [
          [1,'EasyJWeb','EasyJF','www.easyjf.com'],
          [2,'jfox','huihoo','www.huihoo.org'],
          [3,'jdon','jdon','www.jdon.com'],
          [4,'springside','springside','www.springside.org.cn']
       ];
       var store = new Ext.data.SimpleStore({
         data:data,
         fields:["id","name","organization","homepage"]
       });
       var colM = new Ext.grid.ColumnModel([
           {header:"项目名称:",dataIndex:"name",sortable:true},
           {header:"开发团队",dataIndex:"organization",sortable:true},
           {header:"网址",dataIndex:"homepage",renderer:showUrl}
       ]);
      
      var grid = new Ext.grid.GridPanel({
         renderTo:"hello",
         title:"中国Java开源产品及团队",
         height:150,
         width:600,
         cm:colM,
         store:store,
         autoExpandColumn:2
       });
      });
    </script>
</head>
<body>
     <div id="hello" style="margin-left:50px; margin-top:10px; align:center;"></div>
</body>
</html>
分享到:
评论

相关推荐

    ExtJS 2.0实用简明教程

    20)基本表格GridPanel 21)视图区ViewPort 22)可编辑表格EditorGridPanel 23)窗口基本应用 24)窗口分组 25)对话框 26)与服务器交互 27)Record 28)Store 29)TreePanel基本使用 30)使用树控件TreeNode 31)使用树控件...

    ExtJS 表格面板GridPanel完整例子

    首先,让我们理解GridPanel的基本结构。GridPanel通常由以下几个主要部分组成: 1. **Store**: 存储数据的模型,可以是本地JSON对象或远程服务器数据,通过Ajax请求获取。 2. **Model**: 定义数据字段和它们的数据...

    ExtJS2.0实用简明教程

    **四、基本表格GridPanel** `GridPanel`是ExtJS中非常重要的一个组件,常用于数据展示和操作。它能与服务器进行数据交互,支持行选择、编辑、排序等操作。开发者可以通过配置列模型、数据源、编辑器等实现个性化功能...

    ExtJs2.0简明教程

    #### 7.1 基本表格GridPanel GridPanel是用于显示表格数据的主要组件。它支持分页、排序、过滤等功能,并且可以通过配置项来自定义列和数据源。 #### 7.2 可编辑的表格EditorGridPanel EditorGridPanel是一种特殊...

    EXTJSEXT实例GridPanel.

    EXTJS的核心是其组件模型,GridPanel就是其中一种非常重要的组件,常用于展示数据表格。这个实例"EXTJSEXT实例GridPanel"旨在教授如何在EXTJS中创建并使用GridPanel。 GridPanel是EXTJS中的一个核心组件,它允许...

    Ext实现GridPanel内嵌行内嵌表格(RowExpander)

    在本文中,我们将深入探讨如何使用ExtJS库中的RowExpander插件来实现在GridPanel中内嵌行内的表格。ExtJS是一个强大的JavaScript框架,它提供了丰富的组件和功能,用于构建复杂的Web应用程序。RowExpander插件是...

    ext.net 动态创建gridpanel

    GridPanel 是 ExtJS(Ext.NET 的基础)中的一个重要组件,用于展示数据表格。在这个场景中,我们将深入探讨如何使用Ext.NET代码动态创建GridPanel,并在各种窗口中灵活展示。 1. **动态创建GridPanel**: 在Ext...

    gridPanel添加按钮

    `gridPanel`在诸如ExtJS、GWT或PrimeFaces等框架中常见,它们提供了丰富的功能来处理表格数据,包括排序、筛选、分页等。 首先,让我们了解`gridPanel`的基本结构。`gridPanel`由多个部分组成,如头部(header)、...

    Ext.grid.GridPanel属性祥解

    对于初学者或者希望深入理解`GridPanel`特性的Web开发人员来说,掌握其基本配置是非常重要的。 #### 二、Ext.grid.GridPanel主要配置项 1. **store** - 说明:`store`属性定义了表格的数据源。 - 示例:`store: ...

    Extjs入门教程(treePanel和GridPanel)

    GridPanel则是ExtJS中的表格视图组件,它可以展示大量的数据,并提供排序、筛选、分页等功能。在集成TreePanel和GridPanel时,可能涉及到的概念有:将TreePanel的节点与GridPanel的数据关联,实现点击树节点时动态...

    ExtJs设置GridPanel表格文本垂直居中示例

    首先,我们来看一下`GridPanel`的基本配置。在提供的代码片段中,`GridPanel`的配置对象包含了多个属性,如`xtype`, `id`, `frame`, `region`, `title`, `columnLines`, `loadMask`, `store`, `viewConfig`, `...

    Ext GridPanel 中实现加链接操作

    Ext GridPanel 是该框架中的一个重要组件,常用于展示表格数据。本文将详细介绍如何在 Ext GridPanel 中实现加链接操作,包括基本原理、代码实现及注意事项。 #### 一、Ext GridPanel 基础 在了解如何添加链接之前...

    改变gridpanel的行颜色

    在使用GridPanel组件进行数据展示时,为了提高可读性和用户体验,我们经常需要对表格中的某些行或单元格进行颜色上的区分。本文将详细介绍如何通过不同的方法来实现这一功能,包括在加载数据时改变列的颜色、加载...

    EXT GridPanel获取某一单元格的值

    EXT GridPanel是EXT JS库中的一个核心组件,用于创建数据密集型的表格视图。它在Web应用程序中常用于展示大量结构化数据,并提供多种交互功能,如排序、...这些基本操作对于EXT GridPanel的交互式应用开发至关重要。

    ExtJS4.0下的gridPanel组建完全版

    在ExtJS 4.0版本中,GridPanel组件是其核心特性之一,它允许开发者创建数据密集型的表格展示,提供了丰富的功能和定制选项。这篇内容将深入探讨GridPanel在ExtJS 4.0中的应用及其相关知识点。 首先,我们来看...

    Extjs2.02 Gridpanel

    GridPanel不仅能够处理基本的表格操作,如单选、多选、排序、改变列宽等,还支持更高级的功能,如单元格自定义渲染、本地和远程分页、行编辑、行添加和删除等。 首先,让我们深入了解EXTJS GridPanel的构建过程: ...

    gridpanel的使用

    GridPanel 是 ExtJS 框架中的一种基本组件,用于显示和操作数据集合。它提供了丰富的配置项和方法,方便开发者快速构建数据-grid 视图。 主要配置项 GridPanel 的主要配置项包括: * `store`: 表格的数据集,用于...

Global site tag (gtag.js) - Google Analytics