ExtJs ArrayGrid简单例子

最新推荐文章于 2018-04-09 11:32:14 发布
最新推荐文章于 2018-04-09 11:32:14 发布
阅读量634 收藏
点赞数
分类专栏： extjs
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xing_sky/article/details/8677422
版权 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>

<link rel="stylesheet" type="text/css" href="css/ext-all.css" />
<script type="text/javascript" src="js/ext-base.js"></script>

<script type="text/javascript" src="js/ext-all-debug.js"></script>

<script type="text/javascript">
 Ext.onReady(function(){
	 function sexChange(val){
		 if(val=="男")
		  { 
		  return '<span style="color:green">'+val+'</span>';
		  }
		else
		  {
			 return '<span style="color:red">'+val+'</span>';
		  }
		 }
		 
		 	 function ageChange(val){
		 if(val>20)
		  { 
		  return '<span style="color:green">'+val+'</span>';
		  }
		else
		  {
			 return '<span style="color:red">'+val+'</span>';
		  }
		 }
	 
	 var myData=[['张三','男',20, 90],
	              ['刘思','女',24, 45],
				  ['齐硫','男',18, 95]];
	 var cm =new  Ext.grid.ColumnModel([{id:'name',header:'name',dataIndex:'name'},
	                                {header:'sex',width:75,sortable:true,renderer:sexChange,dataIndex:'sex'},
									{header:'age',width:75,sortable:true,renderer:ageChange,dataIndex:'age'},
									{header:'score',width:75,sortable:true,dataIndex:'score'}]);
	 var store = new Ext.data.ArrayStore({
		       fields:[{name:'name'},{name:'sex'},{name:'age'},{name:'score'}]
			 
		 });
	store.loadData(myData);
	 var grid = new Ext.grid.GridPanel({
		 cm:cm,
		 store:store,
		 width:700,
		 height:600,
		 autoExpandColumn:'name',
		 title:'Array-Grid',
		 renderTo:'my-grid'
		 });
	 });
</script>
</head>

<body>
<div id="my-grid"></div>
</body>

</html>

一水之星
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
php extjs grid 装载数据
09-11
首先，理解ExtJS Grid的基本结构至关重要。Grid由多个组件组成，包括Store（数据存储）、Model（数据模型）、Columns（列配置）等。Store负责管理数据，可以从服务器请求数据并将其提供给Grid。Model定义了数据字段...
ExtJS4 动态生成的grid导出为excel示例
12-09
在你的Grid配置中添加一个`xtype: 'exporterbutton'`的组件，指定对应的store和Grid实例： ```javascript xtype: 'exporterbutton', store: store, component: Ext.getCmp('gird_a') ``` 在处理动态生成的Grid时，...
Extjs4.1文档example学习之 Array Grid Example
YunShuMingliao的专栏
01-24 632
Extjs 4.1要创建一个 array grid 必须 要有 model  ；store； grid； model  类似于 java中的类，继承自Ext.data.Model 里面定义了一些 成员，   Ext.define('Company', { extend: 'Ext.data.Model', fields: [ {name: 'company'
EXTJS分别用数组和JSON对象数组填充表格数据
3月3的风筝
08-16 8562
1，首先说一下用数组填充ExtJS表吧，这个在网上随处找得到 下面的代码是我写的弹出窗口的一个JS函数: function trialTotal(){       var tablecol = new Ext.grid.ColumnModel([                                           {header:"",dataIndex:"rowname"
ExtJS4.2学习(11)——高级组件之Grid
weixin_33915554的博客
09-03 193
大纲： 1.首先，搭建起来一个最基础的Grid组件； 2.其次，利用前边MVC架构将代码重构； 3.再者，介绍下Grid的一些特性。 一、搭建基础的Grid组件 在文章的开始，我们首先简单的搭建一个Grid项目，感受下Grid的样子和其吸引众人的魅力所在。 架构如图： 代码分别如下，注释写的比较清楚，按照以上搭建可以正常运行： grid.html代码如下： ...
ExtJs_array-grid解释
cenyebao的专栏
03-04 776
/*!  * Ext JS Library 3.0.0  * Copyright(c) 2006-2009 Ext JS, LLC  * licensing@extjs.com  * http://www.extjs.com/license  */ Ext.onRea
Extjs6.0 grid 列表绑定json数据
cx1145691901的博客
04-09 1358
最近在做一个项目由于前段使用extjs6.0,  简单记录一下grid列表绑定json数据如何实现,如下图, 是一个简单的功能模块：图中是一个数据列表绑定json数据源，实现步骤：1.首先得有一个返回json格式数据源接口,这里就不写了。2.Ext6.0可以创建一个Model ，并且指向一个stroe, url写自己的接口名称，JS代码如下Ext.define('app.model.agent.A...
ExtJS_grid.rar_Grid javascript_extjs grid
09-23
- **Store**：存储Grid的数据，可以是从服务器获取的JSON、XML或Array格式的数据，也可以是本地数据。 - **Columns**：定义Grid中每一列的属性，如字段名、标题、宽度、对齐方式等。 - **Renderer**：允许自定义...
extjs&使用grid显示数据参照.pdf
11-09
EXTJS提供了多种预定义的data store类型，包括Simple (Array)、XML和JSON，同时也可以自定义data store以适应非标准格式的数据。例如，EXT论坛上有用户贡献的CSV和ColdFusion数据store实现。 向data store添加数据...
ExtJS 2.0实用简明教程 之Ext类库简介
10-30
2. **创建控件**：通过调用对应的构造函数，例如`new Ext.Panel()`或`new Ext.grid.GridPanel()`，可以在页面上实例化一个控件，并传递配置参数以定制其行为和外观。 3. **使用底层API**：在需要的地方，可以直接...
ExtJs_Basic Array Grid Example
cenyebao的专栏
04-02 1094
征途：2011_4_3Basic Array Grid Example的html页面代码为：Basic Array Grid Example         /* style rows on mouseover */         .x-grid3-row-over .x-gr
Extjs propertyGrid 例子
xing_sky的专栏
03-15 3222
无标题文档 Ext.onReady(function(){ var propertyGrid = new Ext.grid.PropertyGrid({ title:'PropertyGrid', autoHeight:true, width:300, propertyNames:{'分数':'score'}, source:{ '姓名':'El
extjs treepanel
xing_sky的专栏
09-27 1190
Insert title here  Ext.onReady(function() {     Ext.QuickTips.init();// 浮动信息提示     Ext.BLANK_IMAGE_URL = 'images/default/s.gif';// 替换图片文件地址为本地     // 创建一个简写     var Tree = Ext.tree;
extjs getDom 和 getCmp
xing_sky的专栏
10-25 1029
Ext.getDom('name').value；    Ext.getCmp('fname').getValue()；
Ext is not defined
xing_sky的专栏
08-23 882
原因：EXTJS 的 JS库文件加载有顺序，基础js要在核心库js前，同时，路径要对          extjs1.jsp -->              function fn()    {    alert('ExtJs库已加');    }    Ext.onReady(fn);
extj不显示图片
xing_sky的专栏
01-21 772
很奇怪，extjs中的image包导进去了，并且也在js页面设置了 Ext.BLANK_IMAGE_URL='images/default/s.gif'; 但是，页面还是没有显示图片 然后，我一直试 不知道为什么，貌似只有把ext-all.css放在一个文件夹下就可以显示图片了 然后，我看了一下extjs中的ext-all.css和s.gif路径 我猜想，应该是ext-all.css和
ASP外观专利图像检索平台(源代码+论文).rar
07-21
ASP外观专利图像检索平台(源代码+论文)
C++课程设计：电煤气管理系统【源码+文档】
最新发布
07-21
C++课程设计：电煤气管理系统【源码+文档】 本程序是一个水电气管理信息系统，能够对高校的水电气费用进行管理, 包括了成员的基本信息，如学号、编号、姓名、成员水电气的用量等。程序的用途包括缴纳水电气费、查询一个同学水电气费用量、查看所有同学的缴费情况、增加学生信息、删除学生信息、退出系统等。在设计时也考虑到学生和教师在用水电气时的不同，学生可以免费使用一定额度的水电气，超过这个额度的以后必须付费，且付费部分水电气费的价格要高于教工的收费标准，该措施的实行是为了鼓励同学们节约资源，以免造成不必要的资源浪费。该软件主要是为了学校的管理人员提供便捷，以更快的完成水电气费用的收缴。该软件本着简洁明了，实用稳定为一体进行设计。 系统将实现以下功能： （1）实现对用户信息的录入； （2）实现水电煤气数据的录入； （3）实现计算并查询用户应缴费用，查询未缴纳费用的名单； （4）实现对人员的删除和添加；
extjs grid表格导出excel的完整例子
03-27
以下是一个使用ExtJS 4.2.1的完整例子，可以将Grid表格导出为Excel文件： ``` Ext.require([ 'Ext.grid.*', 'Ext.data.*', 'Ext.util.*', 'Ext.toolbar.Paging', 'Ext.ux.exporter.Exporter' ]); Ext.onReady(function() { // 模拟数据 var data = []; for (var i = 0; i < 20; i++) { data.push({ name: 'User ' + i, email: 'user' + i + '@example.com', phone: '555-' + Ext.Number.randomInt(1000, 9999) }); } // 创建数据模型 Ext.define('User', { extend: 'Ext.data.Model', fields: ['name', 'email', 'phone'] }); // 创建数据源 var store = Ext.create('Ext.data.Store', { model: 'User', data: data, proxy: { type: 'memory', reader: { type: 'json', root: 'data' } } }); // 创建Grid表格 var grid = Ext.create('Ext.grid.Panel', { store: store, columns: [{ text: 'Name', dataIndex: 'name' }, { text: 'Email', dataIndex: 'email', flex: 1 }, { text: 'Phone', dataIndex: 'phone' }], width: 400, height: 200, dockedItems: [{ xtype: 'toolbar', dock: 'top', items: [{ xtype: 'button', text: 'Export to Excel', handler: function() { // 导出Excel Ext.ux.exporter.Exporter.exportGrid(grid, 'Excel', { title: 'User List' }); } }] }, { xtype: 'pagingtoolbar', store: store, dock: 'bottom', displayInfo: true }] }); // 渲染Grid表格 Ext.create('Ext.container.Viewport', { layout: 'fit', items: [grid] }); }); ``` 在上面的代码中，我们首先定义了一个模拟数据数组，然后创建了一个数据模型和一个数据源。接下来，我们创建了一个Grid表格，将数据源绑定到该表格中，并添加了一个工具栏和一个分页工具栏。在工具栏中，我们添加了一个按钮，当用户单击该按钮时，将调用Ext.ux.exporter.Exporter.exportGrid函数将Grid表格导出为Excel文件。 需要注意的是，我们使用了Ext.ux.exporter.Exporter类来执行导出操作。该类是ExtJS的一个扩展，需要在应用程序中明确声明。在本例中，我们使用了Ext.require函数来加载必需的类和扩展。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值