We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
    • 2611
    • 394 Posts
    Hi there,

    I’ve recently begun discovering the possibilities of ModX Revolution. So far everything seems great! I’ve scripted a framework/cms myself for the past 2 years for a company i worked for so i know what i’m talking about! smiley

    I love the DataGrid integration in the manager interface and i’m wondering how to create something like this myself. It takes a whole getting used to since for me, everything is new (i was so used to program in "my own" framework).

    I’ve googled tons of stuff but i just can’t seem to find a simple example on how to get a DataGrid filled with for example the `modx_users` table (just for test purposes).

    If anybody can guide me in some direction whatsoever your help is greatly appreciated.

    Thanks in advance,
    b03tz.
      Follow me on twitter: @b03tz
      Follow SCHERP Ontwikkeling on twitter: @scherpontwikkel
      CodeMaster
      • 17499 ☆ A M B ☆
      • 872 Posts
      Take a look at ExtJS

      It’s the javascript framework used to build the manager.
      You can also use it fro Front end work.
        • 7455
        • 2,204 Posts
        the ExtJS site is nice but an real modx example would be great.

        I love to see a tutorial on that because its a vital part when creating core extensions.
          follow me on twitter: @dimmy01
          • 5340
          • 1,624 Posts
          I think I’m looking for something similar. If not ignore me smiley

          What I want is simple way to connect to custom table and add/edit/remove values? Something similar to dbEdit for Evo but using http://www.extjs.com/deploy/dev/examples/grid/edit-grid.html

          At this point I don’t have time to look into it but I’d love to understand the basic on how to do it in Revo
            • 22295
            • 153 Posts
            You’re looking for processors - http://svn.modxcms.com/docs/display/revolution/PHP+Coding+in+MODx+Revolution,+Pt.+III

            In general, you’ll have one single connector which you’ll call from your js, with different actions (like: getdata, edit, delete, etc.. for example: action: ’web/myCustomModel/edit’) - these actions are handled by the processors (for example: edit.php)
            Ofcourse, you could also reuse the same processors via your backend snippets.

            I suggest you to look at an existing code that uses this (like quip, modx manager, etc...). once you get the idea - it’s quite simple to use and great for ajax’ed applications. I guaranty you’ll use it a lot wink


              • 20413
              • 2,877 Posts
              For -EVO- I used this: http://tablesorter.com/docs/
              together with this this: http://modxcms.com/forums/index.php/topic,43909.msg267042.html#msg267042
              then I called jQuery, CSS etc from header.inc.php

              I had problems with pagination in WebKit browsers (Safari and Chrome). But in IE and Firefox
              it worked really nice.
                @hawproductions | http://mrhaw.com/

                Infograph: MODX Advanced Install in 7 steps:
                http://forums.modx.com/thread/96954/infograph-modx-advanced-install-in-7-steps

                Recap: Portland, OR (PDX) MODX CMS Meetup, Oct 6, 2015. US Bancorp Tower
                http://mrhaw.com/modx_portland_oregon_pdx_modx_cms_meetup_oct_2015_us_bancorp_tower
                • 2611
                • 394 Posts
                First of all, thanks for the answers everyone!

                @cipa: That’s exactly what i’m trying to do...like in the System / settings view in the manager.

                From what i’ve read in the docs the Grid is there to use right? Not just for the core ModX API. I’m probably just missing some simple link between input and output but i just can’t figure it out by the scarse information available for the grid.

                Everything else works great though and the docs are heading the right way smiley
                  Follow me on twitter: @b03tz
                  Follow SCHERP Ontwikkeling on twitter: @scherpontwikkel
                  CodeMaster
                  • 2611
                  • 394 Posts
                  Quote from: oori at Apr 10, 2010, 07:22 AM

                  You’re looking for processors

                  I already have a full connector -> processor set up in my "test component" that i’ve created in the manager.
                  I was even able to show a grid like so: http://svn.modxcms.com/docs/pages/viewrecentblogposts.action?key=~splittingred

                  But i cannot link any input to it plus the code seems so humangus (large) for something so simple so i don’t think that’s the right way to go. I think the URL above has too much customisation that i don’t need, plus i cannot link the input to my processor.

                  Quote from: mrhaw at Apr 10, 2010, 07:22 AM

                  For -EVO- I used this:

                  Thanks for that, looks really promising but still...i would love to use the features that ModX Revolution already has to offer without integrating a custom list. If i do that i might as well integrate my own list feature that i’ve already build for my framework but that’s not really the way i would like to get to learn ModX’s powerfull features.
                    Follow me on twitter: @b03tz
                    Follow SCHERP Ontwikkeling on twitter: @scherpontwikkel
                    CodeMaster
                    • 22295
                    • 153 Posts
                    look at: \core\model\modx\processors\security\user\
                    specifically: getlist.php and updatefromgrid.php

                      • 2611
                      • 394 Posts
                      Hi guys,

                      Thanks all for your help...i found a really nice example. Check this out:

                      Create a div like so:
                      <div id="mygrid" style="height: 300px; overflow: hidden;">


                      And then attach a JS file to your document containing the following:
                      Ext.onReady(function(){
                      
                          Ext.QuickTips.init();
                          
                          var xg = Ext.grid;
                      
                          // shared reader
                          var reader = new Ext.data.ArrayReader({}, [
                             {name: 'company'},
                             {name: 'price', type: 'float'},
                             {name: 'change', type: 'float'},
                             {name: 'pctChange', type: 'float'},
                             {name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'},
                             {name: 'industry'},
                             {name: 'desc'}
                          ]);
                      
                          ////////////////////////////////////////////////////////////////////////////////////////
                          // Grid 1
                          ////////////////////////////////////////////////////////////////////////////////////////
                          // row expander
                          var expander = new xg.RowExpander({
                              tpl : new Ext.Template(
                                  '<p><b>Company:</b> {company}</p><br>',
                                  '<p><b>Summary:</b> {desc}</p>'
                              )
                          });
                      
                          var grid1 = new xg.GridPanel({
                              store: new Ext.data.Store({
                                  reader: reader,
                                  data: xg.dummyData
                              }),
                              cm: new xg.ColumnModel([
                                  expander,
                                  {id:'company',header: "Company", width: 40, sortable: true, dataIndex: 'company'},
                                  {header: "Price", width: 20, sortable: true, renderer: Ext.util.Format.usMoney, dataIndex: 'price'},
                                  {header: "Change", width: 20, sortable: true, dataIndex: 'change'},
                                  {header: "% Change", width: 20, sortable: true, dataIndex: 'pctChange'},
                                  {header: "Last Updated", width: 20, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
                              ]),
                              viewConfig: {
                                  forceFit:true
                              },
                              width: 600,
                              height: 300,
                              plugins: expander,
                              collapsible: true,
                              animCollapse: false,
                              title: 'Expander Rows, Collapse and Force Fit',
                              iconCls: 'icon-grid',
                              renderTo: 'mygrid'
                          });
                      });
                      
                      
                      
                      // Array data for the grids
                      Ext.grid.dummyData = [
                          ['3m Co',71.72,0.02,0.03,'9/1 12:00am', 'Manufacturing'],
                          ['Alcoa Inc',29.01,0.42,1.47,'9/1 12:00am', 'Manufacturing'],
                          ['Altria Group Inc',83.81,0.28,0.34,'9/1 12:00am', 'Manufacturing'],
                          ['American Express Company',52.55,0.01,0.02,'9/1 12:00am', 'Finance'],
                          ['American International Group, Inc.',64.13,0.31,0.49,'9/1 12:00am', 'Services'],
                          ['AT&T Inc.',31.61,-0.48,-1.54,'9/1 12:00am', 'Services'],
                          ['Boeing Co.',75.43,0.53,0.71,'9/1 12:00am', 'Manufacturing'],
                          ['Caterpillar Inc.',67.27,0.92,1.39,'9/1 12:00am', 'Services'],
                          ['Citigroup, Inc.',49.37,0.02,0.04,'9/1 12:00am', 'Finance'],
                          ['E.I. du Pont de Nemours and Company',40.48,0.51,1.28,'9/1 12:00am', 'Manufacturing'],
                          ['Exxon Mobil Corp',68.1,-0.43,-0.64,'9/1 12:00am', 'Manufacturing'],
                          ['General Electric Company',34.14,-0.08,-0.23,'9/1 12:00am', 'Manufacturing'],
                          ['General Motors Corporation',30.27,1.09,3.74,'9/1 12:00am', 'Automotive'],
                          ['Hewlett-Packard Co.',36.53,-0.03,-0.08,'9/1 12:00am', 'Computer'],
                          ['Honeywell Intl Inc',38.77,0.05,0.13,'9/1 12:00am', 'Manufacturing'],
                          ['Intel Corporation',19.88,0.31,1.58,'9/1 12:00am', 'Computer'],
                          ['International Business Machines',81.41,0.44,0.54,'9/1 12:00am', 'Computer'],
                          ['Johnson & Johnson',64.72,0.06,0.09,'9/1 12:00am', 'Medical'],
                          ['JP Morgan & Chase & Co',45.73,0.07,0.15,'9/1 12:00am', 'Finance'],
                          ['McDonald\'s Corporation',36.76,0.86,2.40,'9/1 12:00am', 'Food'],
                          ['Merck & Co., Inc.',40.96,0.41,1.01,'9/1 12:00am', 'Medical'],
                          ['Microsoft Corporation',25.84,0.14,0.54,'9/1 12:00am', 'Computer'],
                          ['Pfizer Inc',27.96,0.4,1.45,'9/1 12:00am', 'Services', 'Medical'],
                          ['The Coca-Cola Company',45.07,0.26,0.58,'9/1 12:00am', 'Food'],
                          ['The Home Depot, Inc.',34.64,0.35,1.02,'9/1 12:00am', 'Retail'],
                          ['The Procter & Gamble Company',61.91,0.01,0.02,'9/1 12:00am', 'Manufacturing'],
                          ['United Technologies Corporation',63.26,0.55,0.88,'9/1 12:00am', 'Computer'],
                          ['Verizon Communications',35.57,0.39,1.11,'9/1 12:00am', 'Services'],
                          ['Wal-Mart Stores, Inc.',45.45,0.73,1.63,'9/1 12:00am', 'Retail'],
                          ['Walt Disney Company (The) (Holding Company)',29.89,0.24,0.81,'9/1 12:00am', 'Services']
                      ];
                      
                      // add in some dummy descriptions
                      for(var i = 0; i < Ext.grid.dummyData.length; i++){
                          Ext.grid.dummyData[i].push('Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed metus nibh, sodales a, porta at, vulputate eget, dui. Pellentesque ut nisl. Maecenas tortor turpis, interdum non, sodales non, iaculis ac, lacus. Vestibulum auctor, tortor quis iaculis malesuada, libero lectus bibendum purus, sit amet tincidunt quam turpis vel lacus. In pellentesque nisl non sem. Suspendisse nunc sem, pretium eget, cursus a, fringilla vel, urna.<br/><br/>Aliquam commodo ullamcorper erat. Nullam vel justo in neque porttitor laoreet. Aenean lacus dui, consequat eu, adipiscing eget, nonummy non, nisi. Morbi nunc est, dignissim non, ornare sed, luctus eu, massa. Vivamus eget quam. Vivamus tincidunt diam nec urna. Curabitur velit.');
                      }


                      From here out i can figure out the rest smiley hope i’ve helped somebody setting up a basic grid tongue
                      This looks very promising and much easier then alot of tutorials i’ve seen smiley

                      Thanks again,
                      b03tz.
                        Follow me on twitter: @b03tz
                        Follow SCHERP Ontwikkeling on twitter: @scherpontwikkel
                        CodeMaster