Where are the combo box config items for 'tpl' and displayTpl in Architect 3?

[denisputnam]

I am trying to do something like this in my app, but the 'tpl' and the displayTpl are not available as config items in the Architect 3. How can I deal with this within the IDE and why aren't all the config items available for the combo box selection within the IDE?

http://docs.sencha.com/extjs/4.2.2/#...field.ComboBox

varstates = Ext.create('Ext.data.Store', {
    fields: ['abbr', 'name'],
    data : [
        {"abbr":"AL", "name":"Alabama"},
        {"abbr":"AK", "name":"Alaska"},
        {"abbr":"AZ", "name":"Arizona"}
    ]
});
 
Ext.create('Ext.form.ComboBox', {
    fieldLabel: 'Choose State',
    store: states,
    queryMode: 'local',
    valueField: 'abbr',
    renderTo: Ext.getBody(),
    // Template for the dropdown menu.
    // Note the use of "x-boundlist-item" class,
    // this is required to make the items selectable.
    tpl: Ext.create('Ext.XTemplate',
        '<tpl for=".">',
            '<div class="x-boundlist-item">{abbr} - {name}</div>',
        '</tpl>'
    ),
    // template for the content inside text field
    displayTpl: Ext.create('Ext.XTemplate',
        '<tpl for=".">',
            '{abbr} - {name}',
        '</tpl>'
    )});

[denisputnam]

I am going to respond to my own thread here. This solution is completely non-intuitive, but based on Mr. Strong's suggestion at http://www.sencha.com/forum/showthre...y-for-ComboBox

I added a bound list and then had to add tpl and play with the itemTpl to get this to work.

The folks at sencha need to deal with these kinds of things either in the documentation for architect or by providing a mechanism through the config tab in the IDE to provide this kind of solution. If the ExtJs documentation indicates that a tpl and a displayTpl config must be customized as one of the examples, then it should be completely easy to do in the IDE.

Google searching for a solution makes the IDE less attractive and useful as a tool and slows down development time.

Ext.define('MySchool.view.common.QuarterComboBox', {    extend: 'Ext.form.field.ComboBox',
    alias: 'widget.commonquartercombobox',


    requires: [
        'Ext.view.BoundList',
        'Ext.XTemplate'
    ],


    itemId: 'common-quartersubject',
    fieldLabel: 'Choose Quarter Subject',
    name: 'comboquarter',
    allowOnlyWhitespace: false,
    emptyText: 'Select one',
    forceSelection: true,
    queryMode: 'local',
    store: 'subject.SubjectStore',
    valueField: 'id',


    initComponent: function() {
        var me = this;


        Ext.applyIf(me, {
            listConfig: {
                xtype: 'boundlist',
                tpl: [
                    '        \'<tpl for=".">\',',
                    '            \'<div class="x-boundlist-item">{qtrYear}/{qtrName} - {subjName}</div>\',',
                    '        \'</tpl>\'',
                    ''
                ],
                itemSelector: 'div',
                itemTpl: [
                    '{qtrYear}/{qtrName} - {subjName}'
                ]
            }
        });


        me.callParent(arguments);
    }


});

[denisputnam]

I answered this thread to quickly. This solution does not allow you to select anything in the combo box.

I am going to set up a local store to populate the data from the real proxy stores to achieve the desired functionality. If I get it to work, I will post what I did.

[denisputnam]

This is what I ended up doing.

The Store:

Ext.define('MySchool.store.common.QuarterSubjectStore', {    extend: 'Ext.data.Store',
    alias: 'store.commonquartersubjectstore',


    requires: [
        'MySchool.model.common.QuarterSubjectModel',
        'Ext.data.Field'
    ],


    constructor: function(cfg) {
        var me = this;
        cfg = cfg || {};
        me.callParent([Ext.apply({
            autoLoad: true,
            model: 'MySchool.model.common.QuarterSubjectModel',
            storeId: 'common.QuarterSubjectStore',
            data: [
                
            ],
            fields: [
                {
                    name: 'id',
                    type: 'int'
                },
                {
                    name: 'name',
                    type: 'string'
                },
                {
                    name: 'qtrId',
                    type: 'int'
                },
                {
                    name: 'qtrName',
                    type: 'string'
                },
                {
                    name: 'subjId',
                    type: 'int'
                },
                {
                    name: 'subjName',
                    type: 'string'
                }
            ]
        }, cfg)]);
    },


    myLoad: function() {
        //commonQuarterSubjectStore.removeAll();
        this.removeAll();
        var subjectStore = Ext.getStore( 'subject.SubjectStore');
        var numSubjects = subjectStore.count();




        for( var i = 0; i < numSubjects; i++ )
        {
            var record = subjectStore.getAt(i);
            var qtrName = record.get( 'qtrName' );
            var qtrYear = record.get( 'qtrYear' );
            var subjName = record.get( 'subjName' );
            var subjId = record.get( 'subjId' );
            var qtrId = record.get( 'qtrId' );
            var name = qtrName + '/' + qtrYear + '-' + subjName;
            console.log( 'name=' + name );
            this.add({
                name: name,
                id: i,
                qtrName: qtrName,
                subjName: subjName,
                qtrId: qtrId,
                subjId: subjId
            });
        }
    }


});

The Model:

Ext.define('MySchool.model.common.QuarterSubjectModel', {    extend: 'Ext.data.Model',
    alias: 'model.commonquartersubjectmodel',


    requires: [
        'Ext.data.Field'
    ],


    fields: [
        {
            name: 'id',
            type: 'int'
        },
        {
            name: 'name',
            type: 'string'
        },
        {
            name: 'qtrId',
            type: 'int'
        },
        {
            name: 'qtrName',
            type: 'string'
        },
        {
            name: 'subjId',
            type: 'int'
        },
        {
            name: 'subjName',
            type: 'string'
        }
    ]
});

The Form:

Ext.define('MySchool.view.monthly.summary.NewSummaryFormPanel', {    extend: 'Ext.form.Panel',
    alias: 'widget.monthlynewsummaryformpanel',


    requires: [
        'MySchool.view.common.QuarterComboBox',
        'MySchool.view.common.MonthComboBox',
        'Ext.form.FieldSet',
        'Ext.form.field.ComboBox',
        'Ext.form.field.Hidden',
        'Ext.button.Button'
    ],


    draggable: true,
    floating: true,
    frame: true,
    itemId: 'monthlynewsummaryformpanel',
    width: 500,
    bodyPadding: 10,
    title: 'New Monthly Summary Form',


    initComponent: function() {
        var me = this;


        Ext.applyIf(me, {
            items: [
                {
                    xtype: 'fieldset',
                    itemId: 'monthlysummaryfieldset',
                    title: 'Monthly Summary Fields',
                    items: [
                        {
                            xtype: 'commonquartercombobox',
                            anchor: '100%'
                        },
                        {
                            xtype: 'commonmonthcombobox',
                            anchor: '100%'
                        }
  
                    ]
                },
                {
                    xtype: 'button',
                    itemId: 'newmonthlysummarycanel',
                    text: 'Canel'
                },
                {
                    xtype: 'button',
                    itemId: 'newmonthlysummarysubmit',
                    text: 'Submit'
                }
            ]
        });


        me.callParent(arguments);
    }


});

In the controller:

onNewmonthlysummariestoolClick: function(tool, e, eOpts) {        debugger;
        var studentStore = Ext.getStore('student.StudentStore');
        var subjectStore = Ext.getStore( 'subject.SubjectStore');
        var commonQuarterSubjectStore = Ext.getStore( 'common.QuarterSubjectStore');
        var commonMonthStore = Ext.getStore('common.MonthStore');


        var studentRecord = studentStore.getAt(0);
        var studentId = studentRecord.get( 'id' );
        var studentName = studentRecord.get( 'userName' );


        var newDialog = Ext.create( 'MySchool.view.monthly.summary.NewSummaryFormPanel' );


        newDialog.down('#newmonthlysummary-studentid').setValue( studentId );
        newDialog.down('#newmonthlysummary-studentname').setValue( studentName );


        commonQuarterSubjectStore.myLoad();
        commonMonthStore.myLoad();


        window.console.log( 'New Monthly Summary Dialog' );




        newDialog.render( Ext.getBody() );
        newDialog.show();
    },

The ComboBox:

Ext.define('MySchool.view.common.QuarterComboBox', {    extend: 'Ext.form.field.ComboBox',
    alias: 'widget.commonquartercombobox',


    itemId: 'common-quartersubject',
    fieldLabel: 'Choose Quarter Subject',
    name: 'comboquarter',
    allowOnlyWhitespace: false,
    emptyText: 'Select one',
    displayField: 'name',
    forceSelection: true,
    queryMode: 'local',
    store: 'common.QuarterSubjectStore',
    valueField: 'id',


    initComponent: function() {
        var me = this;


        me.callParent(arguments);
    }


});

[ssamayoa]

What a mess you did man!

It is simpler: Use processConfig.

Example:

processConfig: function(config) {
        config.tpl = Ext.create("Ext.XTemplate",
            '<tpl for="."><div class="x-boundlist-item">{Name} ({SubBusinessUnitId})</div></tpl>');
        config.displayTpl = Ext.create("Ext.XTemplate",
            '<tpl for=".">{Name}</tpl>');
        return config;
    }

You can add processConfig to any component, look for "Process Config" in property inspector.

Regards.

[denisputnam]

Yes your solution did work. I think I got confused because Mr. Strong indicated that a bound list needed to be added to the combo box component and it was not displaying the list properly. Now it does.

Thank you for your help.

[aconran]

I can confirm that tpl and displayTpl are missing in the configuration list and they should be there.

Moving this thread to the bugs forum and opening up a ticket.

[senacle]

Be careful : when grouping data in combobox, the datas must be sorted in the order of the group.
Try this example http://jsfiddle.net/rraponi/n9sm2q1e/.
Change some group label in the data, you will see that the groups will appear several time if not sorted.

You can sort the data in the server side, or like in this other example, in the store (sorters and groupField propoerties) : https://fiddle.sencha.com/#fiddle/ugi&view/editor