PDA

View Full Version : Ext.ux.grid.plugin.RowEditing - add some usefull features



atian25
26 Apr 2011, 11:11 PM
Features:
1.add canceledit event
2.add startAdd fn (support position)

Download:27993

ChangeLog:

v1.4 2011-09-11refactor and change doc style to jsduck (https://github.com/senchalabs/jsduck)


/**
* @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-09-11 <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: '已修改,你需要提交或取消变更'
});
}

kender
2 May 2011, 2:15 AM
thanks, I also added a custom change to "startAdd", to add a new record first or last


startAdd: function(data,last){
var position = (last) ? 0 : parseInt( this.grid.store.getCount() );
var record = this.grid.store.model.create(data);
this.grid.store.autoSync = false;
this.grid.store.insert(position, record);
this.grid.store.autoSync = true;
this.startEdit( position , 0 );
}
if "last" is true, new record will be added at last position

harrydeluxe
2 May 2011, 6:06 AM
Thank you! Here is my adapted version:

http://harrydeluxe.github.com/extjs-ux/img/rowediting.jpg

Source on Github:
https://github.com/harrydeluxe/extjs-ux/blob/master/ux/grid/plugin/RowEditing.js

Demo:
http://harrydeluxe.github.com/extjs-ux/example/grid/rowediting.html


/**
* Ext.ux.grid.RowEditing Class
*
* @extends Ext.grid.plugin.RowEditing
*
* The Initial Developer of the Original Code is tz (atian25@qq.com)
* @see http://www.sencha.com/forum/showthread.php?131482-Ext.ux.RowEditing-add-some-usefull-features
*
* @author Harald Hanek (c) 2011
* @version 1.0 License: MIT
* (http://www.opensource.org/licenses/mit-license.php)
*/

Ext.define('Ext.ux.grid.RowEditing', {
extend: 'Ext.grid.plugin.RowEditing',
alias: 'plugin.ux.rowediting',

removePhantomsOnCancel: true,

init: function(grid) {
var me = this;
me.addEvents('canceledit');
me.callParent(arguments);
grid.addEvents('canceledit');
grid.relayEvents(me, ['canceledit']);

me.on('edit', function(editor) {
delete editor.record._blank;
});
},

/**
* add a record and start edit it
*
* @param {Object} data Data to initialize the Model's fields with
* @param {Number} position The position where the record will added. -1
* will be added record at last position.
*/
startAdd: function(data, position) {
var me = this;

var record = me.grid.store.model.create(data);
record._blank = true;

position = (position && position != -1 && parseInt(position + 1) <= parseInt(me.grid.store.getCount())) ? position : (position == -1) ? parseInt(me.grid.store.getCount()) : 0;

var autoSync = me.grid.store.autoSync;
me.grid.store.autoSync = false;
me.grid.store.insert(position, record);
me.grid.store.autoSync = autoSync;
me.startEdit(position, 0);
},

startEditByClick: function() {
var me = this;

if (!me.editing || me.clicksToMoveEditor === me.clicksToEdit) {
if (me.context && me.context.record._blank) me.cancelEdit();

me.callParent(arguments);
}
},

cancelEdit: function() {
var me = this;
if (me.editing) {
me.getEditor().cancelEdit();
me.callParent(arguments);
me.fireEvent('canceledit', me.context);

if (me.removePhantomsOnCancel) {
if (me.context.record._blank && me.context.record.store) {
me.context.store.remove(me.context.record);
} else {
me.context.record.reject();
}
}
}
}
});

atian25
2 May 2011, 7:36 PM
thanks for sharing, harrydeluxe,kender

1. why using custom _blank than record.phantom ?
2. position as same as i thought, but i think it's no need to check whether position > count
3. startEditByClick override is imperfect, when call startEdit by program

next, i want to add dynamicform to rowediting, then we can choose RowEditor or DynamicForm to be rowediting plugin's editor.

harrydeluxe
3 May 2011, 3:07 AM
@atian25
The cancelEdit function i will only for new added records, therefore i add "_blank". But if i have several records and i still do not have this commitet, they are all still Phantoms. Now when i edit one of them and click cancel, then the record will deleted. So i added "_blank".

atian25
3 May 2011, 6:47 PM
@harrydeluxe
got it. u r right.
so i update a version 1.2 but using property 'adding' instead of _blank

does anyone know why autoCancel:true dont work for me, the error tip show when startAdd

harrydeluxe
4 May 2011, 2:23 AM
does anyone know why autoCancel:true dont work for me, the error tip show when startAdd

see http://www.sencha.com/forum/showthread.php?132214-4.0.0-RowEditor-ignores-errorSummary&highlight=errorSummary

atian25
22 May 2011, 5:29 PM
v1.3 2011-05-22
Enhancements
set clicksToEdit==0 to mun the click/dblclick event
help to config field,just giving a fieldType and field as additional cfg


{
text: 'Enable',
dataIndex: 'enable',
width: 80,
renderer: function(v){return v?'Enable':'Disable'},
fieldType: 'checkboxfield',
field: {
boxLabel: 'Enable'
}
}

ggunders
25 May 2011, 8:00 AM
Is textarea going to be supported in Ext4 for this plugin? It worked alright on 3.x.

thx

kender
25 May 2011, 10:56 PM
the textarea doesn't render well neither in the example provided (editing the xtype in one column), with original Ext.grid.plugin.RowEditing

atian25
25 May 2011, 11:31 PM
there are so many editor don't render well with original Ext.grid.plugin.RowEditing,
such as textarea, fieldContainer subClass(i wrote a DateTime,but it render bad)

i'm not good at this, maybe u have some good idea.

ssamayoa
2 Jun 2011, 12:49 PM
Thanks, I'm using now this plugin and so far is working ok.
Regards.

ap
10 Aug 2011, 12:25 PM
I've tried and failed to make the RowEditing fire events after the editor is rendered to adjust the height of the grid.
Currently the editor will not trigger any layout in gridView, when the grid is set to 'autoHeight', nor will any scroll bar appear. See this thread http://www.sencha.com/forum/showthread.php?141596-rowEditing-plugin-layout-problem-in-Grid-autoHeight-true

Can anyone using this ux suggest a solution?

alxs17
28 Aug 2011, 4:45 AM
Hey everyone,

Big thanks for this plugin !!

It's probably me and not the plugin (first time I use an extjs plugin so...), but is that possible to create this plugin in many different view ?

in my "main" app I define plugin path like this :


Ext.Loader.setConfig({ enabled:true,
paths: {
'Ext.ux': './client_app/plugin/ux',
'Ext.ux.grid.plugin': './client_app/plugin/ux/grid/plugin'
}
});

in each grid of an view I create plugin like this :



{
xtype: 'gridpanel',
width: 370,
height: 150,
store: 'User_contact',
selType: 'rowmodel',
plugins: [
Ext.create('Ext.ux.grid.plugin.RowEditing',{pluginId: 'contactRowEditor',autoCancel : false})
],
columns: [
{header: "Type", dataIndex: 'type', flex: 1, editor:{xtype:'textfield'}},
{header: "Contact", dataIndex: 'number', flex: 1, editor:{xtype:'textfield'}},
{header: "Commentaire", dataIndex: 'comment', flex: 1, editor:{xtype:'textfield'}}
]


Until there everything work fine.
But if I try to create this plugin in a second view. I'm unable to start my app...

Someone have an idea of what I'm doing wrong ?

j.bruni
28 Aug 2011, 5:37 AM
Someone have an idea of what I'm doing wrong ?

It depends on the context of the usage of Ext.create - it is possible that a single RowEditor is being created for all grids!

If you create the RowEditor inside an overriden initComponent method, each grid will have its own editor (instead of all grids trying to use the same unique editor).

Something like this:


Ext.define( 'My.GridPanel', {
extend: 'gridpanel',
alias: 'widget.mygridpanel',
width: 370,
height: 150,
store: 'User_contact',
selType: 'rowmodel',
columns: [
{header: "Type", dataIndex: 'type', flex: 1, editor:{xtype:'textfield'}},
{header: "Contact", dataIndex: 'number', flex: 1, editor:{xtype:'textfield'}},
{header: "Commentaire", dataIndex: 'comment', flex: 1, editor:{xtype:'textfield'}}
],
initComponent: function() {
var rowEditing = Ext.create('Ext.ux.grid.plugin.RowEditing', {
pluginId: 'contactRowEditor',
autoCancel : false
});
Ext.apply(this, {plugins: [rowEditing]});
this.callParent(arguments);
}
);


Then, due to the alias​, you can simply use xtype: "mygridpanel" - and you will have one editor for each grid.

alxs17
29 Aug 2011, 1:58 AM
Hey !

Thanks a lot for your informations, really helpful.

Justin Noel
29 Aug 2011, 1:14 PM
@harrydeluxe
(http://www.sencha.com/forum/member.php?8007-harrydeluxe)
How did you get your demo on GitHub to be able to select text in the editor? I can't manage that to save my life?

I can't even click around inside my text. The best I can do is use the arrow keys to go to the end of the text string and backspace through all of it.

atian25
10 Sep 2011, 5:08 PM
v1.4 2011-09-11refactor and change doc style to jsduck (https://github.com/senchalabs/jsduck)

chramer
11 Sep 2011, 10:20 PM
any ideas how to fix this..
i have a grid with a single row :
27999

on RowEditing I got this :
28000

the button are inside the grid, i don't see them :(

atian25
11 Sep 2011, 10:33 PM
you'd better set grid height to give space to button.
or override plugin's getEditor() method to hack the RowEditor

bee
13 Sep 2011, 4:05 AM
can you put some code for getEditor method ? I am also facing same problem
When I add some value and click on update all columns I am getting as blank

atian25
13 Sep 2011, 4:08 AM
http://docs.sencha.com/ext-js/4-0/source/RowEditing.html#Ext-grid-plugin-RowEditing

// private
getEditor: function() {
var me = this;


if (!me.editor) {
me.editor = me.initEditor();
}
return me.editor;
},


// private
initEditor: function() {
var me = this,
grid = me.grid,
view = me.view,
headerCt = grid.headerCt;


return Ext.create('Ext.grid.RowEditor', {
autoCancel: me.autoCancel,
errorSummary: me.errorSummary,
fields: headerCt.getGridColumns(),
hidden: true,


// keep a reference..
editingPlugin: me,
renderTo: view.el
});
},

ginknee
13 Sep 2011, 6:35 PM
@harrydeluxe (http://www.sencha.com/forum/member.php?8007-harrydeluxe)
@justin noel (http://www.sencha.com/forum/member.php?258188-Justin-Noel)

How did you get your demo on GitHub to be able to select text in the editor? Apparently harrydeluxe's code works with version 4.0.0. I tested it with 4.0.2a and it doesn't work. Not sure what is different..yet anyway..

Anyone have a a fix for this for version 4.0.2.a? I have to stick with this version.

Thanks for any help!

harrydeluxe
28 Sep 2011, 1:48 AM
Works now fine with 4.0.2a.


Source on Github:
https://github.com/harrydeluxe/extjs-ux/blob/master/ux/grid/plugin/RowEditing.js

Demo:
http://harrydeluxe.github.com/ext4/example/grid/rowediting.html

LisburnLad
29 Sep 2011, 7:40 AM
I've just noticed that when I double click on a text item in the row editor, the text doesn't highlight as it does in the standard row editor. Would anyone know why this would be?
standard row editor:
http://docs.sencha.com/ext-js/4-0/#!/example/grid/row-editing.html

ux row editor:
http://harrydeluxe.github.com/ext4/example/grid/rowediting.html


I've attached a picture of how it looks from the standard demo row editor.

Thanks for any help,
Steve

28409

ginknee
29 Sep 2011, 4:00 PM
@harrydeluxe
(http://www.sencha.com/forum/member.php?8007-harrydeluxe)
You didn't change any code in the 4.0.2a example except to use the 4.0.2a Ext version. So see the field selection is broken. It would be nice for this to work where the user can select the field being edited in one swipe and delete the text and retype if necessary.

In the 4.0.2a version you must backspace one letter at a time to delete the text and retype.

I still can't figure out what changed between 4.0 where this worked and 4.0.2a version where it does not work.

Please reply if you come up with a fix. thanks.

icebergdelphi
11 Nov 2011, 1:35 PM
Hi all, i have ExtJs 4.0.7 and i downloaded Ext.grid.plugin.RowEditing from Harald Hanek's webpage, but when i try to execute my app, in my Firebug appears c is not a constructor , i do not know if i'm setting my Path wrong or what, just see my code:


//0.-Nuevo mandato en Ext4.x llamamos las partes que conformaran a cada Objeto y solo lo que necesitamos
Ext.Loader.setConfig({
enabled: true,
paths: {
'Ext.ux.grid.plugin': '../Grids/UxRowEditing' /<<I have the RowEditing.js in this folder: UxRowEditing

}
});

Ext.require([
'Ext.grid.*',
'Ext.data.*',
'Ext.ux.grid.plugin.RowEditing'

]);



In this line the error rise:


//3.-Llamamos el Plugin para el Raw editor
var MyRowEditing = Ext.create('Ext.ux.grid.plugin.RowEditing',
{
clicksToMoveEditor: 1,
autoCancel: false
});



Thanks for Ur Help.

atian25
11 Nov 2011, 4:01 PM
had u try to use ext-all-debug and see what is the error

icebergdelphi
11 Nov 2011, 7:37 PM
had u try to use ext-all-debug and see what is the error

Yep My friend:
c is not a constructor
chrome://firebug/content/blank.gif this.instantiators[len... 'return new c('+args.join(',')+')'); ext-all-debug.js (línea 3969

i'm using ExtJs 4.0.7 thanks.

icebergdelphi
12 Nov 2011, 7:02 AM
Resolved alias was the problem:
Ext.require([
'Ext.grid.*',
'Ext.data.*',
'plugin.ux.rowediting' <<<<<<<<<<<before:Ext.ux.grid.plugin.RowEditing

]);

Thanks

xuzhong
20 Jun 2012, 8:12 PM
Hi Atian,
I have a issue.
A tbar in the Ext.grid.Panel and i make a refresh function like:

{
text: "Refresh",
iconCls: "z-btn-refresh",
listeners:
{
click: function () {
me.getEl().mask("Loading...");
me.store.load(function (records, operation, success) {
console.log('loaded records');
me.getEl().unmask();
});
}
}
}


Add function handler like:

{
text: "New",
iconCls: "z-btn-add",
listeners: {
click: function (btn, e, eOpts) {
if (edit.editing) {
return false;
}
var newObj = Ext.create("Biz.model.MyModel");
edit.startAdd(newObj, 0);
}
}
}


A fter I click Add button , and click Refresh button, a error will throw from RowEditing.js[Lined:249].


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()
}
}
}
}


The reson is me.context.record.store is null.

I am not sure it is a bug or I not use it in right way.

olecom
5 Dec 2012, 3:18 PM
Any ideas how to implement a grid header on top of the row editor?
There are cases when header must be in front of information being changed.

ssamayoa
5 Dec 2012, 4:10 PM
Any ideas how to implement a grid header on top of the row editor?
There are cases when header must be in front of information being changed.

Don't understand the requirement.

May be if you upload an example image.

Regards.

olecom
5 Dec 2012, 7:00 PM
Don't understand the requirement.

May be if you upload an example image.

Regards.I'll try to explain in words. When editing starts in the middle of the grid, column names are somewhere in the top grid header. I'd like to have them (grid column headers) right above editor's input fields in roweditor area.

santoshballary
26 Dec 2012, 8:53 PM
Hi All,

while adding new row i need to change the color of the "update" button as a green and "cancel" button as a maroon .

Thanks in advance:-?:-?