动态创建gridpanel

最新推荐文章于 2019-12-02 15:03:24 发布
最新推荐文章于 2019-12-02 15:03:24 发布
阅读量909 收藏 1
点赞数
分类专栏： javascript 文章标签： extjs javascript
[html]  view plain copy
  1. <html>  
  2.     <head>  
  3.         <meta http-equiv="Content-Type" content="text/html; charset=gbk">  
  4.         <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />  
  5.         <script type="text/javascript" src="../../adapter/ext/ext-base.js"> </script>  
  6.         <script type="text/javascript" src="../../ext-all.js"> </script>  
  7.         <script type="text/javascript">  
  8.             Ext.onReady(function() {  
  9.                 var dataJson = {  
  10.                     cm: [{ header: '编号', dataIndex: 'id' },  
  11.                         { header: '名称', dataIndex: 'name' },  
  12.                         { header: '描述', dataIndex: 'descn' }],  
  13.                     data: [['1', 'name1', 'descn1'],  
  14.                         ['2', 'name2', 'descn2'],  
  15.                         ['3', 'name3', 'descn3'],  
  16.                         ['4', 'name4', 'descn4'],  
  17.                         ['5', 'name5', 'descn5']]  
  18.                 };//后台需要返回的数据  
  19.   
  20.   
  21.                 //开始动态创建  
  22.                 var cm = new Ext.grid.ColumnModel(dataJson.cm);  
  23.                 var data = dataJson.data;  
  24.                 var field = [];  
  25.                 Ext.each(dataJson.cm, function(item) {  
  26.                     field.push({ name: item.dataIndex });  
  27.                 });  
  28.                 var store = new Ext.data.Store({  
  29.                     proxy: new Ext.data.MemoryProxy(data),  
  30.                     reader: new Ext.data.ArrayReader({ }, field)  
  31.                 });  
  32.                 store.load();  
  33.                 var grid = new Ext.grid.GridPanel({  
  34.                     autoHeight: true,  
  35.                     renderTo: 'grid',  
  36.                     store: store,  
  37.                     cm: cm  
  38.                 });  
  39.   
  40.             });  
  41.         </script>  
  42.     </head>  
  43.     <body>  
  44.         <div id="grid"></div>  
  45.     </body>  
  46. </html>  
shopharZFJ
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
EXT JS GridPanel列动态生成
08-28 1129
说明：我使用的ExtJs版本是3.2，代码片段是基于实际项目 gridpanel动态生成列的核心就是在后台拼凑columnmodel和store 此博客只是我自己记录为方便以后能更快处理类似问题，如果不能给你带来帮助，不喜勿喷  JS片段，动态生成ColumnModel和GridStore //动态生成grid列 function dynamicColumn(organId) { Ext...
表格GridPanel
JAVA
03-21 135
１、表格GridPanel概述 　　ExtJS中的表格功能非常强大，包括了排序、缓存、拖动、隐藏某一列、自动显示行号、列汇总、单元格编辑等实用功能。 　　表格由类Ext.grid.GridPanel定义，继承自Panel，其xtype为grid。ExtJS中，表格Grid必须包含列定义信息，并指定表格的数据存储器Store。表格的列信息由类Ext.grid.Column(以前是由Ext.gri...
Ext第一周：史上最强学习笔记---GridPanel（基础篇）
折腾
09-26 148
 我不想教各位新手什么高级技术，因为我也在研究，只是想教大家一个思考的方向，能够具有举一反三的能力，能够真正学会Ext和开始深入了解。如果你想实现什么特效，这个文字不适合你，但如果你想Ext文章，我想鄙人的小文非常适合你。   另：这篇教程是建立在Ext2.2上的。这个很多教程都没说明。让人很糊涂。我在此特别说明   网上很多教程，但是实际使用并不是很多，我想作为一个星期一个星期的总结来给各位网络...
配置可以选择批量记录的grid---Ext.grid.EditorGridPanel
12-13 53
这个需要注意的就是下面粗体的地方。多一个SM。 这个SM就是CheckboxSelectionModel。将这个配置到ColumnModel中。表格就成为可以选择的了。 //grid的checkbox要配置的选项 var sm=new Ext.grid.CheckboxSelectionModel(); //表格的cm属性.这里将sm设置在里头 var cm=new Ext.grid.C...
gridPanel的简单应用
郴州软件学习www.javaketang.com
06-15 92
今天教大家如何 用EXTJS gridPanel 显示数据 [img]http://xiaohewoai.iteye.com/upload/attachment/115164/599dfe52-2144-3256-b5b1-c3bb9869975e.jpg[/img] JS代码 function init() { // 定义表结构 var cm = new Ext.grid...
ext.net 动态创建gridpanel
07-11
在这个场景中，我们将深入探讨如何使用Ext.NET代码动态创建GridPanel，并在各种窗口中灵活展示。 1. **动态创建GridPanel**： 在Ext.NET中，动态创建GridPanel意味着在运行时根据需要生成组件。这通常涉及到在...
gridpanel动态加载数据的实例代码
09-05
总结起来，这个`GridPanel`示例展示了如何在Ext JS中创建一个基本的动态加载数据的表格，包括分页和用户交互。不过，为了完全实现动态加载，还需要配置`Store`的`proxy`和`reader`，以及服务器端的数据接口。这只是...
gridpanel常用操作
09-10
在本文中，我们将深入探讨`GridPanel`在Extnet框架...熟练掌握这些操作对于构建动态且交互性强的Web应用至关重要。理解并运用上述知识点，开发者能够有效地管理数据，提供用户友好的界面，从而提升应用的整体用户体验。
Extjs4 GridPanel的主要配置参数详细介绍
10-27
每个数组元素都代表一个GridPanel中的列，并且这些配置项将用于自动创建ColumnModel列模式。columns数组中的每一项可以设置多种属性，比如id（列的唯一标识符）、header（列的标题）、dataIndex（数据字段名，用于和...
GridPanel属性详解
10-21
### GridPanel 属性详解 #### 一、Ext.grid.GridPanel 组件概述 `Ext.grid.GridPanel` 是ExtJS中用于展示表格数据的核心组件之一。...通过合理配置这些属性和方法，开发者可以创建出功能强大且美观的表格组件。
基本表格GridPanel
xuanjiewu的专栏
02-05 108
function showUrl(value){ return ''+value+''; } Ext.onReady(function(){ var data = [ [1,'EasyJWeb','EasyJ...
UE4-（UI）第六十四课Grid Panel
Stone的博客
12-02 4452
一、在控件蓝图中拖入GridPanel控件，设置该控件的位置，及大小。 二、在Grid Panel中拖入五个button控件，刚拖入的button在Grid Panel中默认位置为左上角， 三、选中具体的按钮button控件，设置各自的Row和Column，也可以点击问号将button移动 现象：如果将最后一个按钮继续设置行和列，上图中的行和列都为4，下图中的行和列均为7，却发现...
Java中的GridPane类
qq_44383074的博客
10-24 5755
GridPane的简单使用 GridPane的介绍 GridPane类是以网格（矩阵）形式布局结点，这个结点被放在特定的行和列的索引中。 需要导入的包 import javafx.scene.layout.*; 源代码 /*GridPane*/ package testDbms; import javafx.application.Application; import javafx.scene...
GridPanel方法和属性
学习也休闲
05-19 876
  主要配置项： store：表格的数据集columns：表格列模式的配置数组，可自动创建ColumnModel列模式autoExpandColumn：自动充满表格未用空间的列，参数为列id，该id不能为0stripeRows：表格是否隔行换色，默认为falsecm、colModel：表格的列模式，渲染表格时必须设置该配置项 sm、selModel：表格的选择模式，默认为Ext.grid....
GridPanel中getSelectionModel
cooperSun
10-28 878
本文导读：Ext.grid.GridPanel继承自Panel，其xtype为grid，包括了排序、缓存、拖动、隐藏某一列、自动显示行号、列汇总、单元格编辑等实用功能。 当我们需要获取选择的数据时，就需要用到getSelectionModel方法。下面介绍GridPanel中getSelectionModel的操作。 一、Ext.grid.GridPanel 主要配置项： sto
tapestry 4.02中封装ext的GridPanel组件
honlin
02-06 108
组件概述：     现在的项目中也采用了Ext作为前端页面显示的部分。初期用ext的时候都是在页面中写大量的javascript代码，大部分的代码都是重复新的工作，如声明一个GridPanel，声明一个store，reader等等，而且以后的页面也不容易维护，新人来了上手也比较慢，需要学习大量的ext的知识。于是就决定把ext的三大组件封装成ext的组件。第一个封装的就是Ext.grid.Gri...
封装表格显示数据GridPanel
justdoit1024
10-12 103
[code="java"]/** * 封装GridPanel */ Ext.dream = { /** * url:请求的地址 record：记录对象 tbar：顶部工具栏 columnModel：需要显示的列 pageSize:每页显示的记录数 * var cfg = {}; * cfg['fields'] = fields; * cfg['url'...
ExtJS 2.02 Gridpanel：创建与配置实战
4. **创建GridPanel**：使用`Ext.grid.GridPanel`构造函数创建GridPanel，传入ColumnModel、Store和其他配置项。 5. **添加到容器**：将GridPanel添加到应用程序的布局容器中，如面板（Panel）或窗口（Window）。 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值