CMP - SuperboxSelect and TypeAhead configuration issue

☆ A M B ☆
222 Posts

Jason Sonderman Reply #1, 13 years, 1 month ago

Version Modx 2.2.8
Extending an existing CMP Add-on (so migxdb is not an option)

I have a superboxselect component that gets its store remotely via a getlist processor. Unfortunately, it looks like the typeAhead autocomplete feature is missing some sort of configuration in that when I start typing, it ALWAYS returns the first item in the store. Doesn't matter what is typed.

To use typeAhead with a remote store, does a listener need to be used (to call a processor that searches the store), or what?

Code:
Component ExtJS -

MODx.combo.Users = function (config) {
    config = config || {};
    Ext.applyIf(config, {
        xtype:'superboxselect'
        ,triggerAction: 'all'
        ,mode: 'remote'
        ,forceSelection: true
        ,lazyRender: true
        ,editable : true
        ,valueField: 'internalKey'
        ,displayField: 'fullname'
        ,typeAhead:true
            ,minChars:1
        ,store: new Ext.data.JsonStore({
            idProperty:'id',
            autoLoad: true,
            remoteSort: true,
            root:'results',
            fields: ['fullname', 'internalKey'],
            url:  mxcCore.config.connectorUrl,
            baseParams:{
                action: 'mgr/contacts/getList'
            }

        })
    });
    MODx.combo.Users.superclass.constructor.call(this, config);
};
Ext.extend(MODx.combo.Users, Ext.ux.form.SuperBoxSelect);
Ext.reg('modx-superbox-user', MODx.combo.Users );

getList Processor

$eventId = $modx->getOption('eventid',$scriptProperties,0);

/* build query */
//-- get all active users
$c = $modx->newQuery('modUser');
$c->where(array('active'=>1));

$mxUsers = $modx->getCollectionGraph('modUser',array('Profile'=>array()), $c);

/* iterate */
$list = array();
foreach ($mxUsers as $mxu) {
    $mxcArray = $mxu->Profile->toArray();
   if(empty($mxcArray['fullname']))continue;
    if($mxcArray['internalKey']===1)continue;
    $list[]= $mxcArray;
}

return $this->outputArray($list,$count);

This is code that I am extending/customizing originally created by Charless for his mxCalendar add-on

- ☆ A M B ☆
- 2,475 Posts
Everett Reply #2, 13 years, 1 month ago
I think you need to listen for the posted values and use that to modify your where conditions in your getCollection (or getCollectionGraph) calls. In regular Ext JS, this happens by pegging one variable or another to be posted when the lookahead is triggered -- it's the same idea as passing variables for "start" and "limit" to help define pagination parameters.

For example, you might define a combo box (or some other form control) like this in your JS:
```
        {
            xtype : 'combo',
            fieldLabel : 'Writer',
            forceSelection : true,
            displayField : 'name',
            valueField : 'id',
            hiddenName : 'createdby',
            allowBlank : true,
            typeAhead : true,
            loadingText : 'Loading...',
            minChars : 1,
            triggerAction : 'all',
            store : UserStore
        },
```
Then in your processor you might read a user_id out of the $_POST array to filter posts by that user:
```
$createdby = (int) $modx->getOption('createdby', $_POST, null);
```
And then somewhere in the processor, you'd add that as a criteria:
```
$c = $modx->newQuery('modResource');

if ($createdby) {
    $c->where(array('createdby' => $createdby));
}

// then...
$pages = $modx->getCollection('modResource',$c);
```
Dunno if that helps... Ext JS is so finicky. I wonder if all you need is to specify the "hiddenName" attribute and then listen for it on the other end.
Hosting stuff: http://fireproofsocks.com/
Coding stuff: http://craftsmancoding.com/
Blog stuff: http://tipsfor.us/