PDA

View Full Version : Customize grid



amanind
19 Nov 2010, 6:45 AM
Hi

I want two fields in my grid is date and all other numberfield.
Can anyone tell me how to do this.

Right now i am using Ext.grid.EditorGridPanel to display all the numberfields and onclick of edit button, I want two field should convert into datefield

Please refer screenshot

23428

Condor
19 Nov 2010, 9:50 AM
That's not possible with an EditorGridPanel (it can only display one editor at a time).

You could use the RowEditor plugin (or maybe my EditableGrid plugin).

amanind
21 Nov 2010, 11:05 PM
Hi Condor,

sorry for late reply, please let me know how to use RowEditor Plugin in my code.
here is my code



MS.ImpactSisterApp.FinancialProjections = Ext.extend(Ext.grid.EditorGridPanel, {
reportingPeriodData:null,
//ReportPeriodCombo: new MS.ImpactSisterApp.reportPeriodCombo({style: 'font-size:11px', width:86}),
initComponent: function () {
MS.ImpactSisterApp.SisterAppEventManager.fireEvent("getReportingPeriods");
//this.repPeriodId = this.reportingPeriod;
this.repPeriodCombo = new MS.ImpactSisterApp.ReportingPeriodCombo({ reportingPeriodData: this.reportingPeriodData });

this.gridToolbar = new Ext.Toolbar({
items: [
{
xtype: 'label',
style:'padding: 0 6px',
text: 'Reporting Period: '
},
this.repPeriodCombo
]
});

var mappings = [
['Investment Level %', '', '', '', ''],
['MSREF USD Gross(Before MS Feed & Promote/After Currency Hedging)(%)', '', '', '', ''],
['MSREF Net(Before MS Feed & Promote/After Currency Hedging)(%)', '', '', '', ''],
['Exit Date Investment Committee Approved Allocation($)', '', '', '', ''],
['General Comments', '', '', '', '']
];
for (var i = 0; i < mappings.length; i++) {
var mapping = mappings[i];
for (var j = 1; j < 5; j++) {
mapping[j] = Ext.data.JsonReader.prototype.getJsonAccessor.call(null, mapping[j]);
}
mapping[5] = mapping[5] == 'Y' ? -1 : 1;
}
this.store = new Ext.data.JsonStore({
fields: ['investment', 'msrefUSD', 'msrefNET', 'exitDate', 'generalC']
});
this.store.reader.readRecords = function (o) {
o = {
//PMCashFlowSummary: o.PMCashFlowSummary || {},
//COInvCashFlowSummary: o.COInvCashFlowSummary || {}
};
var records = [];
for (var i = 0; i < mappings.length; i++) {
var mapping = mappings[i];
records.push(new this.recordType({
investment: mapping[0],
msrefUSD: (mapping[1](o) || 0) * mapping[5],
msrefNET: (mapping[2](o) || 0) * mapping[5],
exitDate: (mapping[3](o) || 0) * mapping[5],
generalC: (mapping[4](o) || 0) * mapping[5]
}));
}
// console.log(records);
return {
success: true,
records: records,
totalRecords: records.length
};
};
var config = {
frame: true,
hideBorders: true,
timeout: 60000,
header: false,
layout: 'table',
tbar: this.gridToolbar,
layoutConfig: {
columns: 2
},
buttonAlign: 'right',
buttons: [
{
text: 'Edit',
id: 'editBtn',
handler: function() {
Ext.getCmp('saveBtn').enable().enabled = true;
Ext.getCmp('cancelBtn').enable().enabled = true;
Ext.getCmp('editBtn').disable().disabled = true;
debugger
Ext.getCmp('msrefUSDText').enable().enabled = true;
Ext.getCmp('msrefNETText').enable().enabled = true;
Ext.getCmp('exitDateText').enable().enabled = true;
Ext.getCmp('generalCText').enable().enabled = true;
}
},{
text: 'Save',
id: 'saveBtn',
disabled: true,
handler: function() {

}
},
{
text: 'Cancel',
id: 'cancelBtn',
disabled: true,
handler: function() {
Ext.getCmp('saveBtn').disable().disabled = true;
Ext.getCmp('cancelBtn').disable().disabled = true;
Ext.getCmp('editBtn').enable().enabled = true;
Ext.getCmp('msrefUSDText').disable().disabled = true;
Ext.getCmp('msrefNETText').disable().disabled = true;
Ext.getCmp('exitDateText').disable().disabled = true;
Ext.getCmp('generalCText').disable().disabled = true;
}
}],

id: 'columnStruct',
store: this.store,
clicksToEdit :1,
columns: [{
id: 'investment',
header: '',
width: 460,
sortable: false,
dataIndex: 'investment'
},
{
header: 'IRR',
id: 'msrefUSD',
width: 110,
sortable: false,
align: 'right',
renderer: this.msrefUSD,
editor : new Ext.form.NumberField({
disabled: true,
id:'msrefUSDText'
}),
dataIndex: 'msrefUSD'
},
{
header: 'Equity Multiple',
width: 110,
sortable: false,
align: 'right',
renderer: this.msrefNET,
editor : new Ext.form.NumberField({
disabled: true,
id:'msrefNETText'
}),
dataIndex: 'msrefNET'
},
{
header: 'IRR',
width: 110,
sortable: false,
align: 'right',
renderer: this.exitDate,
editor : new Ext.form.NumberField({
disabled: true,
id:'exitDateText'
}),
dataIndex: 'exitDate'
},
{
header: 'Equity Multiple',
width: 110,
sortable: false,
align: 'right',
renderer: this.generalC,
editor : new Ext.form.NumberField({
disabled: true,
id:'generalCText'
}),
dataIndex: 'generalC'
}],
stripeRows: true,
enableHdMenu: false,
enableColumnMove: false,
enableColumnResize: false,
autoExpandColumn: 'investment',
height: 250,
width: 900,
plugins: [
new Ext.ux.grid.ColumnHeaderGroup({
rows: [
[{
// no header
},
{
header: '(Per Investment Committee Book)',
align: 'center',
colspan: 2
},
{
header: '(Per Final Underwriting/Magic Page)',
align: 'center',
colspan: 2
}]
]
})
]
};
Ext.apply(this.initialConfig, config);
Ext.apply(this, config);
MS.ImpactSisterApp.FinancialProjections.superclass.initComponent.apply(this, arguments);
//this.on('cellclick', this.onStartEditting, this);
//this.stopEditing(true);
this.store.loadData(this);
},
onStartEditting: function(grid, rowIndex, columnIndex, e) {
var record = grid.getStore().getAt(rowIndex); // Get the Record
//record.beginEdit();
//record.endEdit();
debugger
var fieldName = grid.getColumnModel().getDataIndex(columnIndex); // Get field name
var data = record.get(fieldName);
if(rowIndex == 3 && (columnIndex == 1 || columnIndex == 3)){
record.set(fieldName, "");
}
},
msrefUSD: function (value) {
return value;
},
msrefNET: function (value) {
return value;
},
exitDate: function (value) {
return value;
},
generalC: function (value) {
return value;
}
});

Condor
22 Nov 2010, 12:32 AM
It's a plugin, just like ColumnHeaderGroup.

Did you look at the ext/examples/grid/row-editor.html example?

amanind
22 Nov 2010, 12:50 AM
Yes, I have check this example but in example case every row is same, but in my case only one row have date field and all other have number field, please check my screenshot above in my first posting

Condor
22 Nov 2010, 12:56 AM
Write a getCellEditor method for the columnmodel that returns the correct editor for the current row and column.

amanind
22 Nov 2010, 1:10 AM
Can you please do the change in my code, I am not able to fix it.

Condor
22 Nov 2010, 1:13 AM
Here is an example (http://www.sencha.com/forum/showthread.php?29853-set-field-type-in-editor-grid-based-on-a-combo-box-selection&p=141782#post141782).

amanind
22 Nov 2010, 2:42 AM
Thanks alot condor, your examples helps me also to fix my issue
Only one issue, I just want to display date not time, how to fix this code

'date': new Ext.grid.GridEditor(new Ext.form.DateField({}))

Condor
22 Nov 2010, 3:39 AM
The editor is fine, but you also need a column renderer that renders the value as a number or a date depending on the current row.

amanind
22 Nov 2010, 3:47 AM
when i click on date in calender to select date, it displays in 'm/d/Y' format but on mouseout, it will convert it into Tue Nov 23 00:00:00 format but I want on mouse out the format should still remain as 'm/d/y'

Condor
22 Nov 2010, 4:19 AM
That's the renderer, not the editor.

amanind
22 Nov 2010, 7:13 AM
yes, how to change the format in editor after mouseout from calender

Condor
22 Nov 2010, 7:21 AM
No.

When the editing is completed or cancelled, the editor is hidden. So that date that you are seeing is no longer the editor, it's the text rendered by the column renderer (see ColumnModel setRenderer API docs).

amanind
22 Nov 2010, 7:32 AM
Ok I am able to render it now, its fixed, thanks alot for your help

amanind
1 Dec 2010, 11:05 PM
Condor, one more question
After value are changed in gridEditor, how to get all the values on click of save button from the grid?

Condor
2 Dec 2010, 12:13 AM
grid.getStore().getRange() will return all records.

amanind
2 Dec 2010, 12:29 AM
Condor, I am not able to access grid when i click on save button,
here is my code



MS.ImpactSisterApp.FinancialProjections = Ext.extend(Ext.grid.EditorGridPanel, {
reportingPeriodData:null,

initComponent: function () {
//MS.ImpactSisterApp.SisterAppEventManager.fireEvent("getReportingPeriods", {"method": "getFundsInvestments"});
var repPeriodCombo = new MS.ImpactSisterApp.ReportingPeriodCombo({ reportingPeriodData: this.reportingPeriodData });

this.gridToolbar = new Ext.Toolbar({
items: [
{
xtype: 'label',
style:'padding: 0 6px',
text: 'Reporting Period: '
},
repPeriodCombo
]
});

var mappings = [
['Investment Level %', 'dealDetailsInfo.FinancialProjection.InvLeveIIrrPerInvCommBook', 'dealDetailsInfo.FinancialProjection.InvLevelEqtyMultiplePerInvCommBook', 'dealDetailsInfo.FinancialProjection.InvLeveIIrrPerFinUndWrit', 'dealDetailsInfo.FinancialProjection.InvLevelEqtyMultiplePerFinUndWrit'],
['MSREF USD Gross(Before MS Feed & Promote/After Currency Hedging)(%)', 'dealDetailsInfo.FinancialProjection.IrrBefFeesAftHedPerInvCommBookUsd', 'dealDetailsInfo.FinancialProjection.EqMulBefFeesAftHedPerInvCommBookUsd', 'dealDetailsInfo.FinancialProjection.IrrBefFeesAftHedPerFinUndWritUsd', 'dealDetailsInfo.FinancialProjection.EqMulBefFeesAftHedPerFinUndWritUsd'],
['MSREF Net(Before MS Feed & Promote/After Currency Hedging)(%)', 'dealDetailsInfo.FinancialProjection.NetIrrAftFeesAftHedPerInvCommBook', 'dealDetailsInfo.FinancialProjection.NetEqMulAftFeesAftHedPerInvCommBook', 'dealDetailsInfo.FinancialProjection.NetIrrAftFeesAftHedPerFinUndWrit', 'dealDetailsInfo.FinancialProjection.NetEqMulAftFeesAftHedPerFinUndWrit'],
['Exit Date Investment Committee Approved Allocation($)', 'dealDetailsInfo.FinancialProjection.ExitDatePerInvCommBook', '', 'dealDetailsInfo.FinancialProjection.ExitDatePerFinUndWrit', ''],
['General Comments', 'dealDetailsInfo.FinancialProjection.GeneralComments', 'dealDetailsInfo.FinancialProjection.GeneralComments', 'dealDetailsInfo.FinancialProjection.GeneralComments', 'dealDetailsInfo.FinancialProjection.GeneralComments']
];
for (var i = 0; i < mappings.length; i++) {
var mapping = mappings[i];
for (var j = 1; j < 5; j++) {
mapping[j] = Ext.data.JsonReader.prototype.getJsonAccessor.call(null, mapping[j]);
}
//mapping[5] = mapping[5] == 'Y' ? -1 : 1;
}
//var rowEditor = new Ext.ux.grid.RowEditor();
this.store = new Ext.data.JsonStore({
fields: ['investment', 'msrefUSD', 'msrefNET', 'exitDate', 'generalC']
});
this.store.reader.readRecords = function (o) {
o = {
dealDetailsInfo: o.dealDetailsInfo || {}
};
var records = [];
for (var i = 0; i < mappings.length; i++) {
var mapping = mappings[i];
records.push(new this.recordType({
investment: mapping[0],
msrefUSD: (mapping[1](o) || 0),
msrefNET: (mapping[2](o) || ''),
exitDate: (mapping[3](o) || 0),
generalC: (mapping[4](o) || '')
}));
}
// console.log(records);
return {
success: true,
records: records,
totalRecords: records.length
};
};
var colModel = new Ext.grid.ColumnModel({
columns: [{
id: 'investment',
header: '',
width: 460,
sortable: false,
dataIndex: 'investment'
},
{
header: 'IRR',
id: 'msrefUSD',
width: 110,
sortable: false,
align: 'right',
renderer: this.msrefUSD,
editor : new Ext.form.NumberField({
disabled: true,
id:'msrefUSDText'
}),
dataIndex: 'msrefUSD'
},
{
header: 'Equity Multiple',
width: 110,
sortable: false,
align: 'right',
renderer: this.msrefNET,
editor : new Ext.form.NumberField({
disabled: true,
id:'msrefNETText'
}),
dataIndex: 'msrefNET'
},
{
header: 'IRR',
width: 110,
sortable: false,
align: 'right',
renderer: this.exitDate,
editor : new Ext.form.NumberField({
disabled: true,
id:'exitDateText'
}),
dataIndex: 'exitDate'
},
{
header: 'Equity Multiple',
width: 110,
sortable: false,
align: 'right',
renderer: this.generalC,
editor : new Ext.form.NumberField({
disabled: true,
id:'generalCText'
}),
dataIndex: 'generalC'
}],
editors: {
'text': new Ext.grid.GridEditor(new Ext.form.TextField({})),
'number': new Ext.grid.GridEditor(new Ext.form.NumberField({ disabled: true })),
'date': new Ext.grid.GridEditor(new Ext.form.DateField({ format: 'm/d/Y' }))
},
getCellEditor: function(colIndex, rowIndex) {
var field = this.getDataIndex(colIndex);
if(rowIndex == 1 && (colIndex == 3 || colIndex == 4)){
return this.editors['number'];
}
if(rowIndex == 3 && (colIndex == 2 || colIndex == 4)){
return this.editors['number'];
}
if(rowIndex == 4){
return this.editors['text'];
}
if(Ext.getCmp('saveBtn').enabled){
if(rowIndex == 3 && (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);
}
});
var config = {
frame: true,
hideBorders: true,
timeout: 60000,
header: false,
layout: 'table',
tbar: this.gridToolbar,
layoutConfig: {
columns: 2
},
buttonAlign: 'right',
buttons: [
{
text: 'Edit',
id: 'editBtn',
handler: function() {
Ext.getCmp('saveBtn').enable().enabled = true;
Ext.getCmp('cancelBtn').enable().enabled = true;
Ext.getCmp('editBtn').disable().disabled = true;

Ext.getCmp('msrefUSDText').enable().enabled = true;
Ext.getCmp('msrefNETText').enable().enabled = true;
Ext.getCmp('exitDateText').enable().enabled = true;
Ext.getCmp('generalCText').enable().enabled = true;
//onStartEditing();
}
},{
text: 'Save',
id: 'saveBtn',
disabled: true,
handler: function() {
colModel.getStore().getRange()
}
},
{
text: 'Cancel',
id: 'cancelBtn',
disabled: true,
handler: function() {
Ext.getCmp('saveBtn').disable().disabled = true;
Ext.getCmp('cancelBtn').disable().disabled = true;
Ext.getCmp('editBtn').enable().enabled = true;
Ext.getCmp('msrefUSDText').disable().disabled = true;
Ext.getCmp('msrefNETText').disable().disabled = true;
Ext.getCmp('exitDateText').disable().disabled = true;
Ext.getCmp('generalCText').disable().disabled = true;
Ext.getCmp('saveBtn').enabled = false;
}
}],

id: 'columnStruct',
store: this.store,
clicksToEdit :1,
cm: colModel,
stripeRows: true,
enableHdMenu: false,
enableColumnMove: false,
enableColumnResize: false,
autoExpandColumn: 'investment',
height: 250,
width: 900,
plugins: [
new Ext.ux.grid.ColumnHeaderGroup({
rows: [
[{
// no header
},
{
header: '(Per Investment Committee Book)',
align: 'center',
colspan: 2
},
{
header: '(Per Final Underwriting/Magic Page)',
align: 'center',
colspan: 2
}]
]
})
]
};
Ext.apply(this.initialConfig, config);
Ext.apply(this, config);
MS.ImpactSisterApp.FinancialProjections.superclass.initComponent.apply(this, arguments);
repPeriodCombo.on("select", this.reLoadGrid, this);
//this.on('cellclick', this.onStartEditing, this);
this.store.loadData(this);
},
onStartEditing: function(grid, rowIndex, columnIndex, e) {
var record = grid.getStore().getAt(rowIndex); // Get the Record
var fieldName = grid.getColumnModel().getCellEditor(columnIndex); // Get field name
var data = record.get(fieldName);
if(rowIndex == 3 && (columnIndex == 1 || columnIndex == 3)){
record.set(fieldName, "");
}
},
reLoadGrid: function(val){
//this.items.items[i].items.items[0].items.items[0].getStore().loadData(cashflowsummary);
},
msrefUSD: function (value) {
if(isNaN(value)){
if(value.indexOf('Date') != -1){
var val = MS.ImpactSisterApp.convertToDate(value);
return (new Date(val)).format('m/d/Y');
} else {
if((typeof(value)==='date')?true:(typeof(value)==='object')?value.constructor.toString().match(/date/i)!==null:false){
return (new Date(value)).format('m/d/Y');
} else {
return value;
}
}
} else {
if((typeof(value)==='date')?true:(typeof(value)==='object')?value.constructor.toString().match(/date/i)!==null:false){
return (new Date(value)).format('m/d/Y');
} else {
return value;
}
}
},
msrefNET: function (value) {
if(value == ''){
return value;
} else {
return value;
}
},
exitDate: function (value) {
if(isNaN(value)){
if(value.indexOf('Date') != -1){
var val = MS.ImpactSisterApp.convertToDate(value);
return (new Date(val)).format('m/d/Y');
} else {
return value;
}
} else {
return value;
}
},
generalC: function (value) {
if(value == ''){
return value;
} else {
return value;
}
},
formatDate: function(value) {
debugger
return value = (new Date(value)).format('m/d/Y');
}
});

Condor
2 Dec 2010, 12:49 AM
You could use:

handler: function () {
var records = this.getStore().getRange();
...
},
scope: this
or

handler: function (btn) {
var grid = btn.findParentByType('grid');
var records = grid.getStore().getRange();
...
}

amanind
2 Dec 2010, 1:24 AM
Condor, both option throw error
var records = this.getStore().getRange(); // error: Object required

var grid = btn.findParentByType('grid'); // error: null

amanind
2 Dec 2010, 7:37 PM
Condor, it works with var grid = btn.findParentByType();
thanks alot for help

Can we merge 4 column in a row to display textarea for that row like in screenshot
23642

Condor
2 Dec 2010, 11:44 PM
Row spanning is not supported by GridPanel.

But is this a cell value or a cell editor? You could modify EditorGridPanel, so it shows an editor over more than one cell.

amanind
3 Dec 2010, 12:09 AM
I did not understand where to change
Here is my code



MS.ImpactSisterApp.FinancialProjections = Ext.extend(Ext.grid.EditorGridPanel, {
reportingPeriodData:null,
gridToolbar: null,

initComponent: function () {
//MS.ImpactSisterApp.SisterAppEventManager.fireEvent("getReportingPeriods", {"method": "getFundsInvestments"});
var repPeriodCombo = new MS.ImpactSisterApp.ReportingPeriodCombo({ reportingPeriodData: this.reportingPeriodData });

this.gridToolbar = new Ext.Toolbar({
items: [
{
xtype: 'label',
style:'padding: 0 6px',
text: 'Reporting Period: '
},
repPeriodCombo
]
});

var mappings = [
['Investment Level %', 'dealDetailsInfo.InvLeveIIrrPerInvCommBook', 'dealDetailsInfo.InvLevelEqtyMultiplePerInvCommBook', 'dealDetailsInfo.InvLeveIIrrPerFinUndWrit', 'dealDetailsInfo.InvLevelEqtyMultiplePerFinUndWrit'],
['MSREF USD Gross(Before MS Feed & Promote/After Currency Hedging)(%)', 'dealDetailsInfo.IrrBefFeesAftHedPerInvCommBookUsd', 'dealDetailsInfo.EqMulBefFeesAftHedPerInvCommBookUsd', 'dealDetailsInfo.IrrBefFeesAftHedPerFinUndWritUsd', 'dealDetailsInfo.EqMulBefFeesAftHedPerFinUndWritUsd'],
['MSREF Net(Before MS Feed & Promote/After Currency Hedging)(%)', 'dealDetailsInfo.NetIrrAftFeesAftHedPerInvCommBook', 'dealDetailsInfo.NetEqMulAftFeesAftHedPerInvCommBook', 'dealDetailsInfo.NetIrrAftFeesAftHedPerFinUndWrit', 'dealDetailsInfo.NetEqMulAftFeesAftHedPerFinUndWrit'],
['Exit Date Investment Committee Approved Allocation($)', 'dealDetailsInfo.ExitDatePerInvCommBook', '', 'dealDetailsInfo.ExitDatePerFinUndWrit', ''],
['General Comments', 'dealDetailsInfo.GeneralComments']
];
for (var i = 0; i < mappings.length; i++) {
var mapping = mappings[i];
for (var j = 1; j < 5; j++) {
mapping[j] = Ext.data.JsonReader.prototype.getJsonAccessor.call(null, mapping[j]);
}
//mapping[5] = mapping[5] == 'Y' ? -1 : 1;
}
//var rowEditor = new Ext.ux.grid.RowEditor();
this.store = new Ext.data.JsonStore({
fields: ['investment', 'msrefUSD', 'msrefNET', 'exitDate', 'generalC']
});
this.store.reader.readRecords = function (o) {
o = {
dealDetailsInfo: o.dealDetailsInfo || {}
};
var records = [];
for (var i = 0; i < mappings.length; i++) {
var mapping = mappings[i];
records.push(new this.recordType({
investment: mapping[0],
msrefUSD: (mapping[1](o) || 0),
msrefNET: (mapping[2](o) || ''),
exitDate: (mapping[3](o) || 0),
generalC: (mapping[4](o) || '')
}));
}
// console.log(records);
return {
success: true,
records: records,
totalRecords: records.length
};
};
var colModel = new Ext.grid.ColumnModel({
columns: [{
id: 'investment',
header: '',
width: 460,
sortable: false,
dataIndex: 'investment'
},
{
header: 'IRR',
id: 'msrefUSD',
width: 110,
sortable: false,
align: 'right',
renderer: this.msrefUSD,
editor : new Ext.form.NumberField({
disabled: true,
id:'msrefUSDText'
}),
dataIndex: 'msrefUSD'
},
{
header: 'Equity Multiple',
width: 110,
sortable: false,
align: 'right',
renderer: this.msrefNET,
editor : new Ext.form.NumberField({
disabled: true,
id:'msrefNETText'
}),
dataIndex: 'msrefNET'
},
{
header: 'IRR',
width: 110,
sortable: false,
align: 'right',
renderer: this.exitDate,
editor : new Ext.form.NumberField({
disabled: true,
id:'exitDateText'
}),
dataIndex: 'exitDate'
},
{
header: 'Equity Multiple',
width: 110,
sortable: false,
align: 'right',
renderer: this.generalC,
editor : new Ext.form.NumberField({
disabled: true,
id:'generalCText'
}),
dataIndex: 'generalC'
}],
editors: {
'text': new Ext.grid.GridEditor(new Ext.form.TextField({ style: 'width:200px'})),
'number': new Ext.grid.GridEditor(new Ext.form.NumberField({ disabled: true })),
'date': new Ext.grid.GridEditor(new Ext.form.DateField({ format: 'm/d/Y' }))
},
getCellEditor: function(colIndex, rowIndex) {
var field = this.getDataIndex(colIndex);
if(rowIndex == 1 && (colIndex == 3 || colIndex == 4)){
return this.editors['number'];
}
if(rowIndex == 3 && (colIndex == 2 || colIndex == 4)){
return this.editors['number'];
}
if(rowIndex == 4){
return this.editors['text'];
}
if(Ext.getCmp('saveBtn').enabled){
if(rowIndex == 3 && (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);
}
});
var config = {
frame: true,
hideBorders: true,
timeout: 60000,
header: false,
layout: 'table',
tbar: this.gridToolbar,
layoutConfig: {
columns: 2
},
buttonAlign: 'right',
buttons: [
{
text: 'Edit',
id: 'editBtn',
handler: function() {
Ext.getCmp('saveBtn').enable().enabled = true;
Ext.getCmp('cancelBtn').enable().enabled = true;
Ext.getCmp('editBtn').disable().disabled = true;

Ext.getCmp('msrefUSDText').enable().enabled = true;
Ext.getCmp('msrefNETText').enable().enabled = true;
Ext.getCmp('exitDateText').enable().enabled = true;
Ext.getCmp('generalCText').enable().enabled = true;
//onStartEditing();
}
},{
text: 'Save',
id: 'saveBtn',
disabled: true,
handler: function(btn) {
debugger
//var records = this.getStore().getRange();
var grid = btn.findParentByType();
var records = grid.getStore().getRange();

parStr += "&investmentId =" + this.dealDetailsInfo.Investment.Id;
parStr += "&reportingPeriodId =" + repPeriodCombo.selectedItem.ReportingPeriodId;
parStr += "&InvLeveIIrrPerInvCommBook =" + records[0].data.msrefUSD;
parStr += "&InvLevelEqtyMultiplePerInvCommBook =" + records[0].data.msrefNET;
parStr += "&InvLeveIIrrPerFinUndWrit =" + records[0].data.generalC;
parStr += "&InvLevelEqtyMultiplePerFinUndWrit =" + records[0].data.exitDate;
parStr += "&IrrBefFeesBefHedPerInvCommBookLc =" + records[1].data.msrefUSD;
parStr += "&EqMulBefFeesBefHedPerInvCommBookLc =" + records[1].data.msrefNET;
parStr += "&IrrBefFeesBefHedPerFinUndWritLc =" + records[1].data.generalC;
parStr += "&EqMulBefFeesBefHedPerFinUndWritLc =" + records[1].data.exitDate;
parStr += "&IrrBefFeesAftHedPerInvCommBookUsd =" + records[2].data.msrefUSD;
parStr += "&EqMulBefFeesAftHedPerInvCommBookUsd =" + records[2].data.msrefNET;
parStr += "&NetIrrAftFeesAftHedPerInvCommBook =" + records[2].data.generalC;
parStr += "&NetEqMulAftFeesAftHedPerInvCommBook =" + records[2].data.exitDate;
parStr += "&NetIrrAftFeesAftHedPerFinUndWrit =" + records[3].data.msrefUSD;
parStr += "&NetEqMulAftFeesAftHedPerFinUndWrit =" + records[3].data.msrefNET;
parStr += "&InvCommAppAllocPerInvCommBook =" + records[3].data.generalC;
parStr += "&InvCommAppAllocPerFinUndWrit =" + records[3].data.exitDate;
parStr += "&GeneralComments =" + records[4].data.msrefUSD;
var url = MS.ImpactSisterApp.impactHttpHandlerUrl + parStr;
MS.ImpactSisterApp.SisterAppEventManager.fireEvent("saveFinancialProjection", { "method": "saveFinancialProjection", "url": url });

Ext.getCmp('saveBtn').disable().disabled = true;
Ext.getCmp('cancelBtn').disable().disabled = true;
Ext.getCmp('editBtn').enable().enabled = true;
Ext.getCmp('msrefUSDText').disable().disabled = true;
Ext.getCmp('msrefNETText').disable().disabled = true;
Ext.getCmp('exitDateText').disable().disabled = true;
Ext.getCmp('generalCText').disable().disabled = true;
Ext.getCmp('saveBtn').enabled = false;
}
},
{
text: 'Cancel',
id: 'cancelBtn',
disabled: true,
handler: function() {
Ext.getCmp('saveBtn').disable().disabled = true;
Ext.getCmp('cancelBtn').disable().disabled = true;
Ext.getCmp('editBtn').enable().enabled = true;
Ext.getCmp('msrefUSDText').disable().disabled = true;
Ext.getCmp('msrefNETText').disable().disabled = true;
Ext.getCmp('exitDateText').disable().disabled = true;
Ext.getCmp('generalCText').disable().disabled = true;
Ext.getCmp('saveBtn').enabled = false;
}
}],

id: 'columnStruct',
store: this.store,
clicksToEdit :1,
cm: colModel,
stripeRows: true,
enableHdMenu: false,
enableColumnMove: false,
enableColumnResize: false,
autoExpandColumn: 'investment',
height: 250,
width: 900,
plugins: [
new Ext.ux.grid.ColumnHeaderGroup({
rows: [
[{
// no header
},
{
header: '(Per Investment Committee Book)',
align: 'center',
colspan: 2
},
{
header: '(Per Final Underwriting/Magic Page)',
align: 'center',
colspan: 2
}]
]
})
]
};
Ext.apply(this.initialConfig, config);
Ext.apply(this, config);
MS.ImpactSisterApp.FinancialProjections.superclass.initComponent.apply(this, arguments);
repPeriodCombo.on("select", this.reLoadGrid, this);
//this.on('cellclick', this.onStartEditing, this);
this.store.loadData(this);
},
onStartEditing: function(grid, rowIndex, columnIndex, e) {
var record = grid.getStore().getAt(rowIndex); // Get the Record
var fieldName = grid.getColumnModel().getCellEditor(columnIndex); // Get field name
var data = record.get(fieldName);
if(rowIndex == 3 && (columnIndex == 1 || columnIndex == 3)){
record.set(fieldName, "");
}
},
reLoadGrid: function(val){
debugger
//this.items.items[i].items.items[0].items.items[0].getStore().loadData(cashflowsummary);
},
msrefUSD: function (value) {
if(isNaN(value)){
if(value.indexOf('Date') != -1){
var val = MS.ImpactSisterApp.convertToDate(value);
return (new Date(val)).format('m/d/Y');
} else {
if((typeof(value)==='date')?true:(typeof(value)==='object')?value.constructor.toString().match(/date/i)!==null:false){
return (new Date(value)).format('m/d/Y');
} else {
return value;
}
}
} else {
if((typeof(value)==='date')?true:(typeof(value)==='object')?value.constructor.toString().match(/date/i)!==null:false){
return (new Date(value)).format('m/d/Y');
} else {
return value;
}
}
},
msrefNET: function (value) {
if(value == ''){
return value;
} else {
return value;
}
},
exitDate: function (value) {
if(isNaN(value)){
if(value.indexOf('Date') != -1){
var val = MS.ImpactSisterApp.convertToDate(value);
return (new Date(val)).format('m/d/Y');
} else {
return value;
}
} else {
return value;
}
},
generalC: function (value) {
if(value == ''){
return value;
} else {
return value;
}
},
onDestroy: function() {
this.dealDetailsInfo = null;
this.gridToolbar = null;
repPeriodCombo.un("select", this.reLoadGrid, this);
}
});

Condor
3 Dec 2010, 12:23 AM
You'll first have to explain what that textarea there is. Is it supposed to be a cell value (always visible) or a cell editor (visible when editing)?

Or is it a detail row below a row? In which case you can use enableRowBody:true and return the riow body content from the getRowClass method.

amanind
3 Dec 2010, 12:59 AM
As you see in above screenshot, it is read only value when user click on edit button the grid becomes editable

Condor
3 Dec 2010, 1:04 AM
And is it a separate row or is it a detail row for the row before it?

amanind
3 Dec 2010, 1:14 AM
No this is not separate row.

Condor
3 Dec 2010, 1:22 AM
Configure your grid view with enableRowBody:true and write a getRowClass method that fills rowParams.body with the markup for a textarea.

amanind
3 Dec 2010, 1:42 AM
Sorry Condor, my mind is not working, please write code for me for getRowClass method

Condor
3 Dec 2010, 1:56 AM
Very basic example:

viewConfig: {
enableRowBody: true,
getRowClass: function(record, rowIndex, rowParams, store){
rowParams.body = '<textarea>' + record.get('somefield') + '</textarea>';
},
...
}

amanind
3 Dec 2010, 3:32 AM
This is still showing in one column not extended in all the four like in screenshot
Can I post my code again

23648

Condor
3 Dec 2010, 3:39 AM
That is something you need to program yourself.

You can initially specify style="width:' + grid.getView().getTotalWidth() + 'px"' for your <textarea>, but you will also need to listen for "widthchange" and "hiddenchange" messages from the columnmodel and update the width of existing textareas.

amanind
8 Dec 2010, 1:54 AM
Condor, I am using date editor
'date': new Ext.grid.GridEditor(new Ext.form.DateField({ format: 'm/d/Y' }))

but when I click on date column in grid, date disappears and it is blank, like you see in above screenshot where red arrow is.
Any solution for this

Condor
8 Dec 2010, 2:16 AM
The field should contain a Date and not a String.

Did you specify a type and a dateFormat in your field?

amanind
8 Dec 2010, 3:28 AM
When grid is in readonly mode then it is column is numberField and on clcik on edit button it becomes datefield after becoming datefield it works fine, data disappears only in redaonly mode.

Condor
8 Dec 2010, 3:42 AM
I don't understand. Could you explain better?

amanind
8 Dec 2010, 3:50 AM
I will explain you with my code
here is my code, At the time of rendering all the column are numberField but In my grid 4 rows are number, one row contains datefield and one row contains text, so in starting I am keeping all rows in numberField and on click on edit button, i convert it into datefield and textfield



var colModel = new Ext.grid.ColumnModel({
columns: [{
id: 'investment',
header: '',
width: 460,
sortable: false,
dataIndex: 'investment'
},
{
header: 'IRR',
id: 'msrefUSD',
width: 110,
sortable: false,
align: 'right',
viewConfig: {
enableRowBody: true
},
renderer: this.msrefUSD,
editor : new Ext.form.NumberField({
disabled: true,
id:'msrefUSDText'
}),
dataIndex: 'msrefUSD'
},
{
header: 'Equity Multiple',
width: 110,
sortable: false,
align: 'right',
renderer: this.msrefNET,
editor : new Ext.form.NumberField({
disabled: true,
id:'msrefNETText'
}),
dataIndex: 'msrefNET'
},
{
header: 'IRR',
width: 110,
sortable: false,
align: 'right',
renderer: this.exitDate,
editor : new Ext.form.NumberField({
disabled: true,
id:'exitDateText'
}),
dataIndex: 'exitDate'
},
{
header: 'Equity Multiple',
width: 110,
sortable: false,
align: 'right',
renderer: this.generalC,
editor : new Ext.form.NumberField({
disabled: true,
id:'generalCText'
}),
dataIndex: 'generalC'
}],
editors: {
'text': new Ext.grid.GridEditor(new Ext.form.TextArea({
width : 250,
disabled : true,
id: 'textarea'})),
'number': new Ext.grid.GridEditor(new Ext.form.NumberField({ disabled: true })),
'date': new Ext.grid.GridEditor(new Ext.form.DateField({ format: 'm/d/Y' }))
},
getCellEditor: function(colIndex, rowIndex) {
var field = this.getDataIndex(colIndex);
if(rowIndex == 1 && (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);
}
});

Condor
8 Dec 2010, 4:16 AM
Ok, but for the Date cells, the record must contain a Date and not a Number.

And you probably want a column renderer that renders the Date like you want it too.

amanind
8 Dec 2010, 4:26 AM
Can I change column editor at runtime depends upon data.
Like when there is value number the editor for becomes numberField and when there is date the editor becomes dateField at the time of rendering

here is my rendering code



msrefUSD: function (value) {
if(isNaN(value)){
if(value.indexOf('Date') != -1){
var val = MS.ImpactSisterApp.convertToDate(value);
return (new Date(val)).format('m/d/Y');
} else {
if((typeof(value)==='date')?true:(typeof(value)==='object')?value.constructor.toString().match(/date/i)!==null:false){
return (new Date(value)).format('m/d/Y');
} else {
return value;
}
}
} else {
if((typeof(value)==='date')?true:(typeof(value)==='object')?value.constructor.toString().match(/date/i)!==null:false){
return (new Date(value)).format('m/d/Y');
} else {
return value;
}
}
}

Condor
8 Dec 2010, 4:51 AM
Why use:

if((typeof(value)==='date')?true:(typeof(value)==='object')?value.constructor.toString().match(/date/i)!==null:false){
instead of:

if (Ext.isDate(value)) {

amanind
9 Dec 2010, 3:41 AM
Condor, still after date format in the colume, it disappear when focus come out of that column

Condor
9 Dec 2010, 4:33 AM
The editor should set a date in the record field, which the renderer should show as a date string.

You could check both in a debugger.

amanind
9 Dec 2010, 4:43 AM
I didn't understand, what you want to debug and check

Condor
9 Dec 2010, 4:48 AM
Debug yourself!

- After editing the cell, selecting a date and leaving that cell, is the record updated and does it contain a Date value?
- How does the column renderer display this Date value?

amanind
9 Dec 2010, 5:15 AM
After debug, i found that when i click out of cell, the renderering function get value="" for datefield only(In case of readonly mode but works fine in editing mode)

amanind
9 Dec 2010, 5:39 AM
Thanks alot condor, found the solution. you rock

amanind
9 Dec 2010, 6:41 AM
Condor

When I click on "Edit" button, I make "Edit" button disabled and enabled "Save" button
Ext.getCmp('editBtn').disable().disabled = true;
Ext.getCmp('saveBtn').enable().enabled = true;

I have 3 tabs and both the buttons are present on all the 3 tabs.
but edit button works on only one tab, on other tabs it will call handler but didnt enable "Save" button because save button is already enabled on other tab. Any solution

Condor
9 Dec 2010, 6:49 AM
That should be:

Ext.getCmp('editBtn').disable();

Does each tab have Edit and Save buttons or do you just have one Edit and Save button for all tabs?

amanind
9 Dec 2010, 6:52 AM
Yes each tab have different edit and save button

amanind
9 Dec 2010, 7:03 AM
when I click on first tabe edit button, it will enable second tab save button

Condor
9 Dec 2010, 7:31 AM
Component ids have to be unique. Did you give each edit and save button a different id?

amanind
9 Dec 2010, 7:43 AM
Actually, I have one method that created all the tabs on clcik of some different links.

Condor
9 Dec 2010, 7:45 AM
You still have to make sure all ids are unique.

Maybe you should switch to using itemIds, e.g. panel.getBottomToolbar().getComponent('itemId-of-button')

amanind
10 Dec 2010, 2:10 AM
Hi Condor,

this issue is fixed, I have change the id at runtime for all the buttons. thanks alot

Now the issue I am facing is, when I close the tab it throws js error in ext-all.js on this line
if(this.frame){a+=this.el.dom.firstChild.offsetHeight+this.ft.dom.offsetHeight+this.mc.getFrameWidth("tb")}

After debugging: a = 0 and this.el.dom.firstChild = null

where should be the problem

amanind
10 Dec 2010, 3:35 AM
Condor, can you give me some solution?

Condor
10 Dec 2010, 4:05 AM
You have to wait until the rows are rendered (use the viewready or load event).

amanind
10 Dec 2010, 5:10 AM
Condor, i am taking about these Tabs, when I close these tabs, it show error

23758