PDA

View Full Version : [Closed] EditorGridPanel losing selection/editing on tab change



JKeane
22 Nov 2010, 12:09 PM
I have a TabPanel that houses two EditorGridPanels. I'm running into a problem when the second tab (a search results grid) activates and is enabled: if one invokes any Editors on the search grid, saves their work and tabs back to the initial grid, the ability to select/edit cells is lost. Any ideas?


App.TP = new Ext.TabPanel(
{
region: "center",
activeTab: "standard",
layoutOnTabChange: true,
items: [
new App.EditorGrid(
{
id: "standard",
title: "Client Fees",
cm: new Ext.grid.ColumnModel(
{
defaults: {
sortable: true,
hideable: false,
editable: !App.protectData
},
columns: [
{
header: "ICON Product",
dataIndex: "iconproductcode",
editor: App.combos.instances.ICON_std,
renderer: Ext.util.Format.comboRenderer(App.combos.instances.ICON_std)
}, {
header: "Company/Sponsor",
dataIndex: "companyname"
}, {
header: "Fee Type",
dataIndex: "financefeedesc",
editor: new Ext.form.TextField(
{

})
}, {
header: "Amount",
dataIndex: "feeamt",
editor: new Ext.form.NumberField(
{
allowDecimals: false,
autoStripChars: true
}),
renderer: function (v)
{
if (v >= 0)
{
return "$" + v;
}
else
{
return "-$" + Math.abs(v);
}
}
}, {
header: "Received Month",
dataIndex: "feemonth",
editor: App.combos.instances.Month_std,
renderer: Ext.util.Format.comboRenderer(App.combos.instances.Month_std)
}, {
header: "Received Year",
dataIndex: "feeyear",
editor: new Ext.form.NumberField(
{
allowDecimals: false,
autoStripChars: true,
maxValue: 9999
})
}]
})
}), new App.EditorGrid(
{
id: "searchresults",
title: "Search Results",
disabled: true,
cm: new Ext.grid.ColumnModel(
{
defaults: {
sortable: true,
hideable: false,
editable: !App.protectData
},
columns: [
{
header: "ICON Product",
dataIndex: "iconproductcode",
editor: App.combos.instances.ICON_search,
renderer: Ext.util.Format.comboRenderer(App.combos.instances.ICON_search)
}, {
header: "Company/Sponsor",
dataIndex: "companyname"
}, {
header: "Fee Type",
dataIndex: "financefeedesc",
editor: new Ext.form.TextField(
{

})
}, {
header: "Amount",
dataIndex: "feeamt",
editor: new Ext.form.NumberField(
{
allowDecimals: false,
autoStripChars: true
}),
renderer: function (v)
{
if (v >= 0)
{
return "$" + v;
}
else
{
return "-$" + Math.abs(v);
}
}
}, {
header: "Received Month",
dataIndex: "feemonth",
editor: App.combos.instances.Month_search,
renderer: Ext.util.Format.comboRenderer(App.combos.instances.Month_search)
}, {
header: "Received Year",
dataIndex: "feeyear",
editor: new Ext.form.NumberField(
{
allowDecimals: false,
autoStripChars: true,
maxValue: 9999
})
}]
})
})],
listeners: {
beforetabchange: function (tp, newPanel, currentPanel)
{
if (currentPanel && currentPanel.getStore().getModifiedRecords().length)
{
Ext.Msg.show(
{
buttons: Ext.Msg.OK,
icon: Ext.Msg.WARNING,
title: "Error",
msg: "Please save your work before switching tabs.",
width: 340
});
return false;
}
else return true;
}
},
fbar: {
buttonAlign: "left",
hidden: App.protectData,
items: [
{
xtype: "button",
text: "Save",
listeners: {
click: function ()
{
var p = App.TP.getActiveTab();
var s = p.getStore();
var dirtyRecords = s.getModifiedRecords();
var isValid = true; //assume true -- one invalid Record will be enough
Ext.each(dirtyRecords, function (item, idx)
{
if (!item.isValid() || item.get('companyid') == '' || item.get('iconproductcode') == '' || item.get('financefeedesc').trim() == '' || item.get('feeamt') == 0 || item.get('feemonth') == '' || item.get('feeyear') == 0)
{
isValid = false;
return false;
}
});
if (!isValid)
{
Ext.Msg.show(
{
buttons: Ext.Msg.OK,
icon: Ext.Msg.WARNING,
title: "Error",
msg: "The data entered contains one or more errors.",
width: 340
});
return false;
}
else
{
s.save();
}
}
}
}, {
xtype: "button",
text: "Insert",
listeners: {
click: function ()
{
popCompanyList();
}
}
}, {
xtype: "button",
text: "Delete",
listeners: {
click: function ()
{
var p = App.TP.getActiveTab();
var s = p.getStore();
selCell = p.getSelectionModel().getSelectedCell();
if (!selCell) Ext.Msg.alert("Alert", "Please choose a record to delete.")
else
{
selRow = selCell[0];
s.removeAt(selRow);
}
}
}
}

]
}
});

App.EditorGrid is a subclass of Ext.grid.EditorGridPanel with some defaults preconfigured in:


App.EditorGrid = Ext.extend(Ext.grid.EditorGridPanel, {
loadMask: true,
clicksToEdit: 1,
sm: new Ext.grid.RowSelectionModel(
{
moveEditorOnEnter: true,
singleSelect: true
}),
store: new Ext.data.Store(
{
reader: new Ext.data.JsonReader(
{
idProperty: "companyfinancefeeseq",
root: "data",
totalProperty: "recordcount",
successProperty: 'success',
fields: [
{
name: "companyfinancefeeseq"
}, {
name: "companyname"
}, {
name: "companyid"
}, {
name: "iconproductname"
}, {
name: "iconproductcode"
}, {
name: "financefeedesc"
}, {
name: "feeamt"
}, {
name: "feemonth"
}, {
name: "feeyear"
}]
}),
writer: new Ext.data.JsonWriter(
{
encode: true,
writeAllFields: true
}),
autoSave: false,
batch: false,
proxy: new Ext.data.HttpProxy(
{
api: {
create: "client_fees_action.cfm?action=create",
read: "client_fees_action.cfm?action=read",
update: "client_fees_action.cfm?action=update",
destroy: "client_fees_action.cfm?action=destroy"
},
listeners: {
write: function (dp, action, data, response, record)
{
haveRecordsBeenTouched = true;
record.commit();
},
exception: function (proxy, type, action, options, response)
{
switch (action)
{
case 'read':
errMsg = "There was a problem retrieving the data. Please contact CIBOS Support for further assistance.";
break;
default:
errMsg = "There was a problem saving your updates. Please contact CIBOS Support for further assistance.";
}
Ext.Msg.show(
{
buttons: Ext.Msg.OK,
icon: Ext.Msg.WARNING,
title: "Error",
msg: errMsg
})
}
}
}),
baseParams: {
empKeyId: < cfoutput > #Request.empKeyId# < /cfoutput>
}
}),
view: new Ext.grid.GridView({
forceFit: true
})
});

Condor
23 Nov 2010, 6:06 AM
Do NOT put complex objects in the prototype.

Configuration options like 'sm' and 'store' need to be configured in the constructor or in initComponent and cannot be specified in Ext.extend directly.

Also, you can't use the same editor in multiple column models. You need to create new editor instances for every column model instance you create.

JKeane
23 Nov 2010, 11:06 AM
Thanks, Condor. You've been a help as always. Moving away from Ext.extend() worked like a charm.