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

extjs 我的第一个ext程序--grid

    博客分类:
  • ajax
阅读更多
很欣赏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
0
0
分享到:
评论

相关推荐

    ExtJS 自定义分页控件---- PM3PagingToolbar.js

    显示第一页与最后一页. 显示当前页对称的前后几页(可以自定义显示多少页). 其它的页码省略. 点击省略号, 省略号隐藏, 显示一个与省略号相同宽度的页面跳转转入框. 整个设置还比较智能. 在 ExtJS3.3基础上开发的. ...

    Extjs4---grid的修改、删除功能---结合struts2、hibernate

    在本文中,我们将深入探讨如何在ExtJS 4框架中实现Grid组件的修改和删除功能,同时结合Struts2和Hibernate技术,构建一个完整的CRUD(创建、读取、更新、删除)应用。ExtJS 4是一个强大的JavaScript UI库,提供了...

    extjs grid数据导出excel文件

    具体实现时,开发者可能会在EXTJS的事件处理器中添加导出功能,例如在Grid的工具栏上添加一个“导出”按钮,当点击该按钮时触发数据导出的函数。这个函数会按照上述步骤操作,最终生成一个可供下载的Excel文件。 在...

    ExtJs Grid选择行

    // 如果有多个选择,records将是一个数组,这里只取第一个 console.log(selectedRecord.data); // 输出选中行的数据 } else { console.log(false); // 没有选择行,返回false } } } }); ``` 在上面的代码中...

    ExtJS_grid.rar_Grid javascript_extjs grid

    这个"ExtJS_grid.rar"压缩包包含了关于学习ExtJS Grid的教程资源,特别是"第三节_ExtJS表格控件和树控件.pdf",它可能详细讲解了如何使用Grid以及与树形控件的结合。 1. **ExtJS Grid基本概念**: - **Grid Panel*...

    Ext Grid 导出Excel

    在IT领域,特别是Web开发中,Ext Grid是一个广泛使用的组件,用于展示和管理大量数据。它提供了丰富的功能,包括排序、筛选、分页等,使得数据的交互和操作变得非常便捷。当我们需要将Ext Grid中的数据导出为Excel...

    Ext中grid多行数据全部删除

    // 去掉第一个'+' alert(ManyClaStrId); // 显示当前选中的所有ID }); // 注册另一个点击事件,用于取消选择时的操作 grid.on('click', function() { var rows = grid.getSelectionModel().getSelections(); // ...

    解决Ext Grid中文排序问题

    在EXT JS框架中,Ext Grid是一个非常常用的组件,用于展示数据并支持各种操作,如排序、筛选和分页。然而,默认情况下,EXT Grid遵循ASCII码排序规则,这在处理中文字符时可能导致排序不符合预期,因为中文字符的...

    ExtJS+Web应用程序开发指南

    Ext是一个强大的js类库,以前是基于雅虎UI,现在已经完全独立了。 主要包括data、widget、form、grid、dd、menu,其中最强大的应该算grid了,编程思想是基于面向对象编程(oop),扩展性相当的好。可以自己写扩展,自己...

    EXTjs grid双层表头的实现 (源代码和示例)

    第一层表头包含一个或多个列,这些列可以有各自的`text`(标题)和`width`(宽度)等配置。第二层表头通常是一个子数组,它包含在第一层的一个列中。 ```javascript columns: [ { text: '一级标题', width: 200,...

    免费 Extjs4.0教程视频

    #### 第一讲:Extjs 4.0概述与Hello World程序 - **Extjs 4.0简介**: - Extjs是一款基于JavaScript的开源前端框架,用于构建交互式的Web应用程序。 - 版本4.0引入了许多新功能和改进,使其更加强大和灵活。 - **...

    Ext3.4.0复杂(多行)表头+锁定多列例子

    Ext JS是一个流行的前端框架,用于构建富互联网应用程序(RIA),它提供了一套完整的组件化开发工具,包括表格、窗体、菜单等。 在描述中提到的“复杂(多行)表头”是指在数据网格中创建多级或者多层次的表头,这种...

    EXTJS Grid导出Excel

    EXTJS是一个强大的JavaScript库,专门用于构建富客户端Web应用程序,而Grid组件是其核心部分,用于展示和管理表格数据。在EXTJS中,我们可以利用其内置的功能或借助第三方插件来实现在Grid中导出数据到Excel。 ...

    ext-1.0源码+部分中文解读

    EXT-1.0作为EXTJS的第一个主要版本,虽然在功能上相对现代版本有所限制,但其核心设计理念和架构奠定了EXTJS后续发展的基础。 2. **组件化** EXT-1.0的核心是组件化思想。所有的UI元素,如按钮、表格、面板等,都被...

    ExtJs选中var editor = new Ext.ux.grid.RowEditor详解

    ### ExtJs选中 `var editor = new Ext.ux.grid.RowEditor` 详解 在Web开发领域,特别是使用ExtJs框架进行复杂用户界面构建时,`RowEditor` 是一个非常实用的功能,它允许用户直接在表格行内编辑数据,极大地提高了...

    Extjs4 Grid分页与自动刷新

    // 重新加载第一页数据 } // 设置每5秒刷新一次 setInterval(refreshGrid, 5000); ``` **2.2 监听特定事件** 如果需要根据某些特定事件来触发Grid的刷新,可以使用事件监听的方式。 ```javascript // 假设有一...

    ExtJs_grid.txt

    ExtJs是一个功能强大的JavaScript框架,用于构建复杂的Web应用程序。其中,Grid是ExtJs中最常用的数据展示组件之一,它能够以表格形式显示数据,并提供了丰富的交互特性,如排序、筛选、分页等。 在ExtJs中,Grid的...

    EXTJS4.0视频教程配套代码

    第一讲:extjs4.0概述和HELLO WORD程序 [01]EXTJS4.0的概述和HELLOWORD程序.wmv 第二讲:extjs4.0的新特性(附件较大做了分包压缩大家只要下载3个包运行001就ok了) [02]EXTJS4.0的新特性.003.zip (14.41M)[02]...

    ext_image.rar_ext_image_extjs_extjs 4.2 img_extjs image_extjs图片上

    在IT行业中,ExtJS是一个非常流行的JavaScript库,用于构建富客户端Web应用程序。它提供了一整套组件和工具,使得开发者可以轻松地创建功能丰富的、交互性强的用户界面。本资源"ext_image.rar"聚焦于ExtJS框架在处理...

    extjs 双表头

    `grid`有两列,其中第一列是容器,包含一个水平布局(`hbox`),有两个子列。第二列则是一个包含两个子列的`column`,显示了邮箱和电话。 在实际项目中,你可以根据需求调整这个示例,例如改变列的数量、宽度,或者...

Global site tag (gtag.js) - Google Analytics