commit 2d42bbda92c84e417ddcf6f0edeffab97118cfe6
parent 9b268a1b359bbe40ac6f5fa1f4f482ae7842a184
Author: Felicitus <felicitus@felicitus.org>
Date: Sat, 26 Sep 2015 19:56:59 +0200
Added support to define the title property for a record
Diffstat:
3 files changed, 225 insertions(+), 205 deletions(-)
diff --git a/src/PartKeepr/FrontendBundle/Resources/public/js/Components/Editor/Editor.js b/src/PartKeepr/FrontendBundle/Resources/public/js/Components/Editor/Editor.js
@@ -15,6 +15,7 @@ Ext.define('PartKeepr.Editor', {
labelWidth: 150
},
enableButtons: true,
+ titleProperty: 'name',
// If false, determinates if we should sync via the store or the record itself.
// If true, always syncs the record via it's own proxy.
@@ -88,8 +89,8 @@ Ext.define('PartKeepr.Editor', {
this.record = record;
this.getForm().loadRecord(this.record);
this.show();
- if (this.record.get("name") !== "") {
- this.setTitle(this.record.get("name"));
+ if (this.record.get(this.titleProperty) !== "") {
+ this.setTitle(this.record.get(this.titleProperty));
}
this.change = false;
diff --git a/src/PartKeepr/FrontendBundle/Resources/public/js/Components/Editor/EditorComponent.js b/src/PartKeepr/FrontendBundle/Resources/public/js/Components/Editor/EditorComponent.js
@@ -5,206 +5,225 @@
* for each object: create, update, delete, view. These actions stay exactly the same for each
* distinct object.</p>
* <p>The EditorComponent is a border layout, which has a navigation and an editor area.</p>
- * @todo Document the editor system a bit better
+ * @todo Document the editor system a bit better
*/
Ext.define('PartKeepr.EditorComponent', {
- extend: 'Ext.panel.Panel',
- alias: 'widget.EditorComponent',
-
- /**
- * Misc layout settings
- */
- layout: 'border',
- padding: 5,
- border: false,
-
- /**
- * Specifies the class name of the navigation. The navigation is placed in the "west" region
- * and needs to fire the event "itemSelect". The component listens on that event and
- * creates an editor based on the selected record.
- */
- navigationClass: null,
-
- /**
- * Specifies the class name of the editor.
- */
- editorClass: null,
-
- /**
- * Contains the store for the item overview.
- */
- store: null,
-
- /**
- * Contains the associated model to load a record for.
- */
- model: null,
-
- /**
- * Defines the store to use. Defaults to {Ext.data.Store}
- */
- storeType: "Ext.data.Store",
-
- /**
- * Some default text messages. Can be overridden by sub classes.
- */
- deleteMessage: i18n("Do you really wish to delete the item %s?"),
- deleteTitle: i18n("Delete Item"),
- newItemText: i18n("New Item"),
-
- initComponent: function () {
-
- /**
- * Create the navigation panel
- */
- this.navigation = Ext.create(this.navigationClass, {
- region: 'west',
- width: 265,
- split: true,
- store: this.store
- });
-
- this.navigation.on("itemAdd", this.newRecord, this);
- this.navigation.on("itemDelete", this.confirmDelete, this);
- this.navigation.on("itemEdit", this.startEdit, this);
-
- /**
- * Create the editor panel
- */
- this.editorTabPanel = Ext.create("Ext.tab.Panel", {
- region: "center",
- layout: 'fit',
- plugins: Ext.create('Ext.ux.TabCloseMenu')
- });
-
- this.items = [ this.navigation, this.editorTabPanel ];
-
- this.callParent();
- },
- /**
- * Creates a new record. Creates a new instance of the editor.
- */
- newRecord: function (defaults) {
- Ext.apply(defaults, {});
-
- var editor = this.createEditor(this.newItemText);
- editor.newItem(defaults);
- this.editorTabPanel.add(editor).show();
- },
- /**
- * Instructs the component to edit a new record.
- * @param {Record} record The record to edit
- */
- startEdit: function (id) {
- /* Search for an open editor for the current record. If we
- * already have an editor, show the editor instead of loading
- * a new record.
- */
- var editor = this.findEditor(id);
-
- if (editor !== null) {
- editor.show();
- return;
- }
-
- // Still here? OK, we don't have an editor open. Create a new one
- var model = Ext.ClassManager.get(this.model);
-
- model.load(id, {
- scope: this,
- success: function(record, operation) {
- editor = this.createEditor(record.get("name"));
- editor.editItem(record);
- this.editorTabPanel.add(editor).show();
- },
- failure: function(record, operation) {
- console.log(record);
- console.log(operation);
- }
- });
- },
- findEditor: function (id) {
- for (var i=0;i<this.editorTabPanel.items.getCount();i++) {
- if (this.editorTabPanel.items.getAt(i).getRecordId() == id) {
- return this.editorTabPanel.items.getAt(i);
- }
- }
-
- return null;
- },
- createEditor: function (title) {
- var editor = Ext.create(this.editorClass, {
- store: this.store,
- title: title,
- model: this.model,
- closable: true,
- listeners: {
- editorClose: Ext.bind(function (m) {
- this.editorTabPanel.remove(m);
- }, this)
- }
- });
-
- editor.on("itemSaved", this.onItemSaved, this);
- return editor;
- },
- confirmDelete: function () {
- var r = this.navigation.getSelectionModel().getLastSelected();
- var recordName;
-
- if (r.getRecordName) {
- recordName = r.get("name");
- } else {
- recordName = r.get("name");
- }
-
- Ext.Msg.confirm(
- this.deleteTitle,
- sprintf(this.deleteMessage, recordName),
- function (but) {
- if (but == "yes") {
- this.deleteRecord(r);
- }
- },this);
- },
- deleteRecord: function (r) {
- var editor = this.findEditor(r.getId());
-
- if (editor !== null) {
- this.editorTabPanel.remove(editor);
- }
-
- r.erase();
- this.store.load();
- },
- // Creates a store. To be called from child's initComponent
- createStore: function (config) {
- Ext.applyIf(config, {
- autoLoad: true,
- model: this.model,
- autoSync: false, // Do not change. If true, new (empty) records would be immediately committed to the database.
- remoteFilter: true,
- remoteSort: true,
- pageSize: 15});
-
- this.store = Ext.create(this.storeType, config);
-
- // Workaround for bug http://www.sencha.com/forum/showthread.php?133767-Store.sync()-does-not-update-dirty-flag&p=607093#post607093
- this.store.on('write', function(store, operation) {
- var success=operation.wasSuccessful();
- if (success) {
- Ext.each(operation.records, function(record){
- if (record.dirty) {
- record.commit();
- }
- });
- }
- });
- },
- getStore: function () {
- return this.store;
- },
- onItemSaved: function (record) {
- this.navigation.syncChanges(record);
- }
-});-
\ No newline at end of file
+ extend: 'Ext.panel.Panel',
+ alias: 'widget.EditorComponent',
+
+ /**
+ * Misc layout settings
+ */
+ layout: 'border',
+ padding: 5,
+ border: false,
+
+ /**
+ * Specifies the class name of the navigation. The navigation is placed in the "west" region
+ * and needs to fire the event "itemSelect". The component listens on that event and
+ * creates an editor based on the selected record.
+ */
+ navigationClass: null,
+
+ /**
+ * Specifies the class name of the editor.
+ */
+ editorClass: null,
+
+ /**
+ * Contains the store for the item overview.
+ */
+ store: null,
+
+ /**
+ * Contains the associated model to load a record for.
+ */
+ model: null,
+
+ /**
+ * Defines the store to use. Defaults to {Ext.data.Store}
+ */
+ storeType: "Ext.data.Store",
+
+ /**
+ * Some default text messages. Can be overridden by sub classes.
+ */
+ deleteMessage: i18n("Do you really wish to delete the item %s?"),
+ deleteTitle: i18n("Delete Item"),
+ newItemText: i18n("New Item"),
+
+ /**
+ * @var {string} The record field to read the title property from
+ */
+ titleProperty: 'name',
+
+ initComponent: function ()
+ {
+
+ /**
+ * Create the navigation panel
+ */
+ this.navigation = Ext.create(this.navigationClass, {
+ region: 'west',
+ width: 265,
+ split: true,
+ store: this.store
+ });
+
+ this.navigation.on("itemAdd", this.newRecord, this);
+ this.navigation.on("itemDelete", this.confirmDelete, this);
+ this.navigation.on("itemEdit", this.startEdit, this);
+
+ /**
+ * Create the editor panel
+ */
+ this.editorTabPanel = Ext.create("Ext.tab.Panel", {
+ region: "center",
+ layout: 'fit',
+ plugins: Ext.create('Ext.ux.TabCloseMenu')
+ });
+
+ this.items = [this.navigation, this.editorTabPanel];
+
+ this.callParent();
+ },
+ /**
+ * Creates a new record. Creates a new instance of the editor.
+ */
+ newRecord: function (defaults)
+ {
+ Ext.apply(defaults, {});
+
+ var editor = this.createEditor(this.newItemText);
+ editor.newItem(defaults);
+ this.editorTabPanel.add(editor).show();
+ },
+ /**
+ * Instructs the component to edit a new record.
+ * @param {Record} record The record to edit
+ */
+ startEdit: function (id)
+ {
+ /* Search for an open editor for the current record. If we
+ * already have an editor, show the editor instead of loading
+ * a new record.
+ */
+ var editor = this.findEditor(id);
+
+ if (editor !== null) {
+ editor.show();
+ return;
+ }
+
+ // Still here? OK, we don't have an editor open. Create a new one
+ var model = Ext.ClassManager.get(this.model);
+
+ model.load(id, {
+ scope: this,
+ success: function (record, operation)
+ {
+ editor = this.createEditor(record.get(this.titleProperty));
+ editor.editItem(record);
+ this.editorTabPanel.add(editor).show();
+ },
+ failure: function (record, operation)
+ {
+ console.log(record);
+ console.log(operation);
+ }
+ });
+ },
+ findEditor: function (id)
+ {
+ for (var i = 0; i < this.editorTabPanel.items.getCount(); i++) {
+ if (this.editorTabPanel.items.getAt(i).getRecordId() == id) {
+ return this.editorTabPanel.items.getAt(i);
+ }
+ }
+
+ return null;
+ },
+ createEditor: function (title)
+ {
+ var editor = Ext.create(this.editorClass, {
+ store: this.store,
+ title: title,
+ model: this.model,
+ closable: true,
+ titleProperty: this.titleProperty,
+ listeners: {
+ editorClose: Ext.bind(function (m)
+ {
+ this.editorTabPanel.remove(m);
+ }, this)
+ }
+ });
+
+ editor.on("itemSaved", this.onItemSaved, this);
+ return editor;
+ },
+ confirmDelete: function ()
+ {
+ var r = this.navigation.getSelectionModel().getLastSelected();
+ var recordName;
+
+ recordName = r.get(this.titleProperty);
+
+ Ext.Msg.confirm(
+ this.deleteTitle,
+ sprintf(this.deleteMessage, recordName),
+ function (but)
+ {
+ if (but == "yes") {
+ this.deleteRecord(r);
+ }
+ }, this);
+ },
+ deleteRecord: function (r)
+ {
+ var editor = this.findEditor(r.getId());
+
+ if (editor !== null) {
+ this.editorTabPanel.remove(editor);
+ }
+
+ r.erase();
+ this.store.load();
+ },
+ // Creates a store. To be called from child's initComponent
+ createStore: function (config)
+ {
+ Ext.applyIf(config, {
+ autoLoad: true,
+ model: this.model,
+ autoSync: false, // Do not change. If true, new (empty) records would be immediately committed to the database.
+ remoteFilter: true,
+ remoteSort: true,
+ pageSize: 15
+ });
+
+ this.store = Ext.create(this.storeType, config);
+
+ // Workaround for bug http://www.sencha.com/forum/showthread.php?133767-Store.sync()-does-not-update-dirty-flag&p=607093#post607093
+ this.store.on('write', function (store, operation)
+ {
+ var success = operation.wasSuccessful();
+ if (success) {
+ Ext.each(operation.records, function (record)
+ {
+ if (record.dirty) {
+ record.commit();
+ }
+ });
+ }
+ });
+ },
+ getStore: function ()
+ {
+ return this.store;
+ },
+ onItemSaved: function (record)
+ {
+ this.navigation.syncChanges(record);
+ }
+});
diff --git a/src/PartKeepr/FrontendBundle/Resources/public/js/Components/Editor/EditorGrid.js b/src/PartKeepr/FrontendBundle/Resources/public/js/Components/Editor/EditorGrid.js
@@ -210,7 +210,8 @@ Ext.define('PartKeepr.EditorGrid', {
this.store.loadPage(newStartPage);
},
- onReconfigure: function (me, store) {
+ onReconfigure: function (me, store)
+ {
this.searchField.setStore(store);
this.bottomToolbar.setStore(store);