Django and Extjs, how to use combo with jsonstore

Question

I want to display an extjs combo with a JsonStore Server side I use python/Django.

So, this is my combo:

xtype: 'combo',
store: new Ext.data.JsonStore({
    url: 'get_peoples',
    root: 'data',
    totalProperty: 'total',
    fields: [
        {name: 'name', mapping: 'fields.name'},
        {name: 'subname', mapping: 'fields.subname'}
    ],
    autoLoad: true
}),
trigerAction: 'all'

and the views.py server side:

def get_peoples(request):
    queryset = People.objects.all()    
    data = '{"total": %s, "%s": %s}' % \
        (queryset.count(), 'data', serializers.serialize('json', queryset))
    return HttpResponse(data, mimetype='application/json')

the get_people call give me

{"total": 1, "data": [{"pk": 1, "model": "myapp.people", "fields": {"name": "Paul", "subname": "Di Anno"}}

I think i'm not doing it right, cause my combo doesn't display any item

Answer 1

You need to add displayField and valueField declarations to your ComboBox so that it knows which fields from your store to use for either role. Also, setting autoLoad in the store is not necessary.

new Ext.form.ComboBox({
    xtype: 'combo',
    store: new Ext.data.JsonStore({
        url: 'get_peoples',
        root: 'data',
        totalProperty: 'total',
        fields: [
            {name: 'name', mapping: 'fields.name'},
            {name: 'subname', mapping: 'fields.subname'}
        ]
    }),
    triggerAction: 'all',

    // Just guessing at the proper fields here.
    // Set them to whatever you wish.
    displayField: 'name',
    valueField: 'subname'
});