resources/Editors/Editor.Roo.LayoutDialog.bjs
[app.Builder.js] / resources / Editors / Editor.Roo.LayoutDialog.bjs
index 644bb59..e3998b2 100644 (file)
@@ -2,27 +2,30 @@
  "name" : "Editor.Roo.LayoutDialog",
  "parent" : "",
  "title" : "",
- "path" : "/home/alan/gitlive/app.Builder.js/resources/Editors/Editor.Roo.LayoutDialog.bjs",
+ "path" : "/home/edward/gitlive/app.Builder.js/resources/Editors/Editor.Roo.LayoutDialog.bjs",
  "permname" : "",
  "modOrder" : "001",
  "strings" : {
   "b021df6aac4654c454f46c77646e745f" : "Label",
+  "793548e77e782c209a78ed67f255b5e2" : "Display Field",
+  "040076bde7f6b3387448e32b66c2eee0" : "To BJS",
   "4ce58cbe362a5d7b156992a496d55bf3" : "Database Column",
+  "189efd19c4153526994a6d7ea5f6f068" : "Field Type",
   "2f616612593df62aeed112de4f03110e" : "Edit a Grid",
   "0ccc2bf3fb98387c23b6ca5500244d6e" : "Use ",
   "c671c787b49f50a3ace9fdc5bd597825" : "core_enum",
   "32954654ac8fe66a1d09be19001de2d4" : "Width",
   "a1fa27779242b4902f7ae3bdd5c6d508" : "Type",
   "6e7376dca68a2386a8737944196ab491" : "Create / Edit Grid",
-  "7fc56270e7a70fa81a5935b72eacbe29" : "A"
+  "f541774a08fc687f6e2016c77a6ebca5" : "Load Data"
  },
  "items" : [
   {
    "listeners" : {
     "|activate" : "function() {\n    _this.panel = this;\n    if (_this.grid) {\n        _this.grid.footer.onClick('first');\n    }\n}"
    },
-   "| function loadData" : "function(data) { \n\n     alert(\"IPC:TEST:\" + JSON.stringify(data,null,4));\n    var ar = [];\n    for (var k in data) { \n        var r = data[k];\n        var has_s = typeof(r.relates_to_schema) != 'undefined'\n        ar.push([ !has_s , r.Field, r.Type,  r.Field, 100] );\n        if (!has_s) {\n            continue;\n        }\n        for (var kk in r.relates_to_schema) {         \n            var rr = r.relates_to_schema[kk];\n            if (rr.Field == r.relates_to_col) {\n                continue;\n            }\n            ar.push([ false, r.Field + '_'+ rr.Field, rr.Type,  rr.Field, 100] );\n        }\n    }\n    \n    alert(\"IPC:TEST:\" + JSON.stringify(ar));\n    this.grid.dataSource.loadData(ar);\n}",
-   "| function toBJS" : "function() { \n\n// convert the selected cells into a BJS data ready to send back to the UI..\n   \n    this.table = \"XXX\";\n    this.firstTxtCol = \"XXX\";\n   \n    \n    var jreader = {};\n    var     colmodel = [];\n    this.grid.dataSource.each(function(rec) {\n        if (!rec.data.active) {\n            return;\n        }\n        \n        \n        \n        colmodel.push({\n            \"xtype\": \"ColumnModel\",\n            \"header\": rec.data.title,\n            \"width\":  rec.data.width * 1,\n            \"dataIndex\": rec.data.dataIndex,\n            \"|renderer\": !rec.data.type.match(/date/i) ? \n                    \"function(v) { return String.format('{0}', v); }\" :\n                    \"function(v) { return String.format('{0}', v ? v.format('d/M/Y') : ''); }\" , // special for date\n            \"|xns\": \"Roo.grid\",\n            \"*prop\": \"cm[]\"\n        });\n    });\n    \n    \n    \n\n    alert(\"IPC:OUT:\" + JSON.stringify({\n        '|xns' : 'Roo',\n        xtype : \"GridPanel\",\n        \"title\": this.table,\n        \"fitToframe\": true,\n        \"fitContainer\": true,\n        \"tableName\": this.table,\n        \"background\": true,\n        \"region\" : 'center',\n        \"listeners\": {\n            \"|activate\": \"function() {\\n    _this.panel = this;\\n    if (_this.grid) {\\n        _this.grid.footer.onClick('first');\\n    }\\n}\"\n        },\n        \"items\": [\n            {\n                \"*prop\": \"grid\",\n                \"xtype\": \"Grid\",\n                \"autoExpandColumn\": this.firstTxtCol,\n                \"loadMask\": true,\n                \"listeners\": {\n                    \"|render\": \"function() \\n\" +\n                        \"{\\n\" +\n                        \"    _this.grid = this; \\n\" +\n                        \"    //_this.dialog = Pman.Dialog.FILL_IN\\n\" +\n                        \"    if (_this.panel.active) {\\n\" +\n                        \"       this.footer.onClick('first');\\n\" +\n                        \"    }\\n\" +\n                        \"}\",\n                    \"|rowdblclick\": \"function (_self, rowIndex, e)\\n\" + \n                        \"{\\n\" + \n                        \"    if (!_this.dialog) return;\\n\" + \n                        \"    _this.dialog.show( this.getDataSource().getAt(rowIndex).data, function() {\\n\" + \n                        \"        _this.grid.footer.onClick('first');\\n\" + \n                        \"    }); \\n\" + \n                        \"}\\n\"\n                },\n                \"|xns\": \"Roo.grid\",\n\n                \"items\": [\n                    {\n                        \"*prop\": \"dataSource\",\n                        \"xtype\": \"Store\",\n                         remoteSort : true,\n                        '|sortInfo' : \"{ field : '\" + this.firstTxtCol  +  \"', direction: 'ASC' }\", \n                        \"|xns\": \"Roo.data\",\n                        \"items\": [\n                            \n                            {\n                                \"*prop\": \"proxy\",\n                                \"xtype\": \"HttpProxy\",\n                                \"method\": \"GET\",\n                                \"|url\": \"baseURL + '/Roo/\" + this.table + \".php'\",\n                                \"|xns\": \"Roo.data\"\n                            },\n                            {\n                                '*prop' : 'reader',\n                                'xtype' : 'JsonReader',\n                                '|xns' : 'Roo.data',\n                                'id' : 'id',\n                                'root' : 'data',\n                                'totalProperty' : 'total'\n                            }\n                        ]\n                    },\n                    {\n                        \"*prop\": \"footer\",\n                        \"xtype\": \"PagingToolbar\",\n                        \"pageSize\": 25,\n                        \"displayInfo\": true,\n                        \"displayMsg\": \"Displaying \" + this.table + \"{0} - {1} of {2}\",\n                        \"emptyMsg\": \"No \" + this.table + \" found\",\n                        \"|xns\": \"Roo\"\n                    },\n                    {\n                        \"*prop\": \"toolbar\",\n                        \"xtype\": \"Toolbar\",\n                        \"|xns\": \"Roo\",\n                        \"items\": [\n                            {\n                                \"text\": \"Add\",\n                                \"xtype\": \"Button\",\n                                \"cls\": \"x-btn-text-icon\",\n                                \"|icon\": \"Roo.rootURL + 'images/default/dd/drop-add.gif'\",\n                                \"listeners\": {\n                                    \"|click\": \"function()\\n\"+\n                                        \"{\\n\"+\n                                        \"    if (!_this.dialog) return;\\n\" +\n                                        \"    _this.dialog.show( { id : 0 } , function() {\\n\"+\n                                        \"        _this.grid.footer.onClick('first');\\n\"+\n                                        \"   }); \\n\"+\n                                        \"}\\n\"\n                                },\n                                \"|xns\": \"Roo.Toolbar\"\n                            },\n                             // fill ????\n                            {\n                                \"text\": \"Delete\",\n                                \"cls\": \"x-btn-text-icon\",\n                                \"|icon\": \"rootURL + '/Pman/templates/images/trash.gif'\",\n                                \"xtype\": \"Button\",\n                                \"listeners\": {\n                                    \"|click\": \"function()\\n\"+\n                                        \"{\\n\"+\n                                        \"     Pman.genericDelete(_this, '\" + this.table + \"'); \\n\"+\n                                        \"}\\n\"+\n                                        \"        \"\n                                },\n                                \"|xns\": \"Roo.Toolbar\"\n                            }\n                        ]\n                    }, // end toolbar\n                ].concat( colmodel)\n            }\n        ]\n        \n        \n    }, null, 4));\n\n}",
+   "| function loadData" : "function(data) { \n\n    //alert(\"IPC:TEST:\" + JSON.stringify(data,null,4));\n\n    var fields = _this.grid.dataSource.reader.recordType.prototype.fields;\n    \n    \n    var d = [];\n\n    for (var k in data) { \n        var r = data[k];\n        var has_s = typeof(r.relates_to_schema) != 'undefined';\n        \n        var rt = '', rc = '', rs = [];\n        \n        if(has_s){\n            for (var kk in r.relates_to_schema) {         \n                var rr = r.relates_to_schema[kk];\n                \n                rt = r.relates_to_table;\n                rc = r.relates_to_col;\n                \n                rs.push([rr.Field]);\n                \n            }\n        }\n        \n        var o = {\n            active : !has_s,\n            dataIndex : r.Field,\n            type : r.Type,\n            title : r.Field,\n            width : 100,\n            ftype : 'TextField',\n            display_field : rc, //r.Field + '_display_name',\n            relates_to_table : rt,\n            relates_to_col : rc,\n            relates_to_schema : rs\n        };\n        \n        d.push(o);\n        \n        if (!has_s) {\n            continue;\n        }\n        \n        for (var kk in r.relates_to_schema) {         \n            var rr = r.relates_to_schema[kk];\n            if (rr.Field == r.relates_to_col) {\n                continue;\n            }\n            \n            var o = {\n                active : false,\n                dataIndex : r.Field + '_'+ rr.Field,\n                type : r.Type,\n                title : r.Field,\n                width : 100\n            };\n            \n            d.push(o);\n        }\n    }\n\n    var ar = [];\n    \n    Roo.each(d, function(dd){\n\n        var a = [];\n        \n        for(var j = 0; j < fields.length; j++){\n            var f = fields.items[j];\n            \n            if(dd.hasOwnProperty(f.name)){\n                a.push(dd[f.name]);\n            }\n        }\n        \n        ar.push(a);\n    });\n    \n    this.schema = data;\n    \n    //alert(\"IPC:TEST:\" + JSON.stringify(ar));\n    this.grid.dataSource.loadData(ar);\n}",
+   "| function toBJS" : "function() { \n\n// convert the selected cells into a BJS data ready to send back to the UI..\n\n    this.table = \"XXX\";\n    this.firstTxtCol = \"XXX\";\n   \n    var formHeight = 50;\n    \n    var jreader = {};\n    var  formElements = [];\n    this.grid.dataSource.each(function(rec) {\n        if (!rec.data.active) {\n            return;\n        }\n        \n        var el = {\n            fieldLabel : rec.data.title,\n            name : rec.data.dataIndex,\n            width : rec.data.width,\n            '|xns' : 'Roo.form',\n            'xtype' : rec.data.ftype\n        }\n         if (xtype == 'DateField') {\n            el.format = 'Y-m-d';\n            el.useIso = true;\n            el.width = 100;\n        }\n        \n        if (xtype == 'TextArea') {\n            el.height = 100;\n        }\n        \n        if (xtype == 'Hidden') {\n            delete el.fieldLabel;\n            delete el.width;\n        }\n        if (xtype == 'Combobox') {\n        \n\n            el.queryParam  = 'query[' + rec.data.display_field + ']';// SET WHEN USED\n            \n            el.hiddenName = rec.data.dataIndex // SET WHEN USED eg. project_id\n            el.name  = rec.data.dataIndex + '_' + rec.data.display_field; // SET WHEN USED eg. project_id_name\n            \n            el.displayField = rec.data.display_field // SET WHEN USED eg. project_id\n            el.valueField = rec.data.relates_to_col \n            \n            el.tpl = '<div class=\"x-grid-cell-text x-btn button\"><b>{' + rec.data.display_field +'}</b> </div>'; // SET WHEN USED\n          \n        \n           el.items = [\n                {\n                        \n                    '*prop' : 'store',\n                    'xtype' : 'Store',\n                    '|xns' : 'Roo.data',\n                    'remoteSort' : true,\n                    '|sortInfo' : '{ direction : \\'ASC\\', field: \\'id\\' }',\n                    listeners : {\n                        '|beforeload' : 'function (_self, o)' +\n                        \"{\\n\" +\n                        \"    o.params = o.params || {};\\n\" +\n                        \"    // set more here\\n\" +\n                        \"}\\n\"\n                    },\n                    items : [\n                        {\n                            '*prop' : 'proxy',\n                            'xtype' : 'HttpProxy',\n                            'method' : 'GET',\n                            '|xns' : 'Roo.data',\n                            '|url' : \"baseURL + '/Roo/\" + rec.data.relates_to_table + \".php'\",\n                        },\n                        \n                        {\n                            '*prop' : 'reader',\n                            'xtype' : 'JsonReader',\n                            '|xns' : 'Roo.data',\n                            'id' : 'id',\n                            'root' : 'data',\n                            'totalProperty' : 'total'\n\n                            \n                        }\n                    ]\n                }\n            ];\n        \n        }\n        \n        if (xtype == 'HtmlEditor') {\n            el.height = 100,\n            el.resizable = 's',\n            el.toolbar = [\n                {\n                    '|xns' : 'Roo.form.HtmlEditor',\n                    'xtype' : 'ToolbarContext'\n                },\n                {\n                    '|xns' : 'Roo.form.HtmlEditor',\n                    'xtype' : 'ToolbarStandard'\n\n               }\n            ]\n        }\n        \n        formElements.push(el);\n        \n        formHeight += rec.data.ftype == 'TextArea' ? 100 : 30;\n        \n        \n    });\n    \n    \n    \n    \n    \n    \n     var frmCfg = \n    {\n        '|xns' : 'Roo.form',\n        xtype : \"Form\",\n        listeners : {\n            \"|actioncomplete\" : \"function(_self,action)\\n\"+\n                \"{\\n\"+\n                \"    if (action.type == 'setdata') {\\n\"+\n                \"       //this.load({ method: 'GET', params: { '_id' : _this.data.id }});\\n\"+\n                \"       return;\\n\"+\n                \"    }\\n\"+\n                \"    if (action.type == 'load') {\\n\"+\n                \"        return;\\n\"+\n                \"    }\\n\"+\n                \"    if (action.type =='submit') {\\n\"+\n                \"    \\n\"+\n                \"        _this.dialog.hide();\\n\"+\n                \"    \\n\"+\n                \"         if (_this.callback) {\\n\"+\n                \"            _this.callback.call(_this, action.result.data);\\n\"+\n                \"         }\\n\"+\n                \"         _this.form.reset();\\n\"+\n                \"         return;\\n\"+\n                \"    }\\n\"+\n                \"}\\n\",\n            \n            \"|rendered\" : \"function (form)\\n\"+\n                \"{\\n\"+\n                \"    _this.form= form;\\n\"+\n                \"}\\n\"\n        },\n        method : \"POST\",\n        style : \"margin:10px;\",\n        \"|url\" : \"baseURL + '/Roo/\" + this.table + \"'\",\n        items : formElements\n    };\n    \n\n    alert(\"IPC:OUT:\" + JSON.stringify({\n            \"closable\": false,\n            \"collapsible\": false,\n            \"height\": formHeight,\n            \"resizable\": false,\n            \"title\": \"Edit / Create \" + this.table,\n            \"width\": 400,\n            \"modal\" : true,\n            \"xtype\": \"LayoutDialog\",\n            \"|xns\": \"Roo\",\n            \"items\": [\n                {\n                    \"|xns\": \"Roo\",\n                    \"xtype\": \"LayoutRegion\",\n                    \"*prop\": \"center\"\n                },\n                {\n                    \"region\": \"center\",\n                    \"xtype\": \"ContentPanel\",\n                    \"|xns\": \"Roo\",\n                    \"items\": [\n                        frmCfg\n                    ]\n                },\n                \n                {\n                    \"listeners\": {\n                        \"click\": \"function (_self, e)\\n{\\n    _this.dialog.hide();\\n}\"\n                    },\n                    \"*prop\": \"buttons[]\",\n                    \"text\": \"Cancel\",\n                    \"xtype\": \"Button\",\n                    \"|xns\": \"Roo\"\n                },\n                {\n                    \"listeners\": {\n                        \"click\": \"function (_self, e)\\n{\\n    // do some checks?\\n     \\n    \\n    _this.dialog.el.mask(\\\"Saving\\\");\\n    _this.form.doAction(\\\"submit\\\");\\n\\n}\"\n                    },\n                    \"*prop\": \"buttons[]\",\n                    \"text\": \"Save\",\n                    \"xtype\": \"Button\",\n                    \"|xns\": \"Roo\"\n                }\n            ]\n        \n        \n        \n    }, null, 4));\n\n}",
    "fitToframe" : true,
    "background" : false,
    "region" : "center",
@@ -36,8 +39,9 @@
     {
      "listeners" : {
       "|rowdblclick" : "function (_self, rowIndex, e)\n{\n    if (!_this.dialog) return;\n  \n}\n",
-      "|render" : "function() \n{\n    _this.grid = this; \n    //_this.dialog = Pman.Dialog.FILL_IN\n\n}",
-      "cellclick" : "function (_self, rowIndex, columnIndex, e)\n{\n\n        var di = this.colModel.getDataIndex(columnIndex);\n        if (di != 'active') {\n            return;\n        }\n         \n        var rec = _this.grid.ds.getAt(rowIndex);\n        \n        rec.set('active', rec.data.active * 1 ? 0 : 1);\n        rec.commit();\n         \n        \n}"
+      "beforeedit" : "function (e)\n{\n    Roo.log('before edit!!!');\n    Roo.log(e);\n    \n    if(e.field != 'display_field'){\n        return;\n    }\n    \n    _this.grid.colModel.getCellEditor(e.column, e.row).field.store.loadData(e.record.data.relates_to_schema);\n}",
+      "cellclick" : "function (_self, rowIndex, columnIndex, e)\n{\n\n        var di = this.colModel.getDataIndex(columnIndex);\n        if (di != 'active') {\n            return;\n        }\n         \n        var rec = _this.grid.ds.getAt(rowIndex);\n        \n        rec.set('active', rec.data.active * 1 ? 0 : 1);\n        rec.commit();\n         \n        \n}",
+      "|render" : "function() \n{\n    _this.grid = this; \n    //_this.dialog = Pman.Dialog.FILL_IN\n\n}"
      },
      "Number clicksToEdit" : 1,
      "autoExpandColumn" : "title",
@@ -47,7 +51,7 @@
      "* prop" : "grid",
      "items" : [
       {
-       "$ Array fields" : "[ 'active', 'dataIndex', 'type','title', 'width' ]",
+       "$ Array fields" : "[ \n    'active', \n    'dataIndex', \n    'type',\n    'title', \n    'width', \n    'ftype', \n    'display_field',\n    'relates_to_table',\n    'relates_to_col',\n    'relates_to_schema'\n]",
        "$ Array data" : "[\n  [ 1, 'test', 'test', 110 ]\n  \n\n]",
        "Number id" : "'dataIndex'",
        "xtype" : "SimpleStore",
          "string text" : "Edit a Grid",
          "xtype" : "TextItem",
          "$ xns" : "Roo.Toolbar"
+        },
+        {
+         "xtype" : "Fill",
+         "$ xns" : "Roo.Toolbar"
+        },
+        {
+         "listeners" : {
+          "click" : "function (_self, e)\n{\n    var data = {    \n        \"manage_scale_id\": {\n            \"Field\": \"manage_scale_id\",\n            \"Type\": \"int(11)\",\n            \"Null\": \"NO\",\n            \"Key\": null,\n            \"Default\": \"0\",\n            \"Extra\": null,\n            \"relates_to_table\": \"core_enum\",\n            \"relates_to_col\": \"id\",\n            \"relates_to_schema\": {\n                \"id\": {\n                    \"Field\": \"id\",\n                    \"Type\": \"int(11)\",\n                    \"Null\": \"NO\",\n                    \"Key\": \"PRI\",\n                    \"Default\": null,\n                    \"Extra\": \"auto_increment\"\n                },\n                \"etype\": {\n                    \"Field\": \"etype\",\n                    \"Type\": \"varchar(32)\",\n                    \"Null\": \"NO\",\n                    \"Key\": null,\n                    \"Default\": null,\n                    \"Extra\": null\n                },\n                \"name\": {\n                    \"Field\": \"name\",\n                    \"Type\": \"varchar(255)\",\n                    \"Null\": \"NO\",\n                    \"Key\": null,\n                    \"Default\": null,\n                    \"Extra\": null\n                },\n                \"active\": {\n                    \"Field\": \"active\",\n                    \"Type\": \"int(2)\",\n                    \"Null\": \"NO\",\n                    \"Key\": null,\n                    \"Default\": \"1\",\n                    \"Extra\": null\n                },\n                \"seqid\": {\n                    \"Field\": \"seqid\",\n                    \"Type\": \"int(11)\",\n                    \"Null\": \"NO\",\n                    \"Key\": \"MUL\",\n                    \"Default\": \"0\",\n                    \"Extra\": null\n                },\n                \"seqmax\": {\n                    \"Field\": \"seqmax\",\n                    \"Type\": \"int(11)\",\n                    \"Null\": \"NO\",\n                    \"Key\": null,\n                    \"Default\": \"0\",\n                    \"Extra\": null\n                },\n                \"display_name\": {\n                    \"Field\": \"display_name\",\n                    \"Type\": \"text\",\n                    \"Null\": \"NO\",\n                    \"Key\": null,\n                    \"Default\": null,\n                    \"Extra\": null\n                },\n                \"is_system_enum\": {\n                    \"Field\": \"is_system_enum\",\n                    \"Type\": \"int(2)\",\n                    \"Null\": \"NO\",\n                    \"Key\": null,\n                    \"Default\": \"0\",\n                    \"Extra\": null\n                }\n            }\n        },\n        \"person_type\": {\n            \"Field\": \"person_type\",\n            \"Type\": \"text\",\n            \"Null\": \"NO\",\n            \"Key\": null,\n            \"Default\": null,\n            \"Extra\": null\n        },\n        \"employer_name\": {\n            \"Field\": \"employer_name\",\n            \"Type\": \"text\",\n            \"Null\": \"NO\",\n            \"Key\": null,\n            \"Default\": null,\n            \"Extra\": null\n        },\n        \"birth_date\": {\n            \"Field\": \"birth_date\",\n            \"Type\": \"date\",\n            \"Null\": \"NO\",\n            \"Key\": null,\n            \"Default\": \"0000-00-00\",\n            \"Extra\": null\n        },\n        \"employ_start_date\": {\n            \"Field\": \"employ_start_date\",\n            \"Type\": \"date\",\n            \"Null\": \"NO\",\n            \"Key\": null,\n            \"Default\": \"0000-00-00\",\n            \"Extra\": null\n        },\n        \"employ_end_date\": {\n            \"Field\": \"employ_end_date\",\n            \"Type\": \"date\",\n            \"Null\": \"NO\",\n            \"Key\": null,\n            \"Default\": \"0000-00-00\",\n            \"Extra\": null\n        },\n        \"hide_same_employer\": {\n            \"Field\": \"hide_same_employer\",\n            \"Type\": \"int(4)\",\n            \"Null\": \"NO\",\n            \"Key\": null,\n            \"Default\": \"0\",\n            \"Extra\": null\n        },\n        \"salary_currency\": {\n            \"Field\": \"salary_currency\",\n            \"Type\": \"varchar(256)\",\n            \"Null\": \"NO\",\n            \"Key\": null,\n            \"Default\": null,\n            \"Extra\": null\n        },\n        \"quota_currency\": {\n            \"Field\": \"quota_currency\",\n            \"Type\": \"varchar(256)\",\n            \"Null\": \"NO\",\n            \"Key\": null,\n            \"Default\": null,\n            \"Extra\": null\n        },\n        \"created_dt\": {\n            \"Field\": \"created_dt\",\n            \"Type\": \"datetime\",\n            \"Null\": \"NO\",\n            \"Key\": null,\n            \"Default\": \"0000-00-00 00:00:00\",\n            \"Extra\": null\n        },\n        \"updated_dt\": {\n            \"Field\": \"updated_dt\",\n            \"Type\": \"datetime\",\n            \"Null\": \"NO\",\n            \"Key\": null,\n            \"Default\": \"0000-00-00 00:00:00\",\n            \"Extra\": null\n        }\n    };\n    \n    Roo.log('Loading Data...');\n    _this.panel.loadData(data);\n\n}"
+         },
+         "xtype" : "Button",
+         "String text" : "Load Data",
+         "$ xns" : "Roo.Toolbar"
+        },
+        {
+         "xtype" : "Separator",
+         "$ xns" : "Roo.Toolbar"
+        },
+        {
+         "listeners" : {
+          "click" : "function (_self, e)\n{\n    \n    Roo.log('Converting to BJS...');\n    _this.panel.toBJS();\n\n}"
+         },
+         "xtype" : "Button",
+         "String text" : "To BJS",
+         "$ xns" : "Roo.Toolbar"
         }
        ]
       },
       {
        "xtype" : "ColumnModel",
        "header" : "Label",
-       "width" : 75,
+       "width" : 120,
        "$ renderer" : "function(v) { return String.format('{0}', v); }",
        "$ xns" : "Roo.grid",
        "* prop" : "cm[]",
       },
       {
        "xtype" : "ColumnModel",
-       "width" : 75,
-       "header" : "Label",
+       "width" : 120,
+       "header" : "Field Type",
        "$ renderer" : "function(v) { return String.format('{0}', v); }",
        "$ xns" : "Roo.grid",
        "* prop" : "cm[]",
-       "dataIndex" : "title",
+       "dataIndex" : "ftype",
        "items" : [
         {
          "xtype" : "GridEditor",
            "triggerAction" : "all",
            "displayField" : "fname",
            "hiddenName" : "status",
-           "value" : "A",
            "valueField" : "ftype",
            "xtype" : "ComboBox",
            "allowBlank" : false,
            "width" : 150,
            "$ xns" : "Roo.form",
            "mode" : "local",
-           "name" : "status",
+           "name" : "ftype",
            "* prop" : "field",
            "items" : [
             {
              "xtype" : "SimpleStore",
-             "$ data" : "[ \n    [ 'ComboBox', \"ComboBox\"],\n    [ 'Text' , \"TextField\"],\n    [ 'Number', \"NumberField\"],\n    [ 'TextArea', \"TextArea\"],\n    [ 'Html', \"HtmlEntry\"]\n    \n]\n",
+             "$ data" : "[ \n    [ 'ComboBox', \"ComboBox\"],\n    [ 'TextField' , \"TextField\"],\n    [ 'NumberField', \"NumberField\"],\n    [ 'TextArea', \"TextArea\"],\n    [ 'HtmlEditor', \"HtmlEditor\"],\n    [ 'Hidden', \"Hidden\"],\n    [ 'DateField', \"DateField\"],\n    [ 'Checkbox', \"Checkbox\"]    \n    // checkbox?\n]\n",
              "$ fields" : "[  'ftype', 'fname']",
              "$ xns" : "Roo.data",
              "* prop" : "store"
         }
        ]
       },
+      {
+       "xtype" : "ColumnModel",
+       "header" : "Display Field",
+       "width" : 150,
+       "$ renderer" : "function(v) { return String.format('{0}', v); }",
+       "$ xns" : "Roo.grid",
+       "* prop" : "cm[]",
+       "dataIndex" : "display_field",
+       "items" : [
+        {
+         "xtype" : "GridEditor",
+         "$ xns" : "Roo.grid",
+         "* prop" : "editor",
+         "items" : [
+          {
+           "listWidth" : 200,
+           "triggerAction" : "all",
+           "displayField" : "dfield",
+           "hiddenName" : "status",
+           "valueField" : "dfield",
+           "xtype" : "ComboBox",
+           "allowBlank" : false,
+           "editable" : false,
+           "width" : 150,
+           "$ xns" : "Roo.form",
+           "mode" : "local",
+           "name" : "display_field",
+           "* prop" : "field",
+           "items" : [
+            {
+             "xtype" : "SimpleStore",
+             "$ data" : "[ \n    ['id']\n]\n",
+             "$ fields" : "[  'dfield']",
+             "$ xns" : "Roo.data",
+             "* prop" : "store"
+            }
+           ]
+          }
+         ]
+        }
+       ]
+      },
       {
        "xtype" : "ColumnModel",
        "width" : 75,