display "belongs to" association as a combo box

yehezkielbs · Dec 7, 2011 · c3e977b · c3e977b
1 parent 139cca3
commit c3e977b
Show file tree

Hide file tree

Showing 7 changed files with 63 additions and 40 deletions.
diff --git a/ExtClient/application.js b/ExtClient/application.js
@@ -29,6 +29,8 @@ Ext.onReady(function() {
             'Menu'
         ],
 
+        resourceStringsCollection: new Ext.util.MixedCollection(),
+
         getResourcesMetaUrl: function() {
             return(this.apiPrefix + '/_meta/resources.json');
         },

diff --git a/ExtClient/controller/Base.js b/ExtClient/controller/Base.js
@@ -52,10 +52,6 @@ Ext.define('ExtClient.controller.Base', {
                             this.grid.remove();
                         },
 
-                        save: function() {
-                            this.grid.save();
-                        },
-
                         constructor: function() {
                             var controls = {};
 
@@ -64,23 +60,12 @@ Ext.define('ExtClient.controller.Base', {
                             controls[resourceStrings.gridName + ' button[action=add]'] = {click: this.insert};
                             controls[resourceStrings.gridName + ' button[action=edit]'] = {click: this.edit};
                             controls[resourceStrings.gridName + ' button[action=delete]'] = {click: this.remove};
-                            controls[resourceStrings.gridName + ' button[action=save]'] = {click: this.save};
                             this.control(controls);
                         }
                     });
 
                     Ext.Array.each(reflection.belongs_to || [], function(belongsToItem) {
-                        var menu = ExtClientApp.getStore('Menu').getRootNode(),
-                            menuNode, reflectionResourceString;
-
-                        menu.eachChild(function(nodeItem) {
-                            if (belongsToItem.model === nodeItem.get('model')) {
-                                menuNode = nodeItem;
-                            }
-                        });
-
-                        reflectionResourceString = new ExtClient.util.ResourceStrings(menuNode.get('text'), menuNode.get('model'), menuNode.get('uri'));
-                        ExtClient.controller.Base.factory(reflectionResourceString);
+                        ExtClient.controller.Base.factory(ExtClientApp.resourceStringsCollection.get(belongsToItem.model));
                     });
 
                     if (callback) {

diff --git a/ExtClient/controller/Menu.js b/ExtClient/controller/Menu.js
@@ -1,4 +1,4 @@
-/*global Ext, ExtClient*/
+/*global Ext, ExtClient, ExtClientApp*/
 
 Ext.define('ExtClient.controller.Menu', {
     extend: 'Ext.app.Controller',
@@ -19,7 +19,7 @@ Ext.define('ExtClient.controller.Menu', {
         var resourceStrings;
 
         if (record.get('leaf')) {
-            resourceStrings = new ExtClient.util.ResourceStrings(record.get('text'), record.get('model'), record.get('uri'));
+            resourceStrings = ExtClientApp.resourceStringsCollection.get(record.get('model'))
             ExtClient.controller.Base.factory(resourceStrings, function(controller) {
                 controller.displayGrid();
             });

diff --git a/ExtClient/store/Base.js b/ExtClient/store/Base.js
@@ -11,7 +11,7 @@ Ext.define('ExtClient.store.Base', {
                 extend: 'Ext.data.Store',
 
                 autoLoad: false,
-                autoSync: false,
+                autoSync: true,
                 pageSize: 25,
 
                 proxy: {

diff --git a/ExtClient/store/Menu.js b/ExtClient/store/Menu.js
@@ -1,10 +1,18 @@
-/*global Ext, ExtClientApp*/
+/*global Ext, ExtClient, ExtClientApp*/
 
 Ext.define('ExtClient.store.Menu', {
     extend: 'Ext.data.TreeStore',
     model: 'ExtClient.model.Menu',
     proxy: {
         type: 'ajax',
         url: ExtClientApp.getResourcesMetaUrl()
+    },
+    listeners: {
+        load: function(thisStore, node, records, successful, eOpts) {
+            Ext.Array.each(records, function(record) {
+                var resourceStrings = new ExtClient.util.ResourceStrings(record.get('text'), record.get('model'), record.get('uri'));
+                ExtClientApp.resourceStringsCollection.add(record.get('model'), resourceStrings);
+            });
+        }
     }
 });
diff --git a/ExtClient/view/GridBase.js b/ExtClient/view/GridBase.js
@@ -1,4 +1,4 @@
-/*global Ext, ExtClient*/
+/*global Ext, ExtClient, ExtClientApp*/
 
 Ext.define('ExtClient.view.GridBase', {
     statics: {
@@ -25,14 +25,51 @@ Ext.define('ExtClient.view.GridBase', {
                 store: store,
 
                 columns: Ext.Array.map(fields, function(item) {
-                    return Ext.Object.merge(
-                        {
+                    var belongsToRefArray = Ext.Array.filter(reflection.belongs_to || [], function(belongsToItem) {
+                            return (belongsToItem.foreign_key === item.name);
+                        }),
+                        belongsToRef, belongsToResourceStrings;
+
+                    if (belongsToRefArray.length > 0) {
+                        belongsToRef = belongsToRefArray[0];
+                        belongsToResourceStrings = ExtClientApp.resourceStringsCollection.get(belongsToRef.model);
+
+                        rowEditor.addListener({
+                            beforeedit: function() {
+                                var comboBox = Ext.getCmp(belongsToResourceStrings.name + '-combobox-on-' + resourceStrings.gridId);
+
+                                if (comboBox.store.storeId === "ext-empty-store") {
+                                    comboBox.store = Ext.create(belongsToResourceStrings.storeClassName);
+                                }
+                            }
+                        });
+
+                        return {
                             text: item.text,
                             dataIndex: item.name,
-                            field: ExtClient.util.FieldTypeMap.getFormField(item)
-                        },
-                        ExtClient.util.FieldTypeMap.getGridColumn(item)
-                    );
+                            editor: {
+                                xtype: 'combobox',
+                                store: null,
+                                valueField: 'id',
+                                displayField: 'name',
+                                forceSelection: true,
+                                queryMode: 'remote',
+                                id: belongsToResourceStrings.name + '-combobox-on-' + resourceStrings.gridId
+                            },
+                            xtype: 'templatecolumn',
+                            tpl: '<tpl if="' + belongsToRef.name + '">{' + belongsToRef.name + '.name}</tpl>'
+                        };
+                    }
+                    else {
+                        return Ext.Object.merge(
+                            {
+                                text: item.text,
+                                dataIndex: item.name,
+                                editor: ExtClient.util.FieldTypeMap.getFormField(item)
+                            },
+                            ExtClient.util.FieldTypeMap.getGridColumn(item)
+                        );
+                    }
                 }),
 
                 dockedItems: [
@@ -51,11 +88,6 @@ Ext.define('ExtClient.view.GridBase', {
                             {
                                 text: 'Delete',
                                 action: 'delete'
-                            },
-                            '-',
-                            {
-                                text: 'Save',
-                                action: 'save'
                             }
                         ]
                     },
@@ -90,10 +122,6 @@ Ext.define('ExtClient.view.GridBase', {
                     if (selected) {
                         this.store.remove(selected);
                     }
-                },
-
-                save: function() {
-                    this.store.sync();
                 }
             });
         }

diff --git a/index.html b/index.html
@@ -1,10 +1,10 @@
 <!DOCTYPE html>
 <html>
 <head>
-  <link rel="stylesheet" href="http://cdn.sencha.io/ext-4.0.7-gpl/resources/css/ext-all.css">
-  <script src="http://cdn.sencha.io/ext-4.0.7-gpl/bootstrap.js"></script>
-  <script src="ExtClient/application.js"></script>
-  <title>Ext-Client Experiment</title>
+    <link rel="stylesheet" href="http://cdn.sencha.io/ext-4.0.7-gpl/resources/css/ext-all.css">
+    <script src="http://cdn.sencha.io/ext-4.0.7-gpl/bootstrap.js"></script>
+    <script src="ExtClient/application.js"></script>
+    <title>Ext-Client Experiment</title>
 </head>
 <body>
 </body>