We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
    • 24067
    • 16 Posts
    After following the tutorial for a custom CMP (Custom Manager Page) to manage projects I have come to the end of documentation I could find. The challenges are following:

    Background:
    The goal is to edit projects.

    Projects have following relationships:
    One project can have one region, one contractor and one fabricator.
    One project can have multiple industries.
    Industries can have a parent industry.
    One project can have multiple images and thumbnails.

    And following properties:
    Name, Summary, Description, Tonnage

    Approach:
    I am trying to build a custom CMP to manage this data. I have created a tabbed manager page with a tab for projects, industries, regions, constructors and fabricators. The project itself has combo boxes to tie in the one to one relationships. This works great.

    Problems:
    - How do you present the combo box in the grid overview?
    - When selecting the grid field where the combo box should be it is editable but blank when done.
    - How do you create a parent child relationship editor that prevents recursive assignment?
    - How do you add support for multiple table data (project, project_industry, industry) to be edited with dynamic number of records (for industries and images, thumbnails)?
    - How do you debug when nothing happens, say the records are not added to the database but the grid editor and logs show no error?

    I attached the schema, projects and industry grid js files.
      • 24067
      • 16 Posts
      Attaching the whole add-on development folder just in case it might help someone else.

      http://www.purefield.com/modx-projects-add-on.tgz [ed. note: purefield last edited this post 14 years, 9 months ago.]
        • 38071
        • 5 Posts
        Hi, i'm just registered in the forum to post for the same problem smiley
        So, this link should help us I think so. I'm actually trying.
        http://appointsolutions.com/2011/05/combobox-editor-remote-and-renderer-for-extjs-editorgridpanel/

        Maybe see you soon here.

        EDIT : the xtype: 'combocolumn' provided by this developper works great with remote stores (don't forget the autoload: true) [ed. note: mageistral last edited this post 14 years, 9 months ago.]
          • 24067
          • 16 Posts
          Have been looking all over and at various 'solutions' but nothing helped me to 'get it'. So far I have been debugging one set of issues that is related to not displaying data inserted in the database.

          For instance when I insert the parent industry id into the parent field and the same happens with the image value, it will not be shown when I reload the records.

          Sequence:
          User creates a new industry record. Selects the parent from the combo box and the image using the modx-combo-browser.
          The data is stored in the record on the database.
          When opening the record for update the data is returned from the processor via the connector as json object correctly.
          PROBLEM is that the fields do not any values in the editor.

          Here the relevant parts:
          Database table
          mysql> desc projects_industry;
          +-------------+------------------+------+-----+---------+----------------+
          | Field       | Type             | Null | Key | Default | Extra          |
          +-------------+------------------+------+-----+---------+----------------+
          | id          | int(10) unsigned | NO   | PRI | NULL    | auto_increment |
          | name        | varchar(255)     | NO   |     |         |                |
          | description | text             | NO   |     | NULL    |                |
          | image       | text             | NO   |     | NULL    |                |
          | parent      | int(11)          | NO   |     | 0       |                |
          | createdon   | datetime         | YES  |     | NULL    |                |
          | createdby   | int(10) unsigned | NO   |     | 0       |                |
          | editedon    | datetime         | YES  |     | NULL    |                |
          | editedby    | int(10) unsigned | NO   |     | 0       |                |
          +-------------+------------------+------+-----+---------+----------------+
          9 rows in set (0.00 sec)


          industries.grid.js
          Projects.window.UpdateIndustry = function(config) {
              config = config || {};
              Ext.applyIf(config,{
                  title: _('industries.project_update')
                  ,url: Projects.config.connectorUrl
                  ,baseParams: {
                      action: 'mgr/industry/update'
                  }
                  ,fields: [{
                      xtype: 'hidden'
                      ,name: 'id'
                  },{
                      xtype: 'Industries-combo'
                      ,fieldLabel: _('industries.parent')
                      ,name: 'parent'
                      ,width: 200
                  },{
                      xtype: 'textfield'
                      ,fieldLabel: _('industries.name')
                      ,name: 'name'
                      ,width: 300
                  },{
                      xtype: 'modx-combo-browser'
                      ,fieldLabel: _('industries.image')
                      ,name: 'image'
                      ,width: 300
                      ,hideFiles: true
                  },{
                      xtype: 'htmleditor'
                      ,fieldLabel: _('industries.description')
                      ,name: 'description'
                      ,width: 300
                  }]
              });
              Projects.window.UpdateIndustry.superclass.constructor.call(this,config);
          };
          Ext.extend(Projects.window.UpdateIndustry,MODx.Window);
          Ext.reg('projects-window-industry-update',Projects.window.UpdateIndustry);
          


          industries.grid.js
          Projects.combo.Industries = function(config) {
              config = config || {};
              Ext.applyIf(config,{
                   displayField: 'name'
                  ,mode: 'remote'
                  ,hiddenName: 'parent'
                  ,valueField: 'id'
                  ,fields: ['id', 'name']
                  ,url: Projects.config.connectorUrl
                  ,baseParams: { action: 'mgr/industry/getlist', combo: true }
                  ,editable: false
                  ,emptyText: 'Select industry...'
              });
              Projects.combo.Industries.superclass.constructor.call(this,config);
              console.log(this);
          };
          Ext.extend(Projects.combo.Industries, MODx.combo.ComboBox);
          Ext.reg('Industries-combo', Projects.combo.Industries);
          


          json: mgr/industry/getlist
          {"total":"4","results":[{"id":1,"name":"Industry 1","description":"","image":"","parent":"1","createdon":null,"createdby":0,"editedon":null,"editedby":0},{"id":2,"name":"Industry 2","description":"","image":"","parent":"1","createdon":null,"createdby":0,"editedon":null,"editedby":0},{"id":3,"name":"Industry 3","description":"","image":"","parent":"2","createdon":null,"createdby":0,"editedon":null,"editedby":0},{"id":4,"name":"Industry 4","description":"Industry 4\u200b","image":"assets\/images\/flags.jpg","parent":"3","createdon":null,"createdby":0,"editedon":null,"editedby":0}]}
            • 4172
            • 5,888 Posts
            For this kind of stuff I use xdbedit (its on github).
            To add different fields you need just create a TV with correct input-options, for example with @EVAL - binding and use it as inputTV for that field in your config-file.
            To add a combobrowser create a image-TV and use that as input-TV.
            If you want to add multiple images you can use a MIGX-TV as input-TV...........


            See this example:
            https://github.com/Bruno17/xdbedit/blob/master/core/components/xdbedit/configs/example.config.inc.php
              -------------------------------

              you can buy me a beer, if you like MIGX

              http://webcmsolutions.de/migx.html

              Thanks!
              • 38071
              • 5 Posts
              Hi,
              I don't get if all the fields are not displayed or only the combos fields. If that's all, the problem is somewhere in the general logic of getting information.

              If it's only in Combo, I'll share some things I've understood about Combos
              - remotes combo/stores can't be auto-loaded
              => that's why you have to set the Store for the ComboBox as 'local', to be able to pre-load data. In remote ComboBox/Stores, only the click will load the Store, nothing else.
              I'll continue with the link I've posted on my previous post. The Custom column provided by this developer does all the stuff correctly, you just have to follow the explanations, set correctly your local store and then, the good value, corresponding to the value in the foreign key is displayed.

              Here is an example of the ComboBoxes I use
              /** ComboBox template for in-line editing */
              Herbier.combo.Vegetal = function(config) {
                  config = config || {};
                  Ext.applyIf(config,{
                      displayField: 'nom_commun'
                      ,valueField: 'id'
              		,mode: 'local'
              		,store: new Ext.data.JsonStore({
              			url: Herbier.config.connectorUrl,
              			// store configs
              			autoDestroy: false,
              			baseParams: {
              				action: 'mgr/vegetal/getList',
              				combo: true
              			},
              			storeId: 'vegetalStore',
              			// reader config
              			root: 'results',
              			idProperty: 'id',
              			autoLoad: true,
              			fields: ['id', 'nom_commun']
              		})
                      ,editable: false
                  });
                  Herbier.combo.Vegetal.superclass.constructor.call(this, config);
              };
              Ext.extend(Herbier.combo.Vegetal, MODx.combo.ComboBox);
              Ext.reg('herbier-combo-vegetal', Herbier.combo.Vegetal);
              
                • 33976 ☆ A M B ☆
                • 571 Posts
                For info, a recent commit to the MODX Github repo might solve your issue
                  • 24067
                  • 16 Posts
                  @mageistral

                  Thanks for the feedback. Tried suggested changes without success. The combobox in the grid still does not show the values.

                  Here is what I got for that.
                  Projects.combo.Industries = function(config) {
                      config = config || {};
                      Ext.applyIf(config,{
                           displayField: 'name'
                          ,valueField: 'id'
                          ,mode: 'local'
                          ,store: new Ext.data.JsonStore({
                              url: Projects.config.connectorUrl,
                              // store configs
                              autoDestroy: false,
                              baseParams: {
                                  action: 'mgr/industry/getlist',
                                  combo: true
                              },
                              storeId: 'industryStore',
                              // reader config
                              root: 'results',
                              idProperty: 'id',
                              autoLoad: true,
                              fields: ['id', 'name']
                          })
                          ,editable: false
                          ,emptyText: 'Select industry...'
                      });
                      Projects.combo.Industries.superclass.constructor.call(this,config);
                  };
                  Ext.extend(Projects.combo.Industries, MODx.combo.ComboBox);
                  Ext.reg('Industries-combo', Projects.combo.Industries);
                  


                  In regards to the other issues. I got also xtype: 'modx-combo-browser' for images that do not show the selected values for update.

                  Anybody interested in helping me resolve the remaining issues can be added as co author when I publish this modx package.

                  Here is list of outstanding issues:
                  Manger Page
                  industry
                      grid (ideally tree)
                         show parent in combobox
                      update
                         show parent in combobox
                         show thumbnail in input
                      prevent recursion
                  project
                      create/update
                          form is too long and needs to be two column wide
                      create
                         add multiple images with dynamically created thumbs
                         add multiple industries
                      update
                         multiple images with dynamically created thumbs
                         multiple industries
                         show fabricator

                    • 24067
                    • 16 Posts
                    Thanks to this post I found a way to debug one issue. I am able to see the entries in the grid for the industries now.

                    http://www.sencha.com/forum/showthread.php?3145-ComboBox-on-an-editable-grid

                    the missing element was to select the foreign key in the fields for the grid.

                    Added following (commented) code instead of the renderer: true to get some useful debugging output.
                                ,editor: { xtype: 'Industries-combo', renderer: true }
                    //            ,renderer: function (value, p, record){ console.log(record.data['parent']);  record.store.data.map[record.id].data.name }
                    
                      • 24067
                      • 16 Posts
                      Found the answer to the conbobox issue inside the industry update dialog at this post.
                      http://stackoverflow.com/questions/8838295/extjs-combo-box-not-binding-to-array-store

                      Created a global var to hold the industry store used for the combobox and added the store attribute to the field in the update window config.