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

简单的GridPanel实例

    博客分类:
  • Ext
阅读更多
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
   	<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css" />
	<script type="text/javascript" src="extjs/adapter/ext/ext-base.js"></script>
	<script type="text/javascript" src="extjs/ext-all.js"></script>
	<script type="text/javascript" src="extjs/ext-all-debug.js"></script>
	<script type="text/javascript">
		Ext.onReady(function(){
			var column=new Ext.grid.ColumnModel([
				{header:'编号',dataIndex:'id'},
				{header:'名称',dataIndex:'name'},
				{header:'描述',dataIndex:'descn'}
				//{id:'descn',header:'描述',dataIndex:'descn'}
				//header(首部显示文本),dataIndex(列对应的记录集字段),sortable(是否排序),renderer(列的渲染函数),width(宽度),format(格式化信息)
			]);
			
			var data=[
				['1','name1','descn1'],
				['2','name2','descn2'],
				['3','name3','descn3']
			];
			
			var store=new Ext.data.Store({
				proxy:new Ext.data.MemoryProxy(data),//获得本地数据
				//proxy:new Ext.data.ScriptTagProxy({url:'http://www.baidu.com'}),//获得远程数据
				reader:new Ext.data.ArrayReader(	//解析数据
					{},
					[
						{name:'id'},
						{name:'name'},
						{name:'descn'}
						
						//{name:'id',mapping:1},
						//{name:'name',mapping:0},//第一列显示name
						//{name:'descn',mapping:2}
					]
				)
			});
			
			
			var grid=new Ext.grid.GridPanel({
				renderTo:'grid',
				title:'grid',
				height:300,
				width:500,
				enableColumnMove:false,//禁止拖放列
				enableColumnResize:false,//精致改变列的宽度
				stripeRows:true,//表格显示斑马线效果
				viewConfig:{//设置表格列宽度
					//forceFit:true //平均分配
					autoSizeColumn:true //根据内容填充列的大小
				},
				//autoExpandColumn:'descn', //autoExpandColumn只能指定一列id,此id在cm里设置
				loadMask:true,
				store:store,
				cm:column
			});
			
			store.load();
			
		});
	</script>
  </head>
  <body> 
  <div id="grid"></div>
  </body>
</html>

 

1
1
分享到:
评论
1 楼 njsteven2010 2010-10-14  
  这个小例子写的不错,值得一看。初学者必备

相关推荐

    EXTJSEXT实例GridPanel.

    这个实例"EXTJSEXT实例GridPanel"旨在教授如何在EXTJS中创建并使用GridPanel。 GridPanel是EXTJS中的一个核心组件,它允许开发者以网格形式展示数据,支持多种功能,如排序、分页、筛选、编辑等。在EXTJS中,...

    Ext的gridpanel控件二次加载问题

    通常,这可能是由于在重新加载时,没有正确地处理GridPanel实例或者数据源,导致旧的实例被覆盖或者销毁,新的数据未能正确显示。在某些情况下,可能是由于页面刷新或者重定向导致GridPanel的DOM元素被清除,从而...

    ExtJS 表格面板GridPanel完整例子

    下面是一个简单的GridPanel实例代码: ```javascript Ext.application({ name: 'MyApp', launch: function () { var store = Ext.create('Ext.data.Store', { fields: ['name', 'email', 'phone'], data: [ {...

    gridPanel添加按钮

    例如,在ExtJS中,我们可以创建一个新的`Ext.toolbar.Toolbar`实例,并将其附加到`gridPanel`的顶部或底部。 ```javascript var toolbar = Ext.create('Ext.toolbar.Toolbar', { dock: 'top', // 或者 'bottom' ...

    tapestry4.02中封装ext的GridPanel组件

    4. **设置JavaScript逻辑**:`GridPanel.jwc`文件可能包含了组件的JavaScript配置,用于初始化和配置ExtJS的GridPanel实例。这里通常会涉及数据源的配置、列定义、事件监听器等。 5. **资源文件**:`GridPanel....

    extjs gridpanel例子和简单应用

    最后创建了一个`GridPanel`实例,指定了其高度、宽度、数据源、标题、列配置和工具栏等属性。 #### 四、总结 通过以上分析可以看出,在ExtJS中利用`GridPanel`展示数据时,需要通过多个对象进行配合来完成数据的...

    delphi实例大全

    实例会涵盖布局管理器(如GridPanel、FlowPanel)的使用,以及自定义控件和皮肤的应用,提升程序的视觉效果。 4. **数据库访问**:Delphi提供了强大的数据库访问能力,如ADO(ActiveX Data Objects)和DBExpress...

    Extaspnet的中文实例

    它支持与各种数据源(如SQL数据库、XML、JSON等)进行无缝集成,使得数据显示和更新变得简单而高效。 2. 组件库:库中包含多种组件,如GridPanel(数据网格)、FormPanel(表单)、TreePanel(树形视图)、Chart...

    Gridpanel多表头的扩展

    - 然后,实例化Gridpanel时,在plugins属性中指定GroupHeaderPlugin。 - 接下来,通过定义多层的column模型来创建多表头结构。 - 最后,利用插件提供的API进行动态操作,如添加、删除或重组表头。 通过深入研究这两...

    EXT GridPanel获取某一单元格的值

    - `grid`: 引发事件的GridPanel实例。 - `rowIndex`: 用户点击的行的索引。 - `columnIndex`: 用户点击的列的索引。 - `e`: 事件对象,包含有关点击的更多信息。 3-9. 获取单元格值的步骤: - `editCell_row =...

    最新extaspnet实例

    3. 控件使用方法:EXT.NET框架提供了多种控件,如GridPanel(表格)、FormPanel(表单)、TabPanel(选项卡)、Window(弹出窗口)、TreePanel(树形视图)等。每个控件都有丰富的配置项和事件处理方法,通过这些...

    Extjs2.02 Gridpanel

    创建完ColumnModel和Store后,我们可以创建GridPanel实例: ```javascript var grid = new Ext.grid.GridPanel({ store: ds, cm: cm, renderTo: Ext.getBody() }); ``` `store`属性指定了数据源,`cm`设置...

    ExtJS介绍以及GridPanel

    4. 实例化GridPanel:配置GridPanel的各种属性,如高度、宽度、是否可拖动列等,然后将Store和ColumnModel传递给GridPanel。 5. 渲染GridPanel:将GridPanel添加到容器中,完成渲染。 在实际应用中,GridPanel还...

    Ext.grid.GridPanel属性祥解

    每一项都是一个`Ext.grid.Column`实例。 - 示例:`columns: [{ header: '姓名', dataIndex: 'name' }, { header: '年龄', dataIndex: 'age' }]` 3. **autoExpandColumn** - 说明:此配置项指定了一个列ID,该列会...

    GridPanel属性详解

    ### GridPanel 属性详解 #### 一、Ext.grid.GridPanel 组件概述 `Ext.grid.GridPanel` 是ExtJS中用于展示表格数据的核心组件之一。它提供了丰富的配置选项和方法来帮助开发者灵活地控制表格的表现形式及功能。接...

    GridPanel的小难点 第一节 每条数据后面跟随几个操作按钮

    5. **实现逻辑**:在JavaScript代码(如agrid.js或agrid2.js)中,我们需要创建GridPanel实例,配置列模型,设置模板,并处理按钮事件。如果使用了MVVM模式,那么这些逻辑可能会在ViewModel中。 6. **HTML结构**:...

    Ext 3.0源码+典型实例

    在 Ext 3.0 中,可以使用 GridPanel 显示数据,结合 Store 和 Proxy 实现数据的加载和筛选。同时,可以添加过滤器(Filter)或使用远程排序(remoteSort)来处理查询逻辑。 4. **动态树形菜单**:动态树形菜单是...

    gridpanel动态加载数据的实例代码

    在本文中,我们将深入探讨如何使用`GridPanel`在Ext JS框架中实现动态加载数据的实例。`GridPanel`是Ext JS中一个强大的组件,它用于显示和操作表格数据。动态加载数据是一种优化性能的策略,它允许在用户滚动或需要...

    ExtJs中gridpanel分组后组名排序实例代码

    在实际使用中,我们可以创建一个`DescGroupingStore`实例,并将它赋值给消息列表的数据源,就像下面这样: ```javascript // 消息列表数据源 var messageStore = new DescGroupingStore({ // 配置项... }); ``` ...

    Ext 根据数据库返回json动态生成grid列表实例

    在本文中,我们将深入探讨如何使用ExtJS框架根据数据库返回的JSON数据动态生成Grid列表实例。ExtJS是一款强大的JavaScript库,常用于构建富客户端应用程序,尤其是数据可视化和数据管理组件,如Grid。Grid是ExtJS中...

Global site tag (gtag.js) - Google Analytics