ExtJS 4.x grid如何监听回车键事件?

jacksoniggyjoe 发布于 2013/05/11 14:49
阅读 5K+
收藏 0

如题,我在表格中需要添加新行的时候希望编辑完记录的最后一个cell的时候希望按下回车就是返回新行,这个应该用什么事件监听?

用4.1中grid的cellkeydown事件监听回车键按下的时候就是没有反应,不知道是我搞错了还是这个事件根本不能用的。

var SubGrid = Ext.create('Ext.grid.Panel', {
                renderTo: "SubGrid",
                title: "关联模型实例-DetailGrid",
                width: 500,
                height: 150,
                verticalScrollerType: 'paginggridscroller',
                border: false,
                frame: true,
                selType: "cellmodel",
                store: KHYQInfoStore,
                viewConfig: {
                    columnsText: "显示/隐藏列",
                    sortAscText: "正序排列",
                    sortDescText: "倒序排列",
                    forceFit: true
                },
                columns: [
                new Ext.grid.RowNumberer({ text: "id", width: 35 }),
                { header: "ZBID", dataIndex: "ZBID", sortable: true, width: 50 },
                { header: "ZBXH", dataIndex: "ZBXH", sortable: true, width: 50 },
                { header: "标题", dataIndex: "Title", editor: 'textfield', sortable: true, width: 100 },
                { header: "内容", dataIndex: "Content", editor: 'textfield', sortable: true, width: 100 }
            ],
                plugins: [
            Ext.create('Ext.grid.plugin.CellEditing', {
                clicksToEdit: 1
            })
        ],
                loadMask: true,
                listeners:{
                      cellkeydown:function (SubGrid, td, cellIndex, record, tr, rowIndex, e, eOpts) {
                if (e.getKey() == Ext.EventObject.ENTER) { 
                    alert("敲我为");
                }
            }
}
            });

问题解决:理解错误了,不能在gridPanel里监听键盘,应该放到column的editor里面监听

{ header: "内容", dataIndex: "Content",
                    editor: { xtype: 'textfield', enableKeyEvents: true,
                        listeners: {
                            keyup: function (textField, e) {

                                if (e.getKey() == 13) {

                                   //alert("敲我为");
                                   //清空过滤方案
                                   KHYQInfoStore.clearFilter();
                                   //新建子表记录
                                   var newZBID = parseInt(KHYQInfoStore.last().get("ZBID")) + 1;
                                   var myKhyq = Ext.create('Sub', { ZBID: newZBID, ZBXH: '', Title: '', Content: '' });
                                   KHYQInfoStore.add(myKhyq);
                                   //过滤出新建记录
                                   KHYQInfoStore.filter('ZBID', newZBID);                     }

                            }
                        }
                    }, sortable: true, width: 100
                }

 

加载中
0
让你笑了
让你笑了

这个肯定不能再cellkeydown中写...那个触发不了 editor的事件...

我觉得简单的可以在 cellediting 的 edit中写..不过这样判断不了 enter key 事件...

或者直接重写onSpecialKey , 加入一个key

plugins: [
        Ext.create('Ext.grid.plugin.CellEditing', {
            clicksToEdit: 1 ,  
			onSpecialKey: function(ed, field, e) {
				var sm;		 
				if (e.getKey() === e.TAB) {
					e.stopEvent();
					if (ed) {
						// Allow the field to act on tabs before onEditorTab, which ends
						// up calling completeEdit. This is useful for picker type fields.
						ed.onEditorTab(e);
					}
					sm = ed.up('tablepanel').getSelectionModel();
					if (sm.onEditorTab) {
						return sm.onEditorTab(ed.editingPlugin, e);
					}
				}
				//这里写入最后的key
				this.lastKey = e.getKey();
			} , 
			listeners: {
				//加入EDIT事件
				edit: function(ce , rs){
					//判断lastKey
					if (ce.lastKey == Ext.EventObject.ENTER ){
						//写加入新一行
                        console.log("enter");
                        console.log(rs);
					}				
				}
			}
        })
    ]



0
幻大米
幻大米
keyup应改为keydown,因为对于回车键来说,表格单元只能捕获到keydown事件,keyup事件已脱离控制。
返回顶部
顶部