- 浏览: 462503 次
- 性别:
- 来自: 广州
文章分类
最新评论
-
njliukang:
请问一下,如果是异步树,应该怎么解决?貌似用expandpat ...
ExtJS Tree刷新后自动展开并选择节点 -
xiaoyueyue5721:
这是ScriptDataSet,如果换成OdaDataSet呢 ...
Birt动态填充DataSet数据 -
leexiaodong2009:
我准备要用那个锁定。
ExtJS 3.0 优秀扩展简介 (持续更新) -
babyhhcsy:
pizza823 写道分享下另外中方法store里面不用变在列 ...
ExtJS EditorGridPanel中时间日期编辑问题的总结 -
冷月宫主:
高手,请问一下有没有使用Ext做过多表头锁定左侧指定列的处理? ...
仅供纪念,曾做过的一些界面截图
前言,学习ExtJS Grid的新手,官方的这篇FAQ是必读的.
顺手翻译了一小点,大概了解就ok了,挺生硬的,呵呵...
翻译自:http://extjs.com/learn/Ext_FAQ_Grid#Behavior
5.行为
5.1 单元格的链接
>方法1: 自定义渲染方法
var yourColumn = { header: "Company", dataIndex: 'company', renderer: function(value, metaData, record, rowIndex, colIndex, store) { //在这里面可以按你自己的逻辑组成html然后返回 return '<a href="http://www.yourURL.com/" target="_blank">' + value +'</a>'; } }
>方法2: 监听Ext.grid.RowSelectionModel的rowselect事件
function handleRowSelect(selectionModel, rowIndex, selectedRecord) { //assuming the record has a field named 'url' or build it as you need to var url = selectedRecord.get('url'); //if you want to open another window window.open(url); } grid.getSelectionModel().on('rowselect', handleRowSelect);
5.2 为特殊的单元格添加点击事件
>除了下面将介绍的方法外,你还可以考虑下Saki提供的扩展:rowactions和cellactions,在http://www.extjs.eu 可找到
>如果你用的是编辑表格,则默认的选择模型是cell selection model,所以你可以监听beforecellselect和cellselect事件.
它会传递点击的行和列的index。其中行index可以用来找到点击的field。(需要注意,用户有可能会对行进行排序,所以直接用行index来寻找field是不安全的,最好用id来索引)
>对Grid的cellclick事件添加一个监听器
当点击的时候,传递row index 和column index 给监听器。其中column index可以用来确定是点击的是哪个field。
(用户有可能会对改变行的位置,如拖拽,所以用column index作为field index是不安全的)
cellclick事件的处理函数可以如下代码,找到一些相关的信息:
function(grid, rowIndex, columnIndex, e) { // Get the Record for the row var record = grid.getStore().getAt(rowIndex); // Get field name for the column var fieldName = grid.getColumnModel().getDataIndex(columnIndex); var data = record.get(fieldName); }
>一个用cellclick事件切换单元格颜色的例子: http://extjs.com/forum/showthread.php?p=119718#post119718
>change the CSS so all cells look like an editor is active, e.g.
.x-grid3-row td.x-grid3-td-<id-of-column> { background-color: white; padding: 0; } .x-grid3-row td.x-grid3-td-<id-of-column> .x-grid3-cell-inner { border: 1px solid #a9bfd3; padding: 2px 3px 2px 5px; }
5.3 如何添加/删除表格的某几列
参见http://extjs.com/forum/showthread.php?p=308635#post308635
5.4 如何为每行记录都添加一个操作列
>方法1:
1)Use the array grid example in your packaged download array-grid.js
以自带例子里面的array-grid.js来示范
2)Add an extra column to the column model definition and a custom rendere
添加额外的一列
{header: "Controls", width: 60, sortable: false, renderer: function() { return '<div class="controlBtn"> <img src="../shared/icons/fam/cog_edit.png" width="16" height="16" class="control_edit"> <img src="../shared/icons/fam/folder_go.png" width="16" height="16" class="control_go"></div>'; }, dataIndex: 'company'}
3)Then you would setup an event handler on the click event.
添加事件处理函数
grid.on('click', function(e) { var btn = e.getTarget('.controlBtn'); if (btn) { var t = e.getTarget(); var v = this.getView(); var rowIdx = v.findRowIndex(t); var record = this.getStore().getAt(rowIdx); var control = t.className.split('_')[1]; switch (control) { case 'edit': console.log('edit this record - ' + record.id); break; case 'go': console.log('go to this record - ' + record.id); break; } } }, grid);
4)Add the following CSS rule in array-grid.html to give some padding and change the cursor.
<style> .controlBtn img { padding-left: 4px; cursor: pointer; } </style>
5)Using this same method you could add as many tools as you would like in the controls section and always give them the css class "controls_{toolname}". Ideally you would break this out into an XTemplate so that you could simply pass in whatever tools you would like to use and output them on the grid as well.
>方法2:
使用RowAction这个扩展 http://extjs.com/forum/showthread.php?t=24508
发表评论
-
[4.x] Ext.ux.button.AutoRefresher
2011-05-23 11:22 2667/** * @class Ext.ux.b ... -
ExtJS 4.x 定制你的js
2011-05-01 00:04 0... -
ExtJS4.x 随笔(2011-04-29更新)
2011-04-29 13:41 36961.某个激活/禁用的checkboxfield,需要提交后台的 ... -
ExtJS 4.0 改善Ext.grid.plugin.RowEditing (重构,v1.4版本,2011-09-11)
2011-04-27 15:24 12529Ext4.0 自带的Ext.ux.RowEditing还不够完 ... -
ExtJS Tree刷新后自动展开并选择节点
2010-07-29 10:48 17620很久没写EXTJS的tip了... 今天帮组员写了一个 ... -
仅供纪念,曾做过的一些界面截图
2010-07-06 16:55 3371仅供记录用. 1.亚运(EXTJS) ... -
ExtJS3.x 随笔(2010-07-08更新)
2010-07-02 17:15 3519谨用该贴来记录一些使 ... -
Ext JS 3.2.0发布 -- 不少令人振奋的特性(更新翻译后的release-notes)
2010-04-01 15:02 3730不少令人振奋的新功能 1.form里面的复合组件 ---写 ... -
ExtJS EditorGridPanel中时间日期编辑问题的总结
2009-09-23 09:48 10140老是被反复问到这个问题,烦了...总结下... 1.首 ... -
Ext 3.0.1 Release Notes
2009-08-31 07:58 3920难熬的三天....JE终于恢复了.... 可惜要付费 ... -
也谈谈Ext.Grid之记录用户使用习惯—隐藏列
2009-08-27 15:58 7549在论坛看到http://www.iteye ... -
ExtJS 常见问题 - by tz
2009-08-14 16:13 0经常在群里面被问到的一些问题,不如汇集起来算了... ... -
ExtJS 3.0 优秀扩展简介 (持续更新)
2009-08-14 10:14 17182自带示例里面的扩展就 ... -
ExtJS 2.3/3.0 定制你所需要的模块
2009-08-12 13:49 13221很实在的一个需求,就是 ... -
ExtJS Combo 下拉列表正常显示HTML标签内容
2009-08-11 15:02 5862解决问题: http://www.iteye.com/pro ... -
ExtJS 3.0 Designer Preview (官方的IDE可视化工具)
2009-08-11 12:35 24634原文地址: http://extjs.com/blog/200 ... -
ExtJS Menu嵌套combo等控件时,自动隐藏/遮盖等bug的解决方案
2009-08-06 12:41 61362010-07-08补充: DateField隐藏的 ... -
ExtJS 输入框/MessageBox.prompt 禁止粘贴
2009-07-30 13:33 6734回答问题http://www.iteye.com/proble ... -
ExtJS 修复3.0里面的LovCombo(下拉多选框)的Bug
2009-07-27 16:16 11288如果你不知道lovcombo是什么,看http://setti ... -
续:ExtJS Chart 扩展(重构了下,并写了个新的示例--内存监控)
2009-07-27 15:55 5895续前文:http://atian25.iteye.com/bl ...
相关推荐
ExtJs_Wcf_Linq_PageGrid, zip format
ExtJs_grid.txt grid使用总结
ExtJS_可编辑Grid进度条,可编辑,随意输入数值,根据进度情况变色的Grid列嵌入式滚动条.
非常好的学习EXTJS Grid的教程,欢迎大学下载
extjs_02_grid显示本地数据、显示跨域数据_.docx
ExtJS实现的用户管理界面,实现了用户的增加功能、修改功能、删除功能、查看工程。还提供了下拉列表选择框进行年龄的选择功能。
这是自己开发的利用EXTJS做为富客户端,wcf做为中间层,C#作为后台 里面功能包含有,导出(当前页和全部),导入,增删查改等相关功能
在tapestry中应用extjs的兼容代码
EXTJS+ASP开发通讯录程序,作为学习EXTJST学习实例
extjs_4.1.0_community_extjs4-mvc-complex-dashboard
SSH + EXTJS_管理系统.rarSSH + EXTJS_管理系统.rarSSH + EXTJS_管理系统.rar
Extjs_htmleditor插件
ExtJS_3.0_Class Diagram
ExtJs_Viewport_ExampleExtJs_Viewport_Example
AnyFo_-_ExtJS_移魂大法AnyFo_-_ExtJS_移魂大法AnyFo_-_ExtJS_移魂大法
ExtJs_servlet_JDBC 做的增删查改 学习ExtJs
资源名称:获取ExtjS表格的值_ ExtJS_3.4 cellSelectModel资源截图: 资源太大,传百度网盘了,链接在附件中,有需要的同学自取。
ExtJs_2API,ext初学者最佳API
ExtJS_V2.0教程.pdf ExtJS_V2.0教程.pdf
extjs asp.net开发的网站。适合初学者。