`

extjs4动态列

 
阅读更多
  1. test.jsp
  2. <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>  
  3. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
  4. <html>  
  5.   <head>  
  6.     <title>动态生成表格</title>  
  7.     <meta http-equiv="pragma" content="no-cache">  
  8.     <meta http-equiv="cache-control" content="no-cache">  
  9.     <meta http-equiv="expires" content="0">      
  10.     <link rel="stylesheet" type="text/css" href="js/extjs-4.1.0/resources/css/ext-all.css">   
  11.     <script type="text/javascript" src="js/extjs-4.1.0/bootstrap.js"></script>    
  12.     <script type="text/javascript" src="js/extjs-4.1.0/locale/ext-lang-zh_CN.js"></script>  
  13.    
  14.     <script type="text/javascript">  
  15.         Ext.onReady(function(){  
  16.            
  17.             //创建表格,可以加入更多的属性。  
  18.             Ext.create("Ext.grid.Panel",{   
  19.                 title:'动态表格~~~~~~~~~~~',  
  20.                 width:400,  
  21.                 height:300,   
  22.                 id : 'configGrid',    
  23.                 name : 'configGrid',    
  24.                 columns : [], //注意此行代码，至关重要  
  25.                 displayInfo : true,    
  26.                 emptyMsg : "没有数据显示",    
  27.                 renderTo:'grid',//渲染到页面  
  28.                 forceFit: true   
  29.             });    
  30.                  
  31.             //通过ajax获取表头已经表格数据  
  32.                Ext.Ajax.request({    
  33.                    url: 'js/calmm/data.json',  //从json文件中读取数据，也可以从其他地方获取数据   
  34.                    method : 'POST',    
  35.                    success : function(response) {    
  36.                     //将返回的结果转换为json对象，注意extjs4中decode函数已经变成了：Ext.JSON.decode  
  37.                     var json = Ext.JSON.decode(response.responseText); //获得后台传递json    
  38.                       
  39.                     //创建store  
  40.                     var store = Ext.create('Ext.data.Store', {    
  41.                         fields : json.fields,//把json的fields赋给fields    
  42.                         data : json.data     //把json的data赋给data    
  43.                     });   
  44.                      
  45.                     //根据store和column构造表格  
  46.                     Ext.getCmp("configGrid").reconfigure(store, json.columns);    
  47.                     //重新渲染表格  
  48.                     Ext.getCmp("configGrid").render();    
  49.                    }   
  50.                });   
  51.                   
  52.         })         
  53.     </script>  
  54.   </head>  
  55.     
  56.   <body>  
  57.     <!-- 将表格渲染在此处 -->  
  58.     <div id="grid"></div>  
  59.   </body>  
  60. </html>  

 

数据文件，data.json:

  1. {    
  2.     'fields': [    
  3.         {'name': 'id', 'type': 'int'},    
  4.         {'name': 'name', 'type': 'string'},    
  5.         {'name': 'sex', 'type': 'string'},  
  6.         {'name': 'add', 'type': 'string'}  
  7.     ],  
  8.     'data': [    
  9.         {'id': '1', 'name': 'AAA', 'sex': '男','add':'SSS'},    
  10.         {'id': '2', 'name': 'BBB', 'sex': '男','add':'SSS'},     
  11.         {'id': '3', 'name': 'CCC', 'sex': '男','add':'SSS'},     
  12.         {'id': '4', 'name': 'DDD', 'sex': '女','add':'是'},     
  13.         {'id': '5', 'name': 'EEE', 'sex': '男','add':'撒的发生'}   
  14.     ],    
  15.     'columns': [    
  16.         {'header': '编号', 'dataIndex': 'id'},    
  17.         {'header': '姓名', 'dataIndex': 'name'},    
  18.         {'header': '性别', 'dataIndex': 'sex'},  
  19.         {'header': '地址', 'dataIndex': 'add'}  
  20.     ]    
  21. }  
分享到：
| 安装hadoop2.2.0
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    extjs 实现动态表头

    动态表头是ExtJS中一个高级特性，它允许开发者根据需要在运行时动态地创建和修改表格的列结构。这在处理数据展示和操作时具有很大的灵活性，尤其在数据字段不确定或需要自定义的情况下非常实用。 标题“extjs 实现...

    extjs 动态表格完整版

    4. **列动态添加和移除**：在运行时，可以使用`addColumn`和`removeColumn`方法动态添加或移除列，适应不同场景的需求。 5. **表格编辑**：ExtJS提供两种编辑模式，行编辑和单元格编辑。`Ext.grid.plugin....

    extjs实现动态树

    Accordion布局是ExtJS中的布局类型之一，允许在一个容器内多列垂直堆叠，每次只有一个面板展开。在动态树中，可以将树节点与Accordion布局关联，当点击节点时，对应的Accordion面板展开显示详细信息。 六、优化与...

    ExtJs动态grid的生成

    我们首先从标题"ExtJs动态grid的生成"开始，了解动态生成Grid的基本概念和实现方法。 动态生成Grid意味着在运行时根据需求创建和更新Grid组件，而不是在应用初始化时静态定义。这种灵活性允许开发者更好地响应数据...

    Extjs动态GRID

    1. 动态列创建与删除： EXTJS的Grid Panel支持在运行时动态添加或移除列。这可以通过调用`columns.add()`或`columns.remove()`方法实现。例如，你可以根据后端返回的数据结构来决定Grid中显示哪些列。此外，`...

    ExtJS文字按钮列

    在ExtJS中，"按钮列"（Button Column）是一种特殊的列类型，常用于表格面板，允许用户在每一行数据的特定列上执行操作。 标题提到的"ExtJS文字按钮列"是指在ExtJS表格中添加一列，该列包含的是文字按钮而非图片按钮...

    extjs动态生成表格,前台+后台

    4. Ext.Ajax.request：ExtJS提供的异步请求API，用于与服务器进行通信。 5. JSON：数据交换格式，用于传递后端返回的列信息。 6. 动态生成：通过JavaScript代码动态创建ColumnModel和Store，从而实现表格的动态生成...

    Ext grid 动态添加字段、列扩展

    Ext grid 动态添加字段、列扩展, 如何动态添加或者删除一个grid的列

    extjs4 treeGrid实例

    总的来说，ExtJS4 TreeGrid实例的创建涉及模型定义、数据存储、列配置和面板创建等多个环节，能够有效地呈现层次结构的报表数据，提供丰富的用户交互体验。在实际应用中，你可能需要根据具体需求调整和扩展这个基础...

    ExtJS4 doc文档

    ExtJS4是一款强大的JavaScript库，专门用于构建富客户端应用程序。这个文档集合包含了关于ExtJS4的详尽资料，是开发者学习和深入理解该框架的重要资源。文档覆盖了多个关键组件和概念，包括"data"（数据管理）、...

    ExtJS4 2学习 21 动态菜单与表格数据展示操作总结篇

    在"ExtJS4 2学习 21 动态菜单与表格数据展示操作总结篇"中，我们将深入探讨两个核心组件：动态菜单（Dynamic Menus）和表格数据展示（Grid Data Display），以及如何在实际应用中进行操作。 动态菜单在Web应用中...

    extjs 数据导出到Excel,数据列自选

    描述中提到“ASP.NET的EXTJS数据导出到EXCEL”，意味着后端使用了ASP.NET技术，这是一款微软提供的Web开发框架，用于构建动态网站、Web应用和服务。EXTJS与ASP.NET结合，可以在前端提供用户友好的界面，而后端负责...

    Extjs4.0 列隐藏和滚动条动态加载

    在ExtJS 4.0版本中，它提供了一系列功能，包括表格面板（Grid Panel）的列管理以及滚动条的动态加载。让我们深入探讨这些核心概念。 1. **列隐藏与显示** 在ExtJS 4.0中，表格面板允许用户动态隐藏或显示列，以...

    EXTJS 4 树形表格组件使用示例

    EXTJS 4是一款强大的JavaScript框架，用于构建富客户端应用程序。其中，树形表格组件（TreeGrid）结合了树形结构和表格数据展示的功能，能够帮助开发者以更直观的方式展示层次化数据。在EXTJS 4中，树形表格组件不仅...

    ExtJS实现动态读写Checkboxgroup

    总结起来，动态读写ExtJS的CheckboxGroup涉及创建CheckboxGroup、读取选中值、设置选中值以及监听变化。通过结合`ext-basex.js`文件，你可以构建出更复杂的交互式表单和应用程序。记住，始终关注用户需求和体验，...

    Extjs4的FormPanel从后台load json数据的要点

    在本篇文章中，我们将深入探讨如何使用Extjs4中的FormPanel组件从后台加载JSON数据，并将其映射到表单的各个字段中进行显示。这是一项非常实用的技术，尤其是在需要动态填充表单的情况下。 ### 一、Extjs4 ...

    extjs动态表格实例(封装GRID,从STRUTS2读取后台数据 )

    6. **动态列生成**：根据后台返回的列信息动态创建和配置Grid的列，这通常涉及到解析JSON数据中的列头信息。 7. **优化性能**：考虑使用分页（Paging）和延迟加载（Lazy Loading）来优化大数据量的加载，提高用户...

    ExtJS4如何自动生成控制grid的列显示、隐藏的checkbox

    在使用ExtJS4开发一个grid的时候，经常会遇到需要对grid的列进行动态的显示和隐藏操作，以适应不同的显示需求。ExtJS4中的gridpanel组件提供了一些内置的方法来控制列的可见性，但有时候需要一个更直观的方式来实现...

    extjs动态表头，绝对的好东西啊

    这个"extjs动态表头"的资源很可能是一个插件或组件，名为`Ext.ux.grid.DynamicGridPanel.js`，它扩展了ExtJS的标准GridPanel，增加了动态调整列的能力。 动态表头的核心功能包括： 1. **实时编辑**：用户可以在...

Magicbox
Global site tag (gtag.js) - Google Analytics