Results 1 to 8 of 8

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

    You found a bug! We've classified it as DSGNR-5514 . We encourage you to continue the discussion and to find an acceptable workaround while we work on a permanent fix.
  1. #1
    Sencha Premium Member
    Join Date
    Apr 2011
    Posts
    167

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

    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

    Code:
    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>'
        )});

  2. #2
    Sencha Premium Member
    Join Date
    Apr 2011
    Posts
    167

    Default

    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.


    Code:
    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);
        }
    
    
    });

  3. #3
    Sencha Premium Member
    Join Date
    Apr 2011
    Posts
    167

    Default

    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.

  4. #4
    Sencha Premium Member
    Join Date
    Apr 2011
    Posts
    167

    Default

    This is what I ended up doing.

    The Store:

    Code:
    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:

    Code:
    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:

    Code:
    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:

    Code:
    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:

    Code:
    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);
        }
    
    
    });

  5. #5
    Sencha Premium Member
    Join Date
    May 2010
    Location
    Guatemala, Central America
    Posts
    1,560

    Default

    What a mess you did man!

    It is simpler: Use processConfig.

    Example:

    Code:
    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.
    UI: Sencha Architect / ExtJS 4 - 6
    Server side: JEE / EJB 3.x / CDI / JPA 2.x/ JAX-RS / JasperReports
    Application Server: WildFly / Weblogic
    Databases: Oracle
    / MySQL / DB2 / Firebird

    If you like my answer please vote!

  6. #6
    Sencha Premium Member
    Join Date
    Apr 2011
    Posts
    167

    Default

    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.

  7. #7
    Sencha User aconran's Avatar
    Join Date
    Mar 2007
    Posts
    9,488

    Default

    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.
    Aaron Conran
    @aconran

  8. #8
    Sencha User
    Join Date
    Dec 2008
    Location
    France
    Posts
    321

    Default

    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

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •