Ext.grid.column.Action 是 Ext.grid.column.Column的子类,用来在Grid的单元格里渲染一个或多个图标。 每个图标均可自定义点击处理事件。
var store = Ext.create('Ext.data.Store',{ fields:['userName','loginName'],
data:[{userName:"Michael", loginName:"Scott"},
{userName:"Dwight", 'loginName:"Schrute"},
{userName:"Jim", loginName:"Halpert"}]});
var grid = Ext.create('Ext.grid.Panel',{
store:store,
columns:[{
text:'姓名',
dataIndex:'userName'
},{
text:'用户名',
dataIndex:'loginName'
},{
xtype:'actioncolumn',
width:50,
items:[{
icon:'extjs/examples/shared/icons/fam/cog_edit.png',
handler:function(grid, rowIndex, colIndex){
var record = grid.store.getAt(rowIndex);
alert("edit" + record.get('userName'));
}
},{
icon:'extjs/examples/restful/images/delete.png',
tooltip:'Delete',
handler:function(grid, rowIndex, colIndex){var rec = grid.getStore().getAt(rowIndex);
alert("Terminate "+ rec.get('firstname'));}}]
}],
renderTo:Ext.getBody();
});
对于用户操作表格的方式,目前主要是两种:一是使用表格的toolbar添加 crud按钮,二是使用actioncolumn列。按钮方式提供了批量操作表格记录的方式。actioncolumn则直接操作单条记录。我推荐对于单条记录的操作如查看详情、修改记录、删除单条记录采用actioncolumn,而像批量删除这样的批量操作采用 表头按钮。当然具体情况还得具体分析。
相关推荐
3. **配置表格面板**:在`Ext.grid.Panel`的`columns`配置项中使用自定义的`MyTextActionColumn`。 4. **事件处理**:定义按钮点击时的处理逻辑,这通常通过`handler`属性或自定义的方法来完成,处理业务逻辑或调用...
ExtJS 是一个强大的JavaScript框架,主要用于构建富客户端的Web应用程序,而Grid是ExtJS中的一个核心组件,用于展示数据表格。在本篇文章中,我们将深入探讨如何使用ExtJS与Gride进行交互,创建功能丰富的数据网格。...
动态添加按钮在很多情况下非常有用,比如在表格数据加载后根据特定条件显示或隐藏操作按钮,或者根据用户权限控制按钮的显示。在ExtJS中,我们可以利用`grid`的`column`配置和`actionColumn`来实现这一功能。 首先...
总的来说,这个项目展示了如何使用ExtJS Grid组件构建一个具备分页、编辑、删除、查看等功能的表格,并结合Struts2、Hibernate3和Spring实现后台的数据操作和管理。通过对这些文件的学习和理解,开发者可以深入掌握...
在本文中,我们将深入探讨ExtJS 4中的GridPanel组件,以及如何利用它来实现不同的样式和功能。GridPanel是ExtJS中用于展示表格数据的关键组件,它支持丰富的交互性和定制化。 首先,我们看到一个简单的GridPanel...
3. **表格操作**:GridPanel是EXTJS中的核心组件,用于展示数据集。在这个例子中,我们可以预期GridPanel会包含添加、删除和编辑按钮。通过Grid的行编辑插件,用户可以直接在表格内进行编辑;通过行命令列,可以添加...
在现代Web应用程序开发中,特别是基于ExtJS框架的应用程序中,`GridPanel`是处理表格数据展示的一个非常重要的组件。它不仅可以帮助开发者轻松地展示数据,还提供了丰富的交互功能,如排序、分页等。本文将通过一个...
这个例子中,ExtJS创建了一个数据存储来管理表格数据,定义了网格组件包括列信息,并绑定了编辑和删除操作。当页面加载完成时,Ext.onReady方法会执行,创建并渲染网格。 总结来说,jQuery适合那些寻求轻量级解决...
通过java生成Extjs表格,并在java里写事件,js通过动态输出的事件,做出相应。 参考方法:前台(columns : me.renderColumns(columns),//绑定列头),后台(/query/componentColumnAction_queryColumns.action)。
4. **columns**:定义Grid的列,每个列都有自己的属性,如`text`(列标题)、`sortable`(是否可排序)、`renderer`(值渲染函数)、`dataIndex`(对应ArrayStore中字段的名字)、`type`(如特殊列类型`actioncolumn...