PDA

View Full Version : Editable Text Area in Grid using extjs4



arkarthickraja
17 Aug 2012, 10:18 AM
Hi ,
I have a requirement to have a editable text area as part of grid field, and the size of the text area should grow automatically if the number of text area rows increasee. kindly help me on this.

scottmartin
17 Aug 2012, 12:28 PM
You could need to calc the size for the data in the row and use setSize(size).



Ext.create('Ext.data.Store', {
storeId:'simpsonsStore',
fields:['name', 'email', 'change'],
data:{'items':[
{ 'name': 'Lisa', "email":"[email protected]", "change":100 },
{ 'name': 'Bart', "email":"[email protected]", "change":-20 },
{ 'name': 'Homer', "email":"[email protected]", "change":23 },
{ 'name': 'Marge', "email":"[email protected]", "change":-11 }
]},
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'items'
}
}
});

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' },
{ header: 'Email', dataIndex: 'email', editor: { xtype: 'textarea', height: 100 }, flex: 1 },
{ header: 'Change', dataIndex: 'change' }
],
height: 200,
width: 400,
renderTo: Ext.getBody(),

plugins: [ cellEditing ]
});
?

Scott.

arkarthickraja
18 Aug 2012, 9:00 AM
Hi Scott,
thanks for the code , now i am able to add editable text area in grid.I have 1 more issue in grid , let say user enter value in text area which is height of 5 rows,on mouseout event, text area value displayed in a single row instead of 5 rows of height.My problem is how to display the edited row in the gird which is height of text area.
Awaiting for your reply.

scottmartin
18 Aug 2012, 9:45 AM
See if this is what you are looking for:



Ext.create('Ext.data.Store', {
storeId:'simpsonsStore',
fields:['name', 'email', 'change'],
data:{'items':[
{ 'name': 'Lisa', "email":"[email protected]", "change":100 },
{ 'name': 'Bart', "email":"[email protected]", "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":"[email protected]", "change":-11 }
]},
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'items'
}
}
});

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

Scott.

scottmartin
18 Aug 2012, 9:57 AM
Oops.. forgot the CSS



.wrapText .x-grid-cell-inner {
white-space: normal;
}
?

Scott.

arkarthickraja
19 Aug 2012, 9:16 AM
Thanks for you code scott.. it is working good :)

arkarthickraja
22 Aug 2012, 8:58 AM
Hi Scott,
I have slight change in my requirement where i need to use the RowEditing gird instead of cell editing grid code provided by you.While using Row editing grid i am facing few issues:

1.As I am using gorwable textarea inside row Editing grid, if i enter more than 2 rows of data in text area field i am getting scroll bar, where i need to use scroll bar to view the data captured in text area, alos i am getting update and cancel button for the editing text area cell . The buttons are not realigning as the textarea row size grows.Due to this i am losing the functionality of growable text area inside grid.

2. I have add button to add a new row in gird ,if i enter data in text area and click on update button data should be captured , if the user click cancel button data entered in text area should be cleared and the newly added row should be deleted from the gird.

Can you kindly guide me on this.

arkarthickraja
25 Aug 2012, 8:53 AM
any help on my below query is appreciated ..

scottmartin
26 Aug 2012, 7:52 PM
Thread now discussed at:
http://www.sencha.com/forum/showthread.php?238764

Scott.

scottmartin
6 Oct 2012, 7:10 PM
Have a look at the following:
http://jsfiddle.net/GNaTR/

Scott.

teriandev
10 Dec 2013, 4:37 PM
The JS Fiddle is not working properly! Could you checkit?

scottmartin
10 Dec 2013, 4:54 PM
Paste the code from the fiddle to our Fiddle:
https://fiddle.sencha.com/#home

Works fine.

I think the URL for the resources changed, so the CSS is messed on jsFiddle.