Creating an adapter for a custom Sencha Touch component

[murrayh...@gmail.com]

Hi All.

A few months ago I said I was going to start on my Sencha Touch Glu app in a week. Well, it was a very long week but the time has now arrived!

I started by building the Touch adapter then applying it to the todomvc example that has partially been coded as part of the GluJS download (and which works fine for the ExtJS version).

I have made good progress and most of it works. One thing that looks like it was never finished is the button group (All, Active, Completed) since Touch doesn't have a ButtonGroup component. I figured it would be a good way to learn more about GluJS adapters so I made a custom ButtonGroup component for Touch and it works fine separately from GluJS. Now I want to make the adapter and have only partial success.

First, here is the ButtonGroup component:

Ext.define('Ext.ButtonGroup', {
extend: 'Ext.Container',
requires: [
// My custom button extended from Ext.Button.
// Just remembers pressed state and sets classes basically
'Ext.ToggleButton'
],
xtype: 'buttongroup',
config: {
activeItem: null,
layout: {
type: 'hbox'
}
}
});

Now, this is my adapter so far:

glu.regAdapter('buttongroup', {
extend: 'container',
defaultTypes: {
items: 'togglebtn' // My custom button class
},

beforeCollect: function(config) {
glu.provider.adapters.Container.prototype.beforeCollect.apply(this, arguments);

if (config.activeItem != null) {
config.defaults = config.defaults || {};
config.defaults.value = '';
}
}
});

In the View config:
{
xtype: 'buttongroup',
activeItem: '@{filterMode}',
items: [{
text: '~~all~~',
value: 'all'
}, {
text: '~~active~~',
value: 'active'
}, {
text: '~~completed~~',
value: 'completed'
}]
}

The VM property filterMode is bound to the view 'activeItem' as in the view above. There is a formula property on the VM (allVisibleItemsAreCompleted$) that does things based on the activeItem --> filterMode binding.

Here is my problem: Because my ButtonGroup component is extended from Ext.Container (so I can hbox the toggle buttons as a group in the toolbar), and Ext.Container's setActiveItem() is expecting an integer index or an xtype/component, when the VM initialises the filterMode property to "all", Ext.Container
tries to create a component called 'widget.all' since it assumes the string argument passed in represents an xtype.

So, I know I need to do more with my adapter. I tried to work it out by looking at the ExtJS buttongroup adapter but that didn't shed a lot of light for me. I could, of course, add my own custom activeItem-like property and manage it that way but I wanted to make the example VM code-compatible for both ExtJS and Touch views, and I want to learn about adapters!

So, can anyone explain what I need to do to the adapter so that the Glu setter / getter for activeItem will somehow allow me to have a non-xtype string (ie "all", "active" or "completed") without me overriding the method in Ext.Container?

Thanks!
Murray

[murrayh...@gmail.com]

Ok. I worked it out and included it in the Touch adapter that I will commit to my branch after further testing.

The Touch version of the todomvc GluJS example is now working. :-)

I will start to apply the adapter in my app and see how I go.

Cheers,
Murray