Ext4.0 自带的Ext.ux.RowEditing还不够完善,随手写个ux来用下,
v1.4 2011-09-12 变更内容:
1.重构,修复不少bug以及合并/新增一些配置项(具体看附件中的文档)
2.支持jsduck生成文档 (https://github.com/senchalabs/jsduck)
v1.0 2011.04.27 变更内容:
1.增加canceledit事件
2.增加startAdd方法,方便crud表格的添加操作
3.添加点击取消按钮后,自动重置或删除记录的功能
v1.1 2011.05.03 变更内容:
1.startAdd方法增加position参数,修复autoSync设值的bug
2.配置参数removePhantomsOnCancel改名为autoRecoverOnCancel
3.startEdit前先调用cancelEdit函数,以便正确的恢复现场
v1.2 2011.05.04 变更内容:
1.包名改为Ext.ux.grid.plugin
2.添加配置参数hideTooltipOnAdd
3.判断是否删除新增记录的逻辑优化
4.代码风格等方面的改进
v1.3 2011.05.22 变更内容:
1. 设置clicksToEdit为0,可取消双击/单击事件触发编辑
2. 提供field默认配置,只需给column添加一个fieldType
- {
- text: 'Enable',
- dataIndex: 'enable',
- width: 80,
- renderer: function(v){return v?'Enable':'Disable'},
- fieldType: 'checkboxfield',
- field: {
- boxLabel: 'Enable'
- }
- }
代码如下:
-
- /**
- * @class Ext.ux.grid.plugin.RowEditing
- * @extends Ext.grid.plugin.RowEditing
- * @xtype ux.rowediting
- *
- * 对Ext原有的RowEditing插件增加新功能.<br/>
- * Improve Ext.ux.grid.plugin.RowEditing,add some usefull features.<br/>
- *
- * @author tz <atian25@qq.com> <br/>
- * @date 2011-08-20 <br/>
- * @version 1.4 <br/>
- * @blog http://atian25.iteye.com <br/>
- * @forum http://www.sencha.com/forum/showthread.php?131482-Ext.ux.RowEditing-add-some-usefull-features<br/>
- *
- */
- Ext.define('Ext.ux.grid.plugin.RowEditing', {
- extend: 'Ext.grid.plugin.RowEditing',
- alias: 'plugin.ux.rowediting',
- /**
- * 是否添加记录在当前位置<br/>
- * whether add record at current rowIndex.<br/>
- * see {@link #cfg-addPosition}
- * @cfg {Boolean}
- */
- addInPlace: false,
- /**
- * 添加记录的具体位置 <br/>
- * * 当addInPlace为true时,该参数<=0代表当前位置之前,否则代表当前位置之后<br/>
- * * 当addInPlace为false时,代表具体的rowIndex,-1则为最后<br/>
- * Special rowIndex of added record.<br/>
- * * when {@link #cfg-addInPlace} is true, this cfg means before(<=0) or after(>0) current rowIndex.<br/>
- * * when {@link #cfg-addInPlace} is false, this cfg means the exact rowIndex.-1 means at the end.
- * @cfg {Number}
- */
- addPosition: 0,
- /**
- * 是否点击触发事件,0代表不触发,1代表单击,2代表双击,默认为双击.<br/>
- * The number of clicks on a grid required to display the editor (disable:0,click:1,dblclick:2)
- * @cfg {Number}
- */
- clicksToEdit:2,
- /**
- * 是否在取消编辑的时候自动删除添加的记录
- * if true, auto remove phantom record on cancel,default is true.
- * @cfg {Boolean}
- */
- autoRecoverOnCancel: true,
- /**
- * adding flag
- * @private
- * @type Boolean
- */
- adding: false,
- autoCancel:true,
- /**
- * when add record, hide error tooltip for the first time
- * @private
- * @type Boolean
- */
- hideTooltipOnAdd: true,
- /**
- * register canceledit event && relay canceledit event to grid
- * @param {Ext.grid.Panel} grid
- * @override
- * @private
- */
- init:function(grid){
- var me = this;
- /**
- * 取消编辑事件.<br/>
- * Fires canceledit event.And will be relayEvents to Grid.<br/>
- * @see {@link Ext.ux.grid.RowActions#event-beforeaction} <br/>
- * @event canceledit
- * @param {Object} context
- */
- me.addEvents('canceledit');
- me.callParent(arguments);
- grid.addEvents('canceledit');
- grid.relayEvents(me, ['canceledit']);
- },
- /**
- * 提供默认的Editor配置
- * @example
- * {header:'手机',dataIndex:'phone',fieldType:'numberfield',field:{allowBlank:true}}
- * provide default field config
- * @param {String} fieldType 可选值:numberfield,checkboxfield,passwordField
- * @return {Object}
- * @protected
- */
- getFieldCfg: function(fieldType){
- switch(fieldType){
- case 'passwordField':
- return {
- xtype: 'textfield',
- inputType: 'password',
- allowBlank:false
- }
- case 'numberfield':
- return {
- xtype: 'numberfield',
- hideTrigger: true,
- keyNavEnabled: false,
- mouseWheelEnabled: false,
- allowBlank:false
- }
- case 'checkboxfield':
- return {
- xtype: 'checkboxfield',
- inputValue: 'true',
- uncheckedValue: 'false'
- }
- }
- },
- /**
- * Help to config field,just giving a fieldType and field as additional cfg.
- * see {@link #getFieldCfg}
- * @private
- * @override
- */
- getEditor: function() {
- var me = this;
- if (!me.editor) {
- Ext.each(me.grid.headerCt.getGridColumns(),function(item,index,allItems){
- if(item.fieldType){
- item.field = Ext.applyIf(item.field||{},this.getFieldCfg(item.fieldType))
- }
- },this)
- // keep a reference for custom editor..
- me.editor = me.initEditor();
- }
- me.editor.editingPlugin = me
- return me.editor;
- },
- /**
- * if clicksToEdit===0 then mun the click/dblclick event
- * @private
- * @override
- */
- initEditTriggers: function(){
- var me = this
- var clickEvent = me.clicksToEdit === 1 ? 'click' : 'dblclick'
- me.callParent(arguments);
- if(me.clicksToEdit === 0){
- me.mun(me.view, 'cell' + clickEvent, me.startEditByClick, me);
- }
- },
- /**
- * 添加记录
- * add a record and start edit it (will not sync store)
- * @param {Model/Object} data Data to initialize the Model's fields with <br/>
- * @param {Object} config see {@link #cfg-addPosition}.
- */
- startAdd: function(data,config){
- var me = this;
- var cfg = Ext.apply({
- addInPlace: this.addInPlace,
- addPosition: this.addPosition,
- colIndex: 0
- },config)
- //find the position
- var position;
- if(cfg.addInPlace){
- var selected = me.grid.getSelectionModel().getSelection()
- if(selected && selected.length>0){
- position = me.grid.store.indexOf(selected[0])
- console.log('a',position)
- position += (cfg.addPosition<=0) ? 0: 1
- }else{
- position = 0
- }
- }else{
- position = (cfg.addPosition==-1 ? me.grid.store.getCount() : cfg.addPosition) || 0
- }
- var record = data.isModel ? data : me.grid.store.model.create(data);
- var autoSync = me.grid.store.autoSync;
- me.grid.store.autoSync = false;
- me.grid.store.insert(position, record);
- me.grid.store.autoSync = autoSync;
- me.adding = true
- me.startEdit(position,cfg.colIndex);
- //since autoCancel:true dont work for me
- if(me.hideTooltipOnAdd && me.getEditor().hideToolTip){
- me.getEditor().hideToolTip()
- }
- },
- /**
- * 编辑之前,自动取消编辑
- * Modify: if is editing, cancel first.
- * @private
- * @override
- */
- startEdit: function(record, columnHeader) {
- var me = this;
- if(me.editing){
- me.cancelEdit();
- }
- me.callParent(arguments);
- },
- /**
- * 修改adding的状态值
- * Modify: set adding=false
- * @private
- * @override
- */
- completeEdit: function() {
- var me = this;
- if (me.editing && me.validateEdit()) {
- me.editing = false;
- me.fireEvent('edit', me.context);
- }
- me.adding = false
- },
- /**
- * 取消编辑
- * 1.fireEvent 'canceledit'
- * 2.when autoRecoverOnCancel is true, if record is phantom then remove it
- * @private
- * @override
- */
- cancelEdit: function(){
- var me = this;
- if (me.editing) {
- me.getEditor().cancelEdit();
- me.editing = false;
- me.fireEvent('canceledit', me.context);
- if (me.autoRecoverOnCancel){
- if(me.adding){
- me.context.record.store.remove(me.context.record);
- me.adding = false
- }else{
- //不需要reject,因为Editor没有更改record.
- //me.context.record.reject()
- }
- }
- }
- }
- })
- //ext-lang-zh_CN
- if (Ext.grid.RowEditor) {
- Ext.apply(Ext.grid.RowEditor.prototype, {
- saveBtnText: '保存',
- cancelBtnText: '取消',
- errorsText: '错误信息',
- dirtyText: '已修改,你需要提交或取消变更'
- });
- }