很欣赏extjs的炫,忍不住开始学习。参考了一个视频课件,开始了。
背景:
只想写一个很简单的grid界面,不与后台交互
涉及两个文件:
grid.html,grid.js
grid.js:
Ext.onReady(function(){
//定义表头
var oColModels = new Ext.grid.ColumnModel([
{header:'ID',dataIndex:'id'},
{header:'姓名',dataIndex:'name'},
{header:'EMail',dataIndex:'email'},
{header:'性别',dataIndex:'sex'},
{header:'年龄',dataIndex:'age'}
]);
//定义数据结构,即数据库字段
var aFields = ["id","name","email","sex","age"];
//数据集
var aDatas = [
["1","name1","name1@abc.com","1","21"],
["2","name2","name2@abc.com","0","22"],
["3","name3","name3@abc.com","1","23"],
["4","name4","name4@abc.com","0","24"],
["5","name5","name5@abc.com","1","25"]
];
//数据存储器
var oStore = new Ext.data.SimpleStore({
fields : aFields,
data : aDatas
});
//
var oGrid = new Ext.grid.GridPanel({
title:"grid列表显示示例",
width:600,
height:200,
colModel : oColModels,
store : oStore
});
//
oGrid.render(Ext.get("grid-example"));
});
这里遇到了一个问题:如果oGrid对象不定义height的话,页面中只显示每一条数据,页例子中的程序却不用定义heigth,很不可理解,这个问题以后再研究。
grid.html:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../../scripts/ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../scripts/ext/ext-all-debug.js"></script>
<link rel="stylesheet" type="text/css" href="../../scripts/ext/resources/css/ext-all.css"></link>
<script language="javascript" src="grid.js"></script>
</head>
<body>
<div id="grid-example"></div>
</body>
</html>
浏览grid.html页面,得到如下效果:
- 大小: 4.3 KB
分享到:
相关推荐
显示第一页与最后一页. 显示当前页对称的前后几页(可以自定义显示多少页). 其它的页码省略. 点击省略号, 省略号隐藏, 显示一个与省略号相同宽度的页面跳转转入框. 整个设置还比较智能. 在 ExtJS3.3基础上开发的. ...
在本文中,我们将深入探讨如何在ExtJS 4框架中实现Grid组件的修改和删除功能,同时结合Struts2和Hibernate技术,构建一个完整的CRUD(创建、读取、更新、删除)应用。ExtJS 4是一个强大的JavaScript UI库,提供了...
具体实现时,开发者可能会在EXTJS的事件处理器中添加导出功能,例如在Grid的工具栏上添加一个“导出”按钮,当点击该按钮时触发数据导出的函数。这个函数会按照上述步骤操作,最终生成一个可供下载的Excel文件。 在...
// 如果有多个选择,records将是一个数组,这里只取第一个 console.log(selectedRecord.data); // 输出选中行的数据 } else { console.log(false); // 没有选择行,返回false } } } }); ``` 在上面的代码中...
这个"ExtJS_grid.rar"压缩包包含了关于学习ExtJS Grid的教程资源,特别是"第三节_ExtJS表格控件和树控件.pdf",它可能详细讲解了如何使用Grid以及与树形控件的结合。 1. **ExtJS Grid基本概念**: - **Grid Panel*...
在IT领域,特别是Web开发中,Ext Grid是一个广泛使用的组件,用于展示和管理大量数据。它提供了丰富的功能,包括排序、筛选、分页等,使得数据的交互和操作变得非常便捷。当我们需要将Ext Grid中的数据导出为Excel...
// 去掉第一个'+' alert(ManyClaStrId); // 显示当前选中的所有ID }); // 注册另一个点击事件,用于取消选择时的操作 grid.on('click', function() { var rows = grid.getSelectionModel().getSelections(); // ...
在EXT JS框架中,Ext Grid是一个非常常用的组件,用于展示数据并支持各种操作,如排序、筛选和分页。然而,默认情况下,EXT Grid遵循ASCII码排序规则,这在处理中文字符时可能导致排序不符合预期,因为中文字符的...
Ext是一个强大的js类库,以前是基于雅虎UI,现在已经完全独立了。 主要包括data、widget、form、grid、dd、menu,其中最强大的应该算grid了,编程思想是基于面向对象编程(oop),扩展性相当的好。可以自己写扩展,自己...
第一层表头包含一个或多个列,这些列可以有各自的`text`(标题)和`width`(宽度)等配置。第二层表头通常是一个子数组,它包含在第一层的一个列中。 ```javascript columns: [ { text: '一级标题', width: 200,...
#### 第一讲:Extjs 4.0概述与Hello World程序 - **Extjs 4.0简介**: - Extjs是一款基于JavaScript的开源前端框架,用于构建交互式的Web应用程序。 - 版本4.0引入了许多新功能和改进,使其更加强大和灵活。 - **...
Ext JS是一个流行的前端框架,用于构建富互联网应用程序(RIA),它提供了一套完整的组件化开发工具,包括表格、窗体、菜单等。 在描述中提到的“复杂(多行)表头”是指在数据网格中创建多级或者多层次的表头,这种...
EXTJS是一个强大的JavaScript库,专门用于构建富客户端Web应用程序,而Grid组件是其核心部分,用于展示和管理表格数据。在EXTJS中,我们可以利用其内置的功能或借助第三方插件来实现在Grid中导出数据到Excel。 ...
EXT-1.0作为EXTJS的第一个主要版本,虽然在功能上相对现代版本有所限制,但其核心设计理念和架构奠定了EXTJS后续发展的基础。 2. **组件化** EXT-1.0的核心是组件化思想。所有的UI元素,如按钮、表格、面板等,都被...
### ExtJs选中 `var editor = new Ext.ux.grid.RowEditor` 详解 在Web开发领域,特别是使用ExtJs框架进行复杂用户界面构建时,`RowEditor` 是一个非常实用的功能,它允许用户直接在表格行内编辑数据,极大地提高了...
// 重新加载第一页数据 } // 设置每5秒刷新一次 setInterval(refreshGrid, 5000); ``` **2.2 监听特定事件** 如果需要根据某些特定事件来触发Grid的刷新,可以使用事件监听的方式。 ```javascript // 假设有一...
ExtJs是一个功能强大的JavaScript框架,用于构建复杂的Web应用程序。其中,Grid是ExtJs中最常用的数据展示组件之一,它能够以表格形式显示数据,并提供了丰富的交互特性,如排序、筛选、分页等。 在ExtJs中,Grid的...
第一讲:extjs4.0概述和HELLO WORD程序 [01]EXTJS4.0的概述和HELLOWORD程序.wmv 第二讲:extjs4.0的新特性(附件较大做了分包压缩大家只要下载3个包运行001就ok了) [02]EXTJS4.0的新特性.003.zip (14.41M)[02]...
在IT行业中,ExtJS是一个非常流行的JavaScript库,用于构建富客户端Web应用程序。它提供了一整套组件和工具,使得开发者可以轻松地创建功能丰富的、交互性强的用户界面。本资源"ext_image.rar"聚焦于ExtJS框架在处理...
`grid`有两列,其中第一列是容器,包含一个水平布局(`hbox`),有两个子列。第二列则是一个包含两个子列的`column`,显示了邮箱和电话。 在实际项目中,你可以根据需求调整这个示例,例如改变列的数量、宽度,或者...