- 浏览: 208168 次
- 性别:
- 来自: 北京
文章分类
最新评论
-
Vcb:
http://osgi.jxtech.net是新出的一款基于O ...
java快速开发平台 -
hjwromantic:
http://blog.csdn.net/romantichj ...
java快速开发平台 -
fei_6666:
是的,要和角色关联起来,给不同角色配置不同的过滤条件,我们当时 ...
Ralasafe -
pwlovely:
你好,我想请问一下,ralasafe实现数据级权限的列的显示控 ...
Ralasafe -
bitray:
tomcat在netbeans下好像不行
maven项目部署
Ext - Grid
Grid是Ext框架中一个重要的组成部分。一般建立Grid主要实现数据的增删改查。
建立一个Grid
Grid一般有三个主要的内容,ds,cm,GridPanel
var ds = new Ext.data.Store();
var cm = new Ext.grid.ColumnModel();
var grid = new Ext.grid.GridPanel();
如果要页面载入时,Grid不显示,事件触发查询并建立Grid显示。很简单,将GridPanel建立在事件的function中就可以了。
如果载入时就显示Grid,这里分几种情况:
(1)页面载入时,Grid显示,并查询和显示出数据。
(2)页面载入时,Grid显示,但不发送请求数据,事件触发查询。该查询条件已固定或不需要条件。
(3)页面载入时,Grid显示,不查询数据,事件触发查询,该查询需要从页面上存在的文本框中获得数据作为条件。
(4)与(3)相同,但是希望在Grid查询过程中有loadMask效果。
对于1)
直接在Ext.onReady()中建立GridPanel,并且ds调用load方法。
对于2)
在Ext.onReady()中建立GridPanel,而在事件的function中写ds.load()
对于3)
在Ext.onReady()中建立GridPanel,而此时的ds为一个假ds,它的作用仅仅是为了能够在页面载入时就显示Grid,而在事件的function中
则再建立一个带有查询条件的ds,然后用该ds重新配置Grid.grid.reconfigure(ds,cm);
对于4)
查询的要求可由grid被新的ds重新配置的方法实现,但是会发现,这样做时,Grid的loadMask效果也不会出现了。有一个方法,就是在事件的
function中,将Grid的render的div清空,即div.innerHTML="" 之后再重新建立一个Grid。这样做的缺点就是会在有很多代码重复。
可能还会出现一些其他的function的调用以及无法取得某对象的问题。
以下由第三种情况为例,来说明增删改查。
建立:
var fds = new Ext.data.Store();
var cm = new Ext.grid.ColumnModel([
{header:'例子',width:100,dataIndex:'test',
editor:new Ext.form.TextField({
id:'test'
})
}
]);
var sm = new Ext.grid.RowSelectionModel();
var grid = new Ext.grid.EditorGridPanel({
ds:fds,
cm:cm,
sm:sm,
width:200,
height:200,
title:'举例',
renderTo:Ext.get("testdiv")
});
这里建立EditorGridPanel,是可以进行编辑的Grid.
1 查询:(点击按钮触发事件)
function btnclick()
{
var Record = Ext.data.Record.create([
{name:'test'}
]); //此处将record单独提出方便操作
var ds = new Ext.data.Store({
url:'访问的地址',
reader:new Ext.data.XmlReader({
record:'item'
},Record)
});
ds.load();
grid.reconfigure(ds,cm);
}
2 添加
新建一条数据
var r = new Record({
test:'随便举个例子'
});
插入到表格指定行,n为要插到这行后(此处取了表格的行数,即插入到最后),m是编辑完毕后focus的位置列数
var n = grid.getStore().getCount();
grid.stopEditing();
grid.getStore().insert(n,r);
grid.startEditing(n,m);
3 删除
删除选定的行
var r = grid.getSelectionModel().getSelected();
ds.remove(r);
删除多行,也一样,用getSelections()反法取到选中的行的一个数组,然后再一一删除。
删除所有行
ds.removeAll();
4 修改
两种方法,一种直接手动点击需要修改的单元格,EditorGridPanell中的ClicksToEdit来设置点击几下进入编辑状态。
还有一种从别处获得数据自动修改。
假设一条新的数据,
var nr = ['修改后的例子'];
选定你要修改的行
var recordtoedit = grid.getSelectionModel().getSelected();
或者var recordtoedit = ds.getAt(rowIndex);
recordtoedit.set('test','修改后的例子');
还可以在修改完毕后将修改过的行的颜色改变来标示出哪一条是修改过的。
添加事件
grid.on('afteredit',function(e){
var rowIndex = e.row;
grid.getView().getRow(rowIndex).style.backgroundColor="red";
//可以增加透明度效果
grid.getView().getRow(number).style.filter = "alpha(opacity=50)";
grid.getView().getRow(number).style.MozOpacity =".5";
});
Grid是Ext框架中一个重要的组成部分。一般建立Grid主要实现数据的增删改查。
建立一个Grid
Grid一般有三个主要的内容,ds,cm,GridPanel
var ds = new Ext.data.Store();
var cm = new Ext.grid.ColumnModel();
var grid = new Ext.grid.GridPanel();
如果要页面载入时,Grid不显示,事件触发查询并建立Grid显示。很简单,将GridPanel建立在事件的function中就可以了。
如果载入时就显示Grid,这里分几种情况:
(1)页面载入时,Grid显示,并查询和显示出数据。
(2)页面载入时,Grid显示,但不发送请求数据,事件触发查询。该查询条件已固定或不需要条件。
(3)页面载入时,Grid显示,不查询数据,事件触发查询,该查询需要从页面上存在的文本框中获得数据作为条件。
(4)与(3)相同,但是希望在Grid查询过程中有loadMask效果。
对于1)
直接在Ext.onReady()中建立GridPanel,并且ds调用load方法。
对于2)
在Ext.onReady()中建立GridPanel,而在事件的function中写ds.load()
对于3)
在Ext.onReady()中建立GridPanel,而此时的ds为一个假ds,它的作用仅仅是为了能够在页面载入时就显示Grid,而在事件的function中
则再建立一个带有查询条件的ds,然后用该ds重新配置Grid.grid.reconfigure(ds,cm);
对于4)
查询的要求可由grid被新的ds重新配置的方法实现,但是会发现,这样做时,Grid的loadMask效果也不会出现了。有一个方法,就是在事件的
function中,将Grid的render的div清空,即div.innerHTML="" 之后再重新建立一个Grid。这样做的缺点就是会在有很多代码重复。
可能还会出现一些其他的function的调用以及无法取得某对象的问题。
以下由第三种情况为例,来说明增删改查。
建立:
var fds = new Ext.data.Store();
var cm = new Ext.grid.ColumnModel([
{header:'例子',width:100,dataIndex:'test',
editor:new Ext.form.TextField({
id:'test'
})
}
]);
var sm = new Ext.grid.RowSelectionModel();
var grid = new Ext.grid.EditorGridPanel({
ds:fds,
cm:cm,
sm:sm,
width:200,
height:200,
title:'举例',
renderTo:Ext.get("testdiv")
});
这里建立EditorGridPanel,是可以进行编辑的Grid.
1 查询:(点击按钮触发事件)
function btnclick()
{
var Record = Ext.data.Record.create([
{name:'test'}
]); //此处将record单独提出方便操作
var ds = new Ext.data.Store({
url:'访问的地址',
reader:new Ext.data.XmlReader({
record:'item'
},Record)
});
ds.load();
grid.reconfigure(ds,cm);
}
2 添加
新建一条数据
var r = new Record({
test:'随便举个例子'
});
插入到表格指定行,n为要插到这行后(此处取了表格的行数,即插入到最后),m是编辑完毕后focus的位置列数
var n = grid.getStore().getCount();
grid.stopEditing();
grid.getStore().insert(n,r);
grid.startEditing(n,m);
3 删除
删除选定的行
var r = grid.getSelectionModel().getSelected();
ds.remove(r);
删除多行,也一样,用getSelections()反法取到选中的行的一个数组,然后再一一删除。
删除所有行
ds.removeAll();
4 修改
两种方法,一种直接手动点击需要修改的单元格,EditorGridPanell中的ClicksToEdit来设置点击几下进入编辑状态。
还有一种从别处获得数据自动修改。
假设一条新的数据,
var nr = ['修改后的例子'];
选定你要修改的行
var recordtoedit = grid.getSelectionModel().getSelected();
或者var recordtoedit = ds.getAt(rowIndex);
recordtoedit.set('test','修改后的例子');
还可以在修改完毕后将修改过的行的颜色改变来标示出哪一条是修改过的。
添加事件
grid.on('afteredit',function(e){
var rowIndex = e.row;
grid.getView().getRow(rowIndex).style.backgroundColor="red";
//可以增加透明度效果
grid.getView().getRow(number).style.filter = "alpha(opacity=50)";
grid.getView().getRow(number).style.MozOpacity =".5";
});
发表评论
-
采用CAS原理构建单点登录
2014-06-30 15:47 555企业的信息化过程是一 ... -
开发人员网址
2014-06-27 17:43 657http://www.ostools.net/ 开源中国在 ... -
CAS ABA问题
2013-08-20 22:03 938CAS ABA问题 在JDK 5之前Java语言是靠sy ... -
将java异常信息stackTrace转换成字符串
2011-05-26 12:48 5044public static void main(String[ ... -
Ralasafe
2011-05-06 15:22 1525Ralasafe简介 Ralasafe 是用Java编写的开源 ... -
Struts2--jdk1.4--weblogic8.x
2011-05-05 14:28 1412由于Struts2架构不能直接在jdk1.4的weblogic ... -
myeclipse svn 修改用户名和密码
2011-03-22 09:39 812由于在svn的界面中并没 ... -
生成javadoc的乱码解决
2011-02-28 18:01 871myeclipse输入在虚拟机参数的地方输入如下参数即可: ... -
Win7 时区问题解决办法
2011-02-21 17:28 1044为了彻底的解决JAVA在获取系统时间少8小时的问题,请修改注册 ... -
Servlet中doGet与doPost的区别
2010-10-30 23:48 1246Servlet中doGet与doPost的区 ... -
怎样获取表记录数量最快?
2010-10-25 14:29 1069Select Count (*)和Select Count(1 ... -
SVN图标含义
2010-08-27 14:13 1913SVN图标含义 灰色向右箭头:本地修改过 蓝色向左箭头:SV ... -
新发现,中文java类能够运行
2010-08-06 10:37 847大家运行一下下面的代码,呵呵 public class 资讯 ... -
Sring split方法
2010-07-09 19:02 1400在java.lang包中有String.split()方法,返 ... -
hashtable的遍历
2010-06-02 10:12 3609Hashtable<String, String> ... -
oracle中的package
2010-05-19 16:26 1706oracle中的package (2006-12-21 20: ... -
视频服务器
2010-05-17 09:29 896linux下: Kd视频服务器,helix视频服务器,real ... -
理解JNDI中 java:comp/env/jdbc/datasource 与 jdbc/datasource 的不同之处
2010-04-15 23:04 1991[原创]理解JNDI中 java:comp/env/jdbc/ ... -
内存数据库-timesten
2010-04-13 14:33 2742timesten在重研所多个项目中都有内存数据库的应用,但重研 ... -
Open Flash Chart
2010-04-13 13:17 1539Open Flash Chart(OFC) 是一个开 ...
相关推荐
在IT领域,特别是Web开发中,Ext Grid是一个广泛使用的组件,用于展示和管理大量数据。它提供了丰富的功能,包括排序、筛选、分页等,使得数据的交互和操作变得非常便捷。当我们需要将Ext Grid中的数据导出为Excel...
综上所述,EXT Grid导出Excel涉及到的技术主要包括EXT Grid的数据操作、XLSX.js库的使用、自定义按钮和事件处理、文件下载触发机制以及可能的样式转换和性能优化。通过这些技术,我们可以实现EXT Grid数据的便捷导出...
1. **数据绑定**:EXTGRID能够与后台数据源进行双向绑定,即当用户在界面上操作时,数据会自动更新到服务器;反之,服务器的数据变化也会实时反映到网格中。 2. **列配置**:EXTGRID允许自定义列,包括列宽、标题、...
4. **使用CellContext**:EXT Grid的`CellContext`对象可以帮助我们定位和操作单元格。在自定义渲染器中,可以使用`CellContext`来获取当前单元格的位置,并据此调整其样式,比如设置`colspan`属性来合并列。 5. **...
在EXT Grid中,DWR提供了对XMLHttpRequest的封装,使得开发者无需直接操作这个对象,而是通过更友好的接口进行操作。 总结来说,"ext grid json分页显示"是通过EXT.js的Grid组件结合DWR的Ajax能力,实现前端数据的...
Ext Grid和Tree是Ext JS库中的两种重要组件,它们在Web应用开发中广泛用于数据展示和组织。Ext JS是一个强大的JavaScript框架,它提供了一系列高级UI组件,帮助开发者构建功能丰富的、交互性强的Web应用程序。 首先...
EXT Grid是一款基于JavaScript的强大的数据网格组件,广泛用于Web应用程序中展示、操作和管理大量结构化数据。它提供了丰富的功能,如排序、过滤、分页、编辑等,并且支持自定义列、行以及多种交互模式。在EXT Grid...
首先,Ext JS是一个强大的JavaScript UI框架,它提供了丰富的组件库,包括数据网格(Grid),用于展示和操作大量结构化的数据。Ext Grid允许用户筛选、排序、分页以及编辑数据,是企业级应用中常用的数据展示工具。 ...
在EXT JS这个强大的JavaScript...综上所述,EXT Grid数据绑定涉及数据模型、视图和数据源的交互,而数据查找和重填则是数据操作的关键步骤。通过熟练掌握这些概念和方法,开发者能够构建出高效、动态的数据展示应用。
2. **数据源(Store)**: Store是EXT JS中管理数据的组件,它负责加载、存储和操作数据。Grid与Store绑定,以便显示和更新数据。通常,Store会连接到一个服务器端的数据接口,如JSON或XML。 3. **列模型(Column ...
在探讨“Ext Grid表格的自动宽度及高度的实现”这一主题时,我们深入解析如何在Ext JS框架下,利用其强大的Grid组件自适应容器尺寸,实现表格宽度与高度的自动调整。这一技术对于构建响应式、用户友好的界面至关重要...
Ext Grid是Ext JS库中的一个核心组件,用于展示和操作数据集。在Web应用程序中,它经常被用来作为数据表格,允许用户查看、排序、筛选和编辑数据。在这个"Ext Grid简单实例"中,我们将探讨如何从Web服务提取数据并将...
EXT Grid控件是EXT JS库中的一个核心组件,它用于创建功能丰富的数据网格,能够高效地展示和操作大量数据。EXT Grid广泛应用于J2EE框架中,为Web应用提供了强大的数据展示和交互能力。在本实例中,我们将探讨四种...
在EXT JS框架中,Ext Grid是一个非常常用的组件,用于展示数据并支持各种操作,如排序、筛选和分页。然而,默认情况下,EXT Grid遵循ASCII码排序规则,这在处理中文字符时可能导致排序不符合预期,因为中文字符的...
本实例使用官方Ext3.1包 分五个部分 1.创建简单快捷的Ext Grid控件 代码清晰 2.Grid 读取 Xml 3.Grid 读取 json 4.Grid 读取 Excel 5.直接在 Grid 控件进行增删改查的操作 有任何疑问的同志欢迎提出即可谢谢
"extgrid导出excel"这个主题是关于如何将ExtJS中的数据网格(Ext Grid)的数据导出到Excel文件中,方便用户进行数据管理和分析。 首先,让我们深入了解一下Ext Grid。Ext Grid是一种用于展示和操作大量结构化数据的...
EXT2.0 GRID 示例是一个基于EXT JavaScript库的高级数据展示和操作组件的实例。EXT是一个强大的前端开发框架,尤其在创建交互式Web应用程序方面表现出色。EXT2.0是EXT库的一个早期版本,它提供了丰富的用户界面组件...
EXT 提供了一种优雅的方式来展示和操作数据,尤其适用于创建交互式的Web应用程序,如Ajax驱动的数据表格。Ajax技术使得页面无需刷新就能获取和更新数据,提高了用户体验。 首先,让我们深入了解一下EXT Grid。EXT ...
Ext4 Grid打印是基于Ext JS库的一个功能,用于在网页中展示数据的表格组件。Ext4 Grid提供了丰富的功能,包括数据排序、筛选、分页以及列的动态调整等。在这个场景下,"grid打印"指的是将Grid中的数据导出或者可视化...
在EXT Grid中,导出数据到Excel是一种常见的需求,它允许用户方便地处理和分析大量数据。EXT Grid是一个强大的JavaScript组件,提供了丰富的功能,包括数据展示、排序、筛选和编辑等。导出到Excel功能则进一步增强了...