We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
    • 16863
    • 29 Posts
    So I decided to jump into the deep end of the pool and build a custom manager page for managing a custom database table. My skills are mostly geared toward the front-end, so I knew this would be an undertaking.

    After a few days of banging around with Bob Ray’s tutorial and Shaun McCormick’s examples (modExtra and Doodles) I have a working grid, with one glitch, my columns won’t sort.

    Here’s my items.grid.js file.
    storeAddresses.grid.Items = function(config) {
        config = config || {};
        Ext.applyIf(config,{
            id: 'storeaddresses-grid-items'
            ,url: storeAddresses.config.connector_url
            ,baseParams: {
                action: 'mgr/item/getlist'
            }
            ,fields: ['id','city','street']
            ,autoHeight: true
            ,paging: true
            ,remoteSort: true
            ,columns: [{
                header: _('id')
                ,dataIndex: 'id'
    			,sortable: true
                ,width: 70
            },{
                header: _('storeaddresses.city')
                ,dataIndex: 'city'
    			,sortable: true
                ,width: 200
            },{
                header: _('storeaddresses.street')
                ,dataIndex: 'street'
    			,sortable: false
                ,width: 250
            }]
            ,tbar: [{
                text: _('storeaddresses.item_create')
                ,handler: this.createItem
                ,scope: this
            }]
        });
        storeAddresses.grid.Items.superclass.constructor.call(this,config);
    };
    Ext.extend(storeAddresses.grid.Items,MODx.grid.Grid,{
        windows: {}
    
        ,getMenu: function() {
            var m = [];
            m.push({
                text: _('storeaddresses.item_update')
                ,handler: this.updateItem
            });
            m.push('-');
            m.push({
                text: _('storeaddresses.item_remove')
                ,handler: this.removeItem
            });
            this.addContextMenuItem(m);
        }
        
        ,createItem: function(btn,e) {
            if (!this.windows.createItem) {
                this.windows.createItem = MODx.load({
                    xtype: 'storeaddresses-window-item-create'
                    ,listeners: {
                        'success': {fn:function() { this.refresh(); },scope:this}
                    }
                });
            }
            this.windows.createItem.fp.getForm().reset();
            this.windows.createItem.show(e.target);
        }
        ,updateItem: function(btn,e) {
            if (!this.menu.record || !this.menu.record.id) return false;
            var r = this.menu.record;
    
            if (!this.windows.updateItem) {
                this.windows.updateItem = MODx.load({
                    xtype: 'storeaddresses-window-item-update'
                    ,record: r
                    ,listeners: {
                        'success': {fn:function() { this.refresh(); },scope:this}
                    }
                });
            }
            this.windows.updateItem.fp.getForm().reset();
            this.windows.updateItem.fp.getForm().setValues(r);
            this.windows.updateItem.show(e.target);
        }
        
        ,removeItem: function(btn,e) {
            if (!this.menu.record) return false;
            
            MODx.msg.confirm({
                title: _('storeaddresses.item_remove')
                ,text: _('storeaddresses.item_remove_confirm')
                ,url: this.config.url
                ,params: {
                    action: 'mgr/item/remove'
                    ,id: this.menu.record.id
                }
                ,listeners: {
                    'success': {fn:function(r) { this.refresh(); },scope:this}
                }
            });
        }
    });
    Ext.reg('storeaddresses-grid-items',storeAddresses.grid.Items);
    
    
    
    
    storeAddresses.window.CreateItem = function(config) {
        config = config || {};
        this.ident = config.ident || 'mecitem'+Ext.id();
        Ext.applyIf(config,{
            title: _('storeaddresses.item_create')
            ,id: this.ident
            ,height: 150
            ,width: 475
            ,url: storeAddresses.config.connector_url
            ,action: 'mgr/item/create'
            ,fields: [{
                xtype: 'textfield'
                ,fieldLabel: _('name')
                ,name: 'name'
                ,id: 'storeaddresses-'+this.ident+'-name'
                ,width: 300
            },{
                xtype: 'textarea'
                ,fieldLabel: _('description')
                ,name: 'description'
                ,id: 'storeaddresses-'+this.ident+'-description'
                ,width: 300
            }]
        });
        storeAddresses.window.CreateItem.superclass.constructor.call(this,config);
    };
    Ext.extend(storeAddresses.window.CreateItem,MODx.Window);
    Ext.reg('storeaddresses-window-item-create',storeAddresses.window.CreateItem);
    
    
    storeAddresses.window.UpdateItem = function(config) {
        config = config || {};
        this.ident = config.ident || 'meuitem'+Ext.id();
        Ext.applyIf(config,{
            title: _('storeaddresses.item_update')
            ,id: this.ident
            ,height: 150
            ,width: 475
            ,url: storeAddresses.config.connector_url
            ,action: 'mgr/item/update'
            ,fields: [{
                xtype: 'hidden'
                ,name: 'id'
                ,id: 'storeaddresses-'+this.ident+'-id'
            },{
                xtype: 'textfield'
                ,fieldLabel: _('name')
                ,name: 'name'
                ,id: 'storeaddresses-'+this.ident+'-name'
                ,width: 300
            },{
                xtype: 'textarea'
                ,fieldLabel: _('description')
                ,name: 'description'
                ,id: 'storeaddresses-'+this.ident+'-description'
                ,width: 300
            }]
        });
        storeAddresses.window.UpdateItem.superclass.constructor.call(this,config);
    };
    Ext.extend(storeAddresses.window.UpdateItem,MODx.Window);
    Ext.reg('storeaddresses-window-item-update',storeAddresses.window.UpdateItem);


    Any insights would be appreciated.
    My Revolution install is up to date 2.0.4pl2
      • 4172
      • 5,888 Posts
      can you also post your getlist.php?
        -------------------------------

        you can buy me a beer, if you like MIGX

        http://webcmsolutions.de/migx.html

        Thanks!
        • 16863
        • 29 Posts
        Sure. Thanks.
        $isLimit = !empty($_REQUEST['limit']);
        $start = $modx->getOption('start',$_REQUEST,0);
        $limit = $modx->getOption('limit',$_REQUEST,20);
        $sort = $modx->getOption('sort',$_REQUEST,'id');
        $dir = $modx->getOption('dir',$_REQUEST,'ASC');
        
        $c = $modx->newQuery('Address');
        $count = $modx->getCount('Address',$c);
        
        $c->sortby($sort,$dir);
        if ($isLimit) $c->limit($limit,$start);
        $items = $modx->getCollection('Address',$c);
        
        $list = array();
        foreach ($items as $item) {
            $itemArray = $item->toArray();
            $list[]= $itemArray;
        }
        
        return $this->outputArray($list,$count);

          • 13501
          • 15 Posts
          Hi,

          I’ve been mending with grid as well.
          But im still trying to figure out why my sorting didnt work.

          If you use firebug, you will realise how the return call will return.
          You will need to set json output instead of array with value:
          { total: #, results: [
          {id: "fieldvalue", name: "fieldvalue...", description: "xxx"}, { ... }, ...
          ]
          }

          hope it works for ya smiley

            • 22244
            • 144 Posts
            Hi Leeboone,

            I want to thank you for pointing out to Doodles! I have been working for a day to built my custom manager page and just started working on the processors when I came across your topic.

            Building from scratch helps a lot to understand the system but having a working example like Doodles really helps me out when I’m stuck!

            I really appreciate it!