PDA

View Full Version : I want to display one textarea in grid with 4 columns



amanind
22 Jun 2011, 5:39 AM
Hi,

I have 4 columns in grid and I want to display one textarea in all the four columns. how to do this
here is the screenshot

26687

here is my code


var colModel = new Ext.grid.ColumnModel({
columns: [{
id: 'investment',
header: '',
width: 460,
sortable: false,
dataIndex: 'investment'
},
{
header: 'IRR',
width: 110,
sortable: false,
align: 'right',
viewConfig: {
enableRowBody: true
},
renderer: this.column1,
editor: new Ext.form.NumberField({
disabled: true,
id: 'msrefNETText' + this.dealDetailsInfo.financialProjection.data.Investment.Id
}),
dataIndex: 'column1'
},
{
header: 'Equity Multiple',
width: 110,
sortable: false,
align: 'right',
renderer: this.column2,
editor: new Ext.form.NumberField({
disabled: true,
id: 'msrefUSDText' + this.dealDetailsInfo.financialProjection.data.Investment.Id
}),
dataIndex: 'column2'
},
{
header: 'IRR',
width: 110,
sortable: false,
align: 'right',
renderer: this.column3,
editor: new Ext.form.NumberField({
disabled: true,
id: 'exitDateText' + this.dealDetailsInfo.financialProjection.data.Investment.Id
}),
dataIndex: 'column3'
},
{
header: 'Equity Multiple',
width: 110,
sortable: false,
align: 'right',
renderer: this.column4,
editor: new Ext.form.NumberField({
disabled: true,
id: 'generalCText' + this.dealDetailsInfo.financialProjection.data.Investment.Id
}),
dataIndex: 'column4'
}],
editors: {
'text': new Ext.grid.GridEditor(new Ext.form.TextArea({
width: 250,
disabled: true,
align: 'left',
id: 'textarea' + this.dealDetailsInfo.financialProjection.data.Investment.Id
})),
'number': new Ext.grid.GridEditor(new Ext.form.NumberField({ disabled: true })),
'date': new Ext.grid.GridEditor(new Ext.form.DateField({ disabled: true, id: 'dateFieldId' + this.dealDetailsInfo.financialProjection.data.Investment.Id, renderer: Ext.util.Format.dateRenderer('m/d/Y') }))
}
});

extjs-world
23 Jun 2011, 12:42 AM
Do you want to show textarea for specific row or for all rows?

amanind
23 Jun 2011, 1:01 AM
I have 5 rows and 4 columns in a editable grid.
Yes i want to show textarea only in one row

extjs-world
23 Jun 2011, 4:15 AM
One of the ways to achieve this is to add the textarea field into the grid row body and remove the column specific values using column renderers. And within grid beforegridedit event disable editing the specific row.
A detailed example can be found here http://extjs-world.blogspot.com/2011/06/showing-single-textfield-into-multiple.html

amanind
27 Jun 2011, 12:07 AM
Hi,

Its not working for me.
Can you tell me where you have define "textGridColumnModel" .

Thanks for your help
aMaN

extjs-world
27 Jun 2011, 12:43 AM
I have defined textGridColumnModel as per my requirements. I thought it is not useful to provide its store/columnmodel definitions in the blog.
However you can use your own column model. Just add the column renderer and for the row where you want to add the textarea return empty space. (refere to renderer example shown in the blog)
Please revert if you still have problems.

amanind
27 Jun 2011, 12:54 AM
here is my code, please let me know where i am doing wrong



var colModel = new Ext.grid.ColumnModel({
columns: [{
id: 'investment',
header: '',
width: 460,
sortable: false,
dataIndex: 'investment'
},
{
header: 'IRR',
width: 110,
sortable: false,
align: 'right',
viewConfig: {
enableRowBody: true
},
renderer: this.column1,
editor: new Ext.form.NumberField({
disabled: true,
id: 'msrefNETText' + this.dealDetailsInfo.financialProjection.data.Investment.Id
}),
dataIndex: 'column1'
},
{
header: 'Equity Multiple',
width: 110,
sortable: false,
align: 'right',
renderer: this.column2,
editor: new Ext.form.NumberField({
disabled: true,
id: 'msrefUSDText' + this.dealDetailsInfo.financialProjection.data.Investment.Id
}),
dataIndex: 'column2'
},
{
header: 'IRR',
width: 110,
sortable: false,
align: 'right',
renderer: this.column3,
editor: new Ext.form.NumberField({
disabled: true,
id: 'exitDateText' + this.dealDetailsInfo.financialProjection.data.Investment.Id
}),
dataIndex: 'column3'
},
{
header: 'Equity Multiple',
width: 110,
sortable: false,
align: 'right',
renderer: this.column4,
editor: new Ext.form.NumberField({
disabled: true,
id: 'generalCText' + this.dealDetailsInfo.financialProjection.data.Investment.Id
}),
dataIndex: 'column4'
}],

viewConfig : {
enableRowBody : true,
showPreview: true,
getRowClass: function(record,rowIndex, p, ds){
if(rowIndex == 6){
p.body = "<textarea rows=1 cols=4>";
p.body += record.get("docIndex");
p.body += "</textarea>";
} else {
p.body = "";
}
return 'x-grid3-row-expanded';
}
},
listeners: {
beforeedit: function(editObj){
if(editObj.row == 6){
return false;
}
}
},
editors: {
'text': new Ext.grid.GridEditor(new Ext.form.TextArea({
width: 250,
disabled: true,
align: 'left',
id: 'textarea' + this.dealDetailsInfo.financialProjection.data.Investment.Id
})),
'number': new Ext.grid.GridEditor(new Ext.form.NumberField({ disabled: true })),
'date': new Ext.grid.GridEditor(new Ext.form.DateField({ disabled: true, id: 'dateFieldId' + this.dealDetailsInfo.financialProjection.data.Investment.Id, renderer: Ext.util.Format.dateRenderer('m/d/Y') }))
},
getCellEditor: function (colIndex, rowIndex) {
if (Ext.getCmp('editableHidden').el.dom.value != "noneditable") {
var field = this.getDataIndex(colIndex);
if (rowIndex == 2 && (colIndex == 3 || colIndex == 4)) {
return this.editors['number'];
}
if (rowIndex == 4 && (colIndex == 2 || colIndex == 4)) {
return this.editors['number'];
}
if (rowIndex == 5 && (colIndex == 2 || colIndex == 4)) {
return this.editors['number'];
}
/*if (rowIndex == 6 && (colIndex == 1)) {
return this.editors['text'];
}
if (rowIndex == 6 && (colIndex == 2 || colIndex == 3 || colIndex == 4)) {
return this.editors['number'];
}*/
//if(Ext.getCmp('saveBtn').enabled){
if (rowIndex == 4 && (colIndex == 1 || colIndex == 3)) {
//var rec = store.getAt(rowIndex);
//Ext.grid.ColumnModel.setRenderer(colIndex, this.formatDate);
return this.editors['date'];
}
//}
return Ext.grid.ColumnModel.prototype.getCellEditor.call(this, colIndex, rowIndex);
}
}
});

extjs-world
27 Jun 2011, 1:40 AM
In the grid view config for getRowClass you are retrieving docIndex(my sample record item). You have to replace it with your record item e.g : record.get('column2')

aramaki
28 Jun 2011, 4:07 AM
why do you use grid for that? you a free to specify standalone container with your textarea and bind it with grid to ownerCt, for example.

amanind
28 Jun 2011, 4:26 AM
Hey Aramaki

Can you show me any example or code. how to do this

amanind
30 Jun 2011, 2:31 AM
Can anyone help me on this issue

skirtle
30 Jun 2011, 4:12 PM
What issue remains?

amanind
30 Jun 2011, 8:25 PM
I have a grid with 5rows and 4 columns, I want to display one textarea in one row and 4 columns only
how to do this

skirtle
5 Jul 2011, 9:40 AM
I thought extjs-world already provided a solution to that problem?