EXTJS Grid 之ActionColumn
分类: EXTJS4 |
在EXTJS的各个版本中,grid应该是我们最常用的组件之一,EXTJS的grid为我们提供了很强大的功能,相信,做过extjs的人都已经了解了该组件的强大之处。比如说:排序、过滤、编辑、等等。这节呢,咱们主要是对grid中的ActionColumn做一个说明。以便在大家用到的时候。便于查阅和参考。
EXTJS的Grid为我们提供了好多的列类型。比如说(ActionColumn、BooleanColumn、NumberColumn、DateColumn),在使用时,他们都大同小异。分别应用到不同的场景当中。
ActionColumn我们可以称呼他为动作列,顾名思义,也就是说,当我们该列需要出发一个动作时,我们就用到ActioColumn,比如说:我们需要点击某一列,连接到该记录的详细页面。当然,如果你用列的renderer函数也是可以实现的,但是。在扩展性和交互上就不太方便了。所以,我建议。如果,我们有类似的需求。我们还是用ActionColumn。
众所周知,在使用EXTJS的Grid时,必须必备的就是ColumnModel和Store、当然在EXTJS4中就是Model和Store、所以第一步我们首先要创建这两个对象,本文我们用EXTJS3.x来说明使用ActionColumn。着重演示一下ColumnModel的代码示例:
//创建列模型
var cm=new Ext.grid.ColumnModel([
new Ext.grid.RowNumberer({
renderer:function(value,metadata,record,rowIndex){
return curth.startnum + 1 + rowIndex;
}
}),
{header:"ID",dataIndex:"ID",hidden:true},
{header:"文件名",dataIndex:"FileName"},
{header:"运行时间",dataIndex:"RunTime"},
{header:"运行状态",dataIndex:"RunState"},
{xtype:"actioncolumn",header:"下载",items:[
{icon:'Image/download.png',tooltip:"下载",handler:function(grid,rindex,cindex){
var record=grid.getStore().getAt(rindex);
var id=record.get("ID");
download(id);
}}
]}
]);
如上代码,我们创建了一个列模型对象。其中红色字体部分就是我们所说的ActionColumn。首先。创建一个ActionColumn对象,然后为其添加了一个元素。(我们可以把这个元素理解成为带有背景图片的按钮)。元素中icon指定了图片的路径,tooltip指定的工具提示信息,handler为元素的点击事件。事件可以传递三个参数,grid为grid本身对象,rindex为当前航索引,cindex为当前列索引。这样,我们在运行时。就会出现如上图中的效果了。
另外,我们可能还会根据某一列的值,来动态修改我们的图标。比如说:我们根据销售额,大于3000的我们用对号表示,小于的用错号表示。这个需求,ActionColumn也是能做到的。我们把上边的代码稍作改动,就可以实现
//创建列模型
var cm=new Ext.grid.ColumnModel([
new Ext.grid.RowNumberer({
renderer:function(value,metadata,record,rowIndex){
return curth.startnum + 1 + rowIndex;
}
}),
{header:"ID",dataIndex:"ID",hidden:true},
{header:"文件名",dataIndex:"FileName"},
{header:"运行时间",dataIndex:"RunTime"},
{header:"运行状态",dataIndex:"RunState"},
{xtype:"actioncolumn",header:"下载",items:[
{
getClass: function(v, meta, record) {
if (record.get('sellcount') < 3000) {
this.items[0].tooltip = 'Do not buy!';
return 'yes';
} else {
this.items[0].tooltip = 'Buy stock';
return 'no';
}
},
handler: function(grid, rowIndex, colIndex) {
}
}
]}
]);
与第一段代码不同的是,这次我们使用了getClass这个函数,这个函数,可以根据我们的逻辑返回相应的css名称。这样,我们就可以完成我们的需求了。
相关推荐
就是extjs4里面,想给grid里面一格中,文字后面加个小图标。 因为俺们项目就只是文字+图标,所以俺就没有复写Actioncolumn,而是从Column下面继承了一下。。 包含自定义插件源码、效果图等等。
ExtJS grid过滤操作,可以动态操作本地的store更改筛选的内容
extjs grid示例代码extjs grid示例代码extjs grid示例代码extjs grid示例代码
ExtJs Grid是否选择行,是:返回选择行record;否:返回false
EXTJS grid导出EXCEL文件,源码可以直接导入MYECLIPSE使用,EXTJS版本3.2.0
extjs grid 多表头 插件 extjs grid 多表头 插件
很多同事在用extjs grid做分页的时候,往往会想用grid的多选功能来实现导出Excel之类的功能(也就是所谓的多选记忆功能),但在选选择下一页的时候 上一页选中的已经清除 这是因为做分页的时候又向服务器请求了分页...
这是利用sencha cmd 生成的GridFilterDemo工程中的app和build文件夹,其余文件过大并且与主题无关,因此未包含。具体方法,请参看我的博客: 《Extjs4.2 Grid Filter Feature 表格过滤特性》
ExtJs grid多选时获取选中的所有值,以及其他相关的操作
extjs grid ide:myeclipse5.5 jboss4.2.1 extjs4.2.1
ExtJs 4.0 Grid 单元格合并控件封装
这是一个简单的在extjs下的grid转化到Excel,里面代码简单易懂,在包里面还集成了复杂的js转化函数,不过本人没有用它来进行转化! 注:在用EXTJS的导出Excel技术中,一定要注意分页的问题
自己写的一个Extjs Grid2Grid拖拽
Extjs动态Grid的生成 htm
EXTJS Grid布局总结例子,含源代码。
非常好的学习EXTJS Grid的教程,欢迎大学下载
Extjs 中想改变grid 行高,如果只是简单的设置了height的值是可以实现grid 的行高,但是如果使用了插件:rowexpander ,最出现新的问题。 感兴趣的朋友可以试试的。 此文档可以解决你的烦恼,为了找到资源下载,...
Extjs Grid 操作大全,获取各种值和添加各种点击事件
NULL 博文链接:https://kohisa.iteye.com/blog/651399