Re-insertion d'un Enregistrement dans un Magasin extJS

Le code

Ext.onReady(
function() {
Ext.QuickTips.init();
Ext.namespace('TimeTracker');
TimeTracker.dataStore = new Ext.data.JsonStore(
{
root: 'timecardEntries',
url: 'php/scripts/timecardEntry.script.php',
storeId: 'timesheet',
autoLoad: true,
autoSave: true,
writer: new Ext.data.JsonWriter(
{
encode: true
}
),
fields: [
{name: 'id', type: 'integer'},
{name: 'user_id', type: 'integer'},
{name: 'ticket_id', type: 'integer'},
{name: 'description', type: 'string'},
{name: 'start_time', type: 'date', dateFormat: 'Y-m-d H:i:s'},
{name: 'stop_time', type: 'date', dateFormat: 'Y-m-d H:i:s'},
{name: 'client_id', type: 'integer'},
{name: 'is_billable', type: 'integer'}
]
}
);
TimeTracker.timeEntryGrid = new Ext.grid.EditorGridPanel(
{
renderTo: Ext.getBody(),
store: TimeTracker.dataStore,
autoFit: true,
height: 500,
title: 'Timesheet Entries',
tbar: [
{
xtype: 'button',
text: 'Add Record',
iconCls: 'silk-add',
handler: function() {
var timecardEntry = TimeTracker.timeEntryGrid.getStore().recordType;
var tce = new timecardEntry(
{
description: 'New Timesheet Entry',
start_time: new Date().format('m/d/Y H:i:s'),
is_billable: 0
}
)
TimeTracker.timeEntryGrid.stopEditing();
var newRow = TimeTracker.dataStore.getCount();
TimeTracker.dataStore.insert(newRow, tce);
TimeTracker.timeEntryGrid.startEditing(newRow, 0);
}
}
],
view: new Ext.grid.GridView(
{
autoFill: true
}
),
colModel: new Ext.grid.ColumnModel(
{
defaults: {
sortable: true,
editable: true
},
columns: [
{
id: 'ticket_number',
header: 'Ticket #',
dataIndex: 'ticket_number',
editor: new Ext.form.TextField({allowBlank: true}),
renderer: function(value) {
return (!value) ? 'N/A' : value;
}
},
{
id: 'description',
header: 'Description',
dataIndex: 'description',
editor: new Ext.form.TextField({allowBlank: false})
},
{
id: 'start_time',
header: 'Start',
dataIndex: 'start_time',
renderer: Ext.util.Format.dateRenderer('m/d/Y h:i A'),
editor: new Ext.form.DateField({allowBlank: false})
},
{
id: 'stop_time',
header: 'Stop',
dataIndex: 'stop_time',
renderer: Ext.util.Format.dateRenderer('m/d/Y h:i A'),
editor: new Ext.form.DateField({allowBlank: false})
},
{
id: 'client',
header: 'Client',
dataIndex: 'client_id',
renderer: function(value) {
return (!value) ? 'N/A' : value;
}
},
{
id: 'billable',
header: 'Billable',
dataIndex: 'is_billable',
renderer: function(value) {
return (!value) ? 'No' : 'Yes';
}                     
},
{
id: 'actions',
header: null,
xtype: 'actioncolumn',
items: [
{
icon: 'assets/images/silk_icons/page_copy.png',
iconCls: 'action_icon',
handler: function(grid, rowIndex, columnIndex) {
//THE PROBLEM STARTS HERE
grid.stopEditing();
var newRow = TimeTracker.dataStore.getCount();
recordClone = grid.store.getAt(rowIndex);
recordClone.data.start_time = new Date().format('Y-m-d H:i:s');
grid.store.insert(newRow, recordClone);
grid.startEditing(newRow, 0);
}
},
{
icon: 'assets/images/silk_icons/page_delete.png',
handler: function(grid, rowIndex, columnIndex) {
alert('called');
}
}
]
}
]
}
)
}
);
}
);

L'Objectif

Lorsque l'utilisateur clique sur le bouton 'copier', que de stocker l'enregistrement est stocké dans la mémoire, ses start_time " est défini à la date et l'heure, et il est ré-inséré dans le magasin comme un nouveau record

Le Résultat Courant

J'ai le message suivant erreur JS: Uncaught TypeError: Cannot read property 'données' undefined

Ma Question(s)

Pour commencer, je ne suis même pas sûr si je passe la ligne sélectionnée de l'enregistrement de données correctement. Deuxièmement, je n'ai aucune idée de ce que le message d'erreur que je reçois des moyens.

Toute aide est, comme toujours, très appréciée.

Grâce.

Mise à jour de 1

Après quelques réglages, voici ce que j'ai trouvé (ce code modifié pour la copie gestionnaire de bouton)

                    {
id: 'actions',
header: null,
xtype: 'actioncolumn',
items: [
{
icon: 'assets/images/silk_icons/page_copy.png',
iconCls: 'action_icon',
handler: function(grid, rowIndex, columnIndex) {
grid.stopEditing();
var newRow = TimeTracker.dataStore.getCount();
var currentRecord = grid.store.getAt(rowIndex);
var timecardEntry = grid.store.recordType;
tce = new timecardEntry(currentRecord.data);
tce.data.start_time = new Date().format('Y-m-d H:i:s');
grid.store.insert(newRow, tce);
}
},
{
icon: 'assets/images/silk_icons/page_delete.png',
handler: function(grid, rowIndex, columnIndex) {
alert('called');
}
}
]
}

Voici ce que j'ai fais:

1. Arrêter la modification de la grille
2. Obtenir le nombre de dossiers actuellement dans le magasin
3. Emparer de l'enregistrement actuellement sélectionné et de le stocker dans la mémoire
4. Saisir le type d'enregistrement dans le magasin
5. Créer une nouvelle instance de la boutique type d'enregistrement, et de les passer dans l'objet de données à partir de l'enregistrement sélectionné. L'objet de données est équivalent à l'objet littéral si vous faisiez un nouveau record à la main (voir mon premier bouton 'ajouter' code pour plus de détails)
6. Modifier le start_time nouvelle valeur de l'objet qui a été créé à la date du jour et l'heure
7. Insérer un enregistrement dans la grille
8. Temps heureux!

Veuillez critique de ce code et laissez-moi savoir si il ya une meilleure façon de le faire. Merci!

Mise à jour 2:

                               handler: function(grid, rowIndex, columnIndex) {
grid.stopEditing();
var recordClone = grid.store.getAt(rowIndex).copy();
Ext.data.Record.id(recordClone);
if(recordClone) {
grid.store.add(recordClone);
}
}

J'ai mis à jour le code pour utiliser le copier et ajouter des méthodes et fonctionne bien. Cependant, lorsque j'appelle la méthode add() je reçois un 'e n'est pas défini erreur", mais lorsque j'actualise la page, l'enregistrement est inséré malgré le message d'erreur. Des idées?

OriginalL'auteur Levi Hackwith | 2010-11-27