PDA

View Full Version : Row Edit Grid floating button requirement



arkarthickraja
24 Aug 2012, 3:48 AM
Hi, Is it possible to make the row editing grid update/cancel button as floating buttons.
If so can i get the piece of code for the same ?

scottmartin
24 Aug 2012, 8:50 PM
Can you provide more details as to 'floating buttons'. I am not sure what you require.

Scott.

arkarthickraja
25 Aug 2012, 8:50 AM
Hi Scott,
I have a editable row grid with textarea when the size of the text area is growing the update and cancel buttons are not realigning , due to this i am not able to see the whole data entered in text area . my requirement is it possible to realign the buttons while editing the textarea as the data is grows, else is it possible to hide/show the buttons while editing the row grid.

scottmartin
25 Aug 2012, 8:24 PM
Based on how your editor is setup to grow, you can look at overriding the following:



Ext.override('Ext.grid.RowEditor', {

getFloatingButtons: function() {
..
btnsCss = cssPrefix + 'grid-row-editor-buttons',
..
},

reposition: function(animateConfig) {

// callsg etFloatingButtons()

}

});


// css used to draw buttons at offset of buttons under editor row: bottom: -31px


.x-grid-row-editor-buttons {
background-color: #eaf1fb;
position: absolute;
bottom: -31px;
padding: 4px;
height: 32px;
}


Scott.

arkarthickraja
26 Aug 2012, 9:10 AM
Hi Scott,
i tried it in many ways , i am not able to dynamically realign the edit row buttons, also i am not sure of ext.override('grid.rowEditor') method .

below is the code i am trying , still i am not getting any function which can be invoked while editing a cell todynamically realign the edit row buttons .


Ext.require([
'Ext.data.*',
'Ext.grid.*'
]);
Ext.onReady(function() {
Ext.QuickTips.init();
Ext.create('Ext.data.Store', {
storeId:'simpsonsStore',
fields:['name', 'email', 'change'],
data:{'items':[
{ 'name': 'Lisa', "email":"lisa@simpsons.com", "change":100 },
{ 'name': 'Bart', "email":"bart@simpsons.com", "change":-20 },
{ 'name': 'Homer', "email":"home@simpsons.com", "change":23 },
{ 'name': 'Raja', "email":"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum", "change":27 },
{ 'name': 'Marge', "email":"marge@simpsons.com", "change":-11 }
]},
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'items'
}
}
});

Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
plugins: [
Ext.create('Ext.grid.plugin.RowEditing', {
clicksToEdit: 1,
initEditor: function() {
//alert("Inside initEditor");
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,
//saveBtnText: 'This is my save button text', // <<---
// cancelBtnText: 'This is my cancel button text', // <<---
getFloatingButtons: function() {
//alert('getFloatingButtons');
var me = this,
cssPrefix = Ext.baseCSSPrefix,
btnsCss = cssPrefix + 'grid-row-editor-buttons',
plugin = me.editingPlugin,
minWidth = Ext.panel.Panel.prototype.minButtonWidth,
btns;
alert(cssPrefix);
if (!me.floatingButtons) {
btns = me.floatingButtons = new Ext.Container({
renderTpl: [
'<div class="{baseCls}-ml"></div>',
'<div class="{baseCls}-mr"></div>',
'<div class="{baseCls}-bl"></div>',
'<div class="{baseCls}-br"></div>',
'<div class="{baseCls}-bc"></div>',
'{%this.renderContainer(out,values)%}'
],
width: 200,
//autoHeight:true,
renderTo: me.el,
baseCls: btnsCss,
layout: {
type: 'hbox',
align: 'middle'
},
defaults: {
flex: 1,
margins: '0 1 0 1'
},
items: [{
itemId: 'update',
xtype: 'button',
handler: plugin.completeEdit,
scope: plugin,
text: me.saveBtnText,
minWidth: minWidth,
autoHeight:true
}, {
xtype: 'button',
handler: plugin.cancelEdit,
scope: plugin,
text: me.cancelBtnText,
minWidth: minWidth,
autoHeight:true
}]
});
// Prevent from bubbling click events to the grid view
me.mon(btns.el, {
// BrowserBug: Opera 11.01
// causes the view to scroll when a button is focused from mousedown
mousedown: Ext.emptyFn,
click: Ext.emptyFn,
stopEvent: true
});
}
return me.floatingButtons;
},
reposition: function(animateConfig) {
//alert('reposition');
var me = this,
context = me.context,
row = context && Ext.get(context.row),
btns = me.getFloatingButtons(),
btnEl = btns.el,
grid = me.editingPlugin.grid,
viewEl = grid.view.el,
// always get data from ColumnModel as its what drives
// the GridView's sizing
mainBodyWidth = grid.headerCt.getFullWidth(),
scrollerWidth = grid.getWidth(),
// use the minimum as the columns may not fill up the entire grid
// width
width = Math.min(mainBodyWidth, scrollerWidth),
scrollLeft = grid.view.el.dom.scrollLeft,
btnWidth = btns.getWidth(),
left = (width - btnWidth) / 2 + scrollLeft,
y, rowH, newHeight,
invalidateScroller = function() {
btnEl.scrollIntoView(viewEl, false);
if (animateConfig && animateConfig.callback) {
animateConfig.callback.call(animateConfig.scope || me);
}
},

animObj;
// need to set both top/left
if (row && Ext.isElement(row.dom)) {
// Bring our row into view if necessary, so a row editor that's already
// visible and animated to the row will appear smooth
row.scrollIntoView(viewEl, false);
// Get the y position of the row relative to its top-most static parent.
// offsetTop will be relative to the table, and is incorrect
// when mixed with certain grid features (e.g., grouping).
y = row.getXY()[1] - 5;
rowH = row.getHeight();
newHeight = rowH + (me.editingPlugin.grid.rowLines ? 9 : 10);
// Set editor height to match the row height
if (me.getHeight() != newHeight) {
me.setHeight(newHeight);
me.el.setLeft(0);
}
if (animateConfig) {
animObj = {
to: {
y: y
},
duration: animateConfig.duration || 125,
listeners: {
afteranimate: function() {
invalidateScroller();
y = row.getXY()[1] - 5;
}
}
};
me.el.animate(animObj);
} else {
me.el.setY(y);
invalidateScroller();
}
}
if (me.getWidth() != mainBodyWidth) {
me.setWidth(mainBodyWidth);
}
btnEl.setLeft(left);
}
});
},
listeners: {
cancelEdit: function() {
alert(1);
},
completeEdit : function() {
alert(2);
},

startEdit: function(record, columnHeader) {
alert('startEdit');
var me = this;
me.getFloatingButtons();
editor = me.getEditor();

//alert(editor);
if ((editor.beforeEdit() !== false) && (me.callParent(arguments) !== false)) {
editor.startEdit(me.context.record, me.context.column);
return true;
}
return false;
},
validateEdit: function() {
alert('validateEdit');
var me = this,
editor = me.editor,
context = me.context,
record = context.record,
newValues = {},
originalValues = {},
editors = editor.items.items,
e,
eLen = editors.length,
name, item;
for (e = 0; e < eLen; e++) {
item = editors[e];
name = item.name;
newValues[name] = item.getValue();
originalValues[name] = record.get(name);
}
Ext.apply(context, {
newValues : newValues,
originalValues : originalValues
});
return me.callParent(arguments) && me.getEditor().completeEdit();
},
// private
getEditor: function() {
alert('getEditor');
var me = this;
if (!me.editor) {
me.editor = me.initEditor();
}
return me.editor;
},
startEditByClick: function() {
alert('startEditByClick');
var me = this;
if (!me.editing || me.clicksToMoveEditor === me.clicksToEdit) {
me.callParent(arguments);
}
},
moveEditorByClick: function() {
alert('startEditByClick');
var me = this;
if (me.editing) {
me.superclass.onCellClick.apply(me, arguments);
}
},
onColumnResize: function(ct, column, width) {
alert('onColumnResize');
if (column.isHeader) {
var me = this,
editor = me.getEditor();
if (editor && editor.onColumnResize) {
editor.onColumnResize(column, width);
}
}
},

setColumnField: function(column, field) {
alert('onColumnMove');
var me = this,
editor = me.getEditor();

editor.removeField(column);
me.callParent(arguments);
me.getEditor().setField(column);
}
}
})
],
store: Ext.data.StoreManager.lookup('simpsonsStore'),
columns: [
{ header: 'Name', dataIndex: 'name' },
{ header: 'Email', dataIndex: 'email',editor: { xtype: 'textarea', grow: true }, flex: 1,
tdCls: 'wrapText' },
{ header: 'Change', dataIndex: 'change'}
],
height: 500,
width: 700,
/* viewConfig: {
getRowClass: function(record, index) {
var c = record.get('change');
if (c < 0) {
return 'price-fall';
} else if (c > 0) {
return 'price-rise';
}
}
},*/


renderTo: Ext.getBody()
});
/*Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
store: Ext.data.StoreManager.lookup('simpsonsStore'),
columns: [
{ header: 'Name', dataIndex: 'name' },
{ header: 'Email', dataIndex: 'email', editor: { xtype: 'textarea', grow: true }, flex: 100 },
//{ header: 'Email', dataIndex: 'email', editor: { xtype: 'textarea', height:100,grow: true,resizable:{ handles:'s', minheight: 150,minwidth: 150, heightIncrement:20, constrainTo:Ext.getBody() }}},
{ header: 'Change', dataIndex: 'change' }
],
height: 200,
width: 400,
renderTo: Ext.getBody(),
// renderTo: 'grid-example',

plugins: [ cellEditing ]
});*/

//
/*var grid = Ext.create('Ext.grid.Panel', {
store: store,
columns: [{
id: 'common',
header: 'Common Name',
dataIndex: 'common',
flex: 1,
editor: {
xtype:'textarea',
resizable:{ handles:'s', minheight: 50, heightIncrement:20, constrainTo:Ext.getBody() },
height:200,
width:250,
allowBlank: false
}*/
});
Ext.override('Ext.grid.RowEditor', {

getFloatingButtons: function() {
alert('getFloatingButtons');
var me = this,
cssPrefix = Ext.baseCSSPrefix,
btnsCss = cssPrefix + 'grid-row-editor-buttons',
plugin = me.editingPlugin,
minWidth = Ext.panel.Panel.prototype.minButtonWidth,
btns;
if (!me.floatingButtons) {
btns = me.floatingButtons = new Ext.Container({
renderTpl: [
'<div class="{baseCls}-ml"></div>',
'<div class="{baseCls}-mr"></div>',
'<div class="{baseCls}-bl"></div>',
'<div class="{baseCls}-br"></div>',
'<div class="{baseCls}-bc"></div>',
'{%this.renderContainer(out,values)%}'
],
width: 200,
renderTo: me.el,
baseCls: btnsCss,
layout: {
type: 'hbox',
align: 'middle'
},
defaults: {
flex: 1,
margins: '0 1 0 1'
},
items: [{
itemId: 'update',
xtype: 'button',
handler: plugin.completeEdit,
scope: plugin,
text: me.saveBtnText,
minWidth: minWidth
}, {
xtype: 'button',
handler: plugin.cancelEdit,
scope: plugin,
text: me.cancelBtnText,
minWidth: minWidth
}]
});
// Prevent from bubbling click events to the grid view
me.mon(btns.el, {
// BrowserBug: Opera 11.01
// causes the view to scroll when a button is focused from mousedown
mousedown: Ext.emptyFn,
click: Ext.emptyFn,
stopEvent: true
});
}
return me.floatingButtons;
},
reposition: function(animateConfig) {
var me = this,
context = me.context,
row = context && Ext.get(context.row),
btns = me.getFloatingButtons(),
btnEl = btns.el,
grid = me.editingPlugin.grid,
viewEl = grid.view.el,
// always get data from ColumnModel as its what drives
// the GridView's sizing
mainBodyWidth = grid.headerCt.getFullWidth(),
scrollerWidth = grid.getWidth(),
// use the minimum as the columns may not fill up the entire grid
// width
width = Math.min(mainBodyWidth, scrollerWidth),
scrollLeft = grid.view.el.dom.scrollLeft,
btnWidth = btns.getWidth(),
left = (width - btnWidth) / 2 + scrollLeft,
y, rowH, newHeight,
invalidateScroller = function() {
btnEl.scrollIntoView(viewEl, false);
if (animateConfig && animateConfig.callback) {
animateConfig.callback.call(animateConfig.scope || me);
}
},

animObj;
// need to set both top/left
if (row && Ext.isElement(row.dom)) {
// Bring our row into view if necessary, so a row editor that's already
// visible and animated to the row will appear smooth
row.scrollIntoView(viewEl, false);
// Get the y position of the row relative to its top-most static parent.
// offsetTop will be relative to the table, and is incorrect
// when mixed with certain grid features (e.g., grouping).
y = row.getXY()[1] - 5;
rowH = row.getHeight();
newHeight = rowH + (me.editingPlugin.grid.rowLines ? 9 : 10);
// Set editor height to match the row height
if (me.getHeight() != newHeight) {
me.setHeight(newHeight);
me.el.setLeft(0);
}
if (animateConfig) {
animObj = {
to: {
y: y
},
duration: animateConfig.duration || 125,
listeners: {
afteranimate: function() {
invalidateScroller();
y = row.getXY()[1] - 5;
}
}
};
me.el.animate(animObj);
} else {
me.el.setY(y);
invalidateScroller();
}
}
if (me.getWidth() != mainBodyWidth) {
me.setWidth(mainBodyWidth);
}
btnEl.setLeft(left);
}

});