PDA

View Full Version : Row Grid height Dynamically increases/Decreases in ExtJS 4



arkarthickraja
27 Aug 2012, 5:17 AM
Hi,
I have a editable field in my Gird , when the size of the ediatable area height increase i want to increase the height of the row which is currently being edited . For Eg: if the editable row height is increase to 5 rows ,then the row height alos should be increased .
I tried the below piece of Css code in html ,still row height is not increasing.


.x-grid-cell-inner { overflow: hidden;
padding: 3px 6px; white-space: normal;}

scottmartin
27 Aug 2012, 10:25 AM
Is this what you had in mind?



Ext.onReady(function(){

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":"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":23 },
{ 'name': 'Marge', "email":"marge@simpsons.com", "change":-11 }
]},
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'items'
}
}
});

var largeeditor = {
xtype: 'textarea',
grow: true,
allowBlank: false
};

var cellEditing = Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 1
});

Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
store: Ext.data.StoreManager.lookup('simpsonsStore'),
columns: [
{ header: 'Name', dataIndex: 'name', editor: { xtype: 'textfield' } },
{ header: 'Email', dataIndex: 'email', flex: 1, tdCls: 'wrapText', editor: largeeditor },
{ header: 'Change', dataIndex: 'change', editor: { xtype: 'textfield' } }
],
height: 500,
width: 400,
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(),

plugins: [ cellEditing ]
});

});


Scott.

arkarthickraja
27 Aug 2012, 10:57 AM
Hi Scott,
Thanks for your reply .
The given code increases only the textarea height,i need the entire row height also to be increases when the textarea height is increases dynamically.i need to do this for Row editing Grid not for the cell edit grid.

scottmartin
27 Aug 2012, 11:10 AM
There is not a configuration available by default for this .. you will need to create an override for

Ext.define('Ext.grid.RowEditor', { .. });

ex: (created override.js)


Ext.override(Ext.grid.RowEditor, {

functionToOverride: function() {
// change code of function to override
}
});


You will have to determine which functions need to be touched. You can copy all of the functions over to the override that you feel need attention and remove untouched after.

This will allow you to make changes and not muck up the original code.

Scott

ovillemain
3 Dec 2013, 7:37 AM
My working solution to move the floatingButtons with "Ext.grid.plugin.RowEditing" (with ExtJS 4.2.1) :



Ext.override(Ext.grid.RowEditor,{
reposition : function() {
this.callParent(arguments);
this.editingPlugin.fireEvent('myRepositionEvent');
}
});

var myRowEditing = Ext.create('Ext.grid.plugin.RowEditing', {
...
listeners : {
'myRepositionEvent' : function() {
// Your algorithm here instead of mine...
this.editor.floatingButtons.el.setY(this.editor.el.getY() + this.editor.el.getHeight() - 1);
}
}
});

Ext.create('Ext.grid.Panel', {
...
plugins : [myRowEditing]
});


But I override the private class "Ext.grid.RowEditor" and I haven't took this advice :

NOTE :
This is a private utility class for internal use by the framework. Don't rely on its existence.