- 浏览: 203919 次
- 性别:
- 来自: 北京
文章分类
最新评论
-
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 446企业的信息化过程是一 ... -
开发人员网址
2014-06-27 17:43 570http://www.ostools.net/ 开源中国在 ... -
CAS ABA问题
2013-08-20 22:03 907CAS ABA问题 在JDK 5之前Java语言是靠sy ... -
将java异常信息stackTrace转换成字符串
2011-05-26 12:48 5018public static void main(String[ ... -
Ralasafe
2011-05-06 15:22 1493Ralasafe简介 Ralasafe 是用Java编写的开源 ... -
Struts2--jdk1.4--weblogic8.x
2011-05-05 14:28 1374由于Struts2架构不能直接在jdk1.4的weblogic ... -
myeclipse svn 修改用户名和密码
2011-03-22 09:39 775由于在svn的界面中并没 ... -
生成javadoc的乱码解决
2011-02-28 18:01 845myeclipse输入在虚拟机参数的地方输入如下参数即可: ... -
Win7 时区问题解决办法
2011-02-21 17:28 1007为了彻底的解决JAVA在获取系统时间少8小时的问题,请修改注册 ... -
Servlet中doGet与doPost的区别
2010-10-30 23:48 1166Servlet中doGet与doPost的区 ... -
怎样获取表记录数量最快?
2010-10-25 14:29 1011Select Count (*)和Select Count(1 ... -
SVN图标含义
2010-08-27 14:13 1881SVN图标含义 灰色向右箭头:本地修改过 蓝色向左箭头:SV ... -
新发现,中文java类能够运行
2010-08-06 10:37 767大家运行一下下面的代码,呵呵 public class 资讯 ... -
Sring split方法
2010-07-09 19:02 1317在java.lang包中有String.split()方法,返 ... -
hashtable的遍历
2010-06-02 10:12 3570Hashtable<String, String> ... -
oracle中的package
2010-05-19 16:26 1681oracle中的package (2006-12-21 20: ... -
视频服务器
2010-05-17 09:29 837linux下: Kd视频服务器,helix视频服务器,real ... -
理解JNDI中 java:comp/env/jdbc/datasource 与 jdbc/datasource 的不同之处
2010-04-15 23:04 1958[原创]理解JNDI中 java:comp/env/jdbc/ ... -
内存数据库-timesten
2010-04-13 14:33 2692timesten在重研所多个项目中都有内存数据库的应用,但重研 ... -
Open Flash Chart
2010-04-13 13:17 1511Open Flash Chart(OFC) 是一个开 ...
相关推荐
本实例使用官方Ext3.1包 分五个部分 1.创建简单快捷的Ext Grid控件 代码清晰 2.Grid 读取 Xml 3.Grid 读取 json 4.Grid 读取 Excel 5.直接在 Grid 控件进行增删改查的操作 有任何疑问的同志欢迎提出即可谢谢
ExtJS grid过滤操作,可以动态操作本地的store更改筛选的内容
Ext GridPanel 中实现加链接操作 Ext GridPanel 中实现加链接操作 Ext GridPanel 中实现加链接操作
extjs 4.0 Grid属性方法以及常用操作,板面属性和对象
8.5.5. 反向操作,ext把json变成字符串 8.6. 小声说说scope 8.7. 菜单和工具条 8.7.1. 至简至廉的菜单 8.7.2. 丰富一点儿的多级菜单 8.7.3. 单选多选,菜单里搞这套 8.7.4. 小把戏,定制好的菜单 8.7.5. SplitButton...
NULL 博文链接:https://babydeed.iteye.com/blog/1426419
8.5.5. 反向操作,ext把json变成字符串 8.6. 小声说说scope 8.7. 菜单和工具条 8.7.1. 至简至廉的菜单 8.7.2. 丰富一点儿的多级菜单 8.7.3. 单选多选,菜单里搞这套 8.7.4. 小把戏,定制好的菜单 8.7.5. SplitButton...
8.3.2 在CRUD操作中restful的设置以及使用Ext.Direct的问题 247 8.4 ListView控件 248 8.5 本章小结 251 第四部分 Ext 扩展和Ext插件 第9章 Ext 扩展 254 9.1 利用Ext.extend实现继承 254 9.2 与Ext扩展相关的预备...
/** * 此组件为带时分秒的日期控件,在原DateTimeField修改 * 此功能较以前版本增加功能 * 1,在GRID中使用时,增加单元格处于编辑状态时的初始化此控件值 * 2,增加操作日选择器时初始化时分秒功能 * 3,增加点击...
Ex4.0共2个压缩包特性,《ext js权威指南》 ...10.3.4 数据汇总功能:ext.grid.featrue.abstractsummary与ext.grid.featrue. summary / 539 10.3.5 分组功能:ext.grid.featrue.grouping / 543 10.3.6 分组汇总...
使用ext,mvc模式,开发的ext入门手册,包括介绍,布局案例,组件使用案例,组件查询案例,grid数据操作案例,是对ext的总结技术文档以及实例。
ExtJs grid多选时获取选中的所有值,以及其他相关的操作
主要包括data,widget,form,grid,dd,menu,其中最强大的应该算grid了,编程思想是基于面对对象编程(oop),扩展性相当的好.可以自己写扩展.自己定义命名空间.web应用可能感觉太大.不过您可以根据需要按需加载您想要的...
8.5.5. 反向操作,ext把json变成字符串 8.6. 小声说说scope 8.7. 菜单和工具条 8.7.1. 至简至廉的菜单 8.7.2. 丰富一点儿的多级菜单 8.7.3. 单选多选,菜单里搞这套 8.7.4. 小把戏,定制好的菜单 8.7.5. ...
Ext GridPanel加载完数据后进行操作,比如load数据之后选定某些行数据,下面有个示例,需要的朋友可以参考下
在大家开发的系统中,如果程序用ExtJS做表现层,那么就需要使ExtJS开发的界面和后台Java代码中生成的数据交互,一般来说,可以选 择XML格式和Json格式的数据进行交互,但是XML格式的数据操作相对繁琐,因此,大部分...
这两天项目需要,临时做了一个,没有封装,该grid可以实现列和行的自定义添加和删除,包括修改标题,以及列的右击添加事件。希望对你们有所帮助!双击列名可以对列名进行修改,右键列名可以选择左侧和右侧添加列以及...
包括布局、事件、grid的绑定(包含增删改)以及数据库分页还有表单绑定取值和dateview控件的使用,树的使用,包含拖拉,修改等操作 dll文件为extnet3.5,可自行下载黏贴到要目录下的net35文件夹里即可
一个使用 ext 编写的类似于 Windows 系统的操作页面 里面有 一些 GRID ,TAB的实例 material文件夹是主要代码 其他的在EXTJS文件夹