On March 26, 2019 we launched new MODX Forums. Please join us at the new MODX Community Forums.
Subscribe: RSS
  • Since 097 will be using extjs, I figured I’d better start working with it and learning how to do it. So I reworked a simple database view on a per-user basis that I had working with ordinary php and page-refresh methods.

    It took me two days, not because it was so hard but because it took me two days to find the stray comma that was causing IE to totally fail to even load the grid.

    In my template, I made a <div id="topic-grid"></div> container (I based this on a demo on the extjs site).

    Here’s my js file:
    Ext.onReady(function(){
    
        Ext.BLANK_IMAGE_URL = 'assets/js/ext2/resources/images/default/s.gif';
    
        var store = new Ext.data.Store({
            proxy: new Ext.data.HttpProxy({
                url: 'assets/snippets/termbase/grid-paging-data.php'
            }),
    
            reader: new Ext.data.JsonReader({
                root: 'results',
                totalProperty: 'total',
                id: 'term',
                fields: [
                    {name: 'tb_id', type: 'int'}, 
                    'german', 
                    'english', 
                    'italian', 
                    'french'
                ]
            }),
    
            remoteSort: true
            
        });
        store.setDefaultSort('english', 'asc');
    
        var cm = new Ext.grid.ColumnModel([{
               header: "Id",
               dataIndex: 'tb_id',
               width: 65
            },
            {
               header: "German",
               dataIndex: 'german',
               width: 225
            },
            {
               header: "English",
               dataIndex: 'english',
               width: 225
            },
            {
               header: "Italian",
               dataIndex: 'italian',
               width: 225
            },
            {
               header: "French",
               dataIndex: 'french',
               width: 225
            }
        ]);
    
        cm.defaultSortable = true;
    
        var grid = new Ext.grid.GridPanel({
            el:'topic-grid',
            width:985,
            height:500,
            title:'View Termbase',
            store: store,
            cm: cm,
            trackMouseOver:false,
            loadMask: true,
            bbar: new Ext.PagingToolbar({
                pageSize: 25,
                store: store,
                displayInfo: true,
                displayMsg: 'Displaying topics {0} - {1} of {2}',
                emptyMsg: "No topics to display"
            })
        });
    
        grid.render();
        
        store.on('beforeload', function() {
            store.baseParams = {
                client:document.getElementById('clientName').innerHTML
            };
        }); 
    
        store.load({params:{start:0, limit:25}});
    
    });
    

    And the php file to process it:
    <?php
    
    $link = mysql_pconnect("localhost", "database_user", "database_pass") or die("Could not connect");
    mysql_select_db("database_name") or die("Could not select database");
    
    $sql_count = "SELECT * FROM tb_termbase WHERE tb_user = '".$_POST['client']."'";
    
    if(isset($_REQUEST['filter']) && $_REQUEST['filter'] != '') {
        $sql_count .= "AND (english LIKE '%".$_REQUEST['filter']."%' OR german LIKE '%".$_REQUEST['filter']."%' OR french LIKE '%".$_REQUEST['filter']."%' OR italian LIKE '%".$_REQUEST['filter']."%')";
    }
    
    $sql = $sql_count . " ORDER BY ".$_POST['sort']." ".$_POST['dir']." LIMIT ".(integer)$_POST['start'].", ".(integer)$_POST['limit'];
    
    $rs_count = mysql_query($sql_count);
    $rows = mysql_num_rows($rs_count);
    $rs = mysql_query($sql);
    while($obj = mysql_fetch_object($rs))
    {
    	$arr[] = $obj;
    }
    
    echo $_REQUEST['callback'].'({"total":"'.$rows.'","results":'.json_encode($arr).'})'; 
    
    ?>


    Of course, the ext libraries and my js file are linked into the head of my template.

    This produces a very nice grid with sortable columns, filtered on the username of the logged-in user. I display the user’s name on the page next to a logout button, in a span with the id of "clientName", which is where the filter gets its data.

    It also generates a very useful php error log file in the same folder as your php file.

    The biggest gotcha is to be scrupulous about your commas in the parameter lists in the js file. One extra comma will make IE roll over and play dead. It’s hard to figure out though, because the rest of the browsers just soldier on anyway.
      Studying MODX in the desert - http://sottwell.com
      Tips and Tricks from the MODX Forums and Slack Channels - http://modxcookbook.com
      Join the Slack Community - http://modx.org
    • Susan,

      You might also be interested in the tutorial site I’m putting together for the MODx implementation of Ext. It will (when done) outline and elaborate on exactly how MODx has used Ext, and how to develop with it in the context of MODx 0.9.7.

      The URL is:

      http://docs.modxcms.com/modext/

      It’s not complete yet, but it’s being actively worked on as we speak. Eventually I’d like to have it expanded to completely encompass the UI side of MODx’s manager.

      Another thing to note is that this isn’t limited to core 097 development...with 097’s modAction and modMenu, MODx Components (ie plugins/snippets/etc) can add their own manager pages to an 097 installation - even menu items on the top menu. They are added via the packaging feature, and removed when the snippet is removed.

      More on that later as it gets threshed out, but it is worthy mentioning that this stuff is applicable to more than just the core dev team.
        shaun mccormick | bigcommerce mgr of software engineering, former modx co-architect | github | splittingred.com
      • Hi Sottwell & splittingred

        First, I haven’t read the extjs documentation. I have only seen examples. Very impressing.
        My question is simple. You know ajaxSearch, so do you think that a migration from mootools to extjs is a priority or not. I am ready to learn extjs but as I have a long list of requirements and few time, I need to do some choice.
        Thanks for your advices and for your extjs examples.
        • Quote from: coroico at Jan 24, 2008, 09:20 PM

          Hi Sottwell & splittingred

          First, I haven’t read the extjs documentation. I have only saw examples. Very impressing.
          My question is simple. You know ajaxSearch, do you think that a migration from mootools to extjs is a priority or not. I am ready to learn extjs but as I have a long list of requirements and few time, I need to do some choice.
          Thanks for your advices and for your extjs examples.

          ExtJS is heavy - 500kb+ - it’s pretty big so that it can do all it needs to do. I don’t think I’d want that loading on every page load.

          I’d keep AjaxSearch with a lightweight framework for the front-end.
            shaun mccormick | bigcommerce mgr of software engineering, former modx co-architect | github | splittingred.com
          • Ok Thanks. It’s clear. It’s usefull for the backend not for the front end.
            • Quote from: coroico at Jan 24, 2008, 09:29 PM

              Ok Thanks. It’s clear. It’s usefull for the backend not for the front end.
              That is not necessarily true. If it will be on every page, like the search function often is, then probably you don’t want to use it. But for a one-page limited purpose like the data view app I describe in the first post, there’s nothing wrong with it.

              Also, once you learn the internal dependencies, you can build your own versions with only the parts you need. They are working on making that a bit easier to do.
                Studying MODX in the desert - http://sottwell.com
                Tips and Tricks from the MODX Forums and Slack Channels - http://modxcookbook.com
                Join the Slack Community - http://modx.org
              • Quote from: sottwell at Jan 24, 2008, 09:35 PM

                Also, once you learn the internal dependencies, you can build your own versions with only the parts you need. They are working on making that a bit easier to do.

                Just to expand on that, they are developing a download feature similar to Mootools.

                http://extjs.com/download/build
                  Jesse R.
                  Consider trying something new and extraordinary.
                  Illinois Wine

                  Have you considered donating to MODx lately?
                  Donate now. Every contribution helps.