1. #1
    Sencha User nak1's Avatar
    Join Date
    Jan 2008
    Posts
    266
    Vote Rating
    0
    Answers
    1
    nak1 is an unknown quantity at this point

      0  

    Default Unanswered: Select Field and tpl

    Unanswered: Select Field and tpl


    I noticed in the documentation that the Ext.field.Select has a tpl attribute. I'm unclear as to what it does, however, I was wondering if there was a way to use it instead of the displayField value? If not is there another option that might allow for HTML when displaying the selected item?
    No longer a Newbie

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,651
    Vote Rating
    899
    Answers
    3575
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    tpl is inherited and should be removed from the Select field.

    Currently you would have to override the getTabletPicker method (or define your own on the listPanel property) to access the list. Currently, the getTabletPicker method looks like:

    Code:
        getTabletPicker: function() {
            if (!this.listPanel) {
                this.listPanel = Ext.create('Ext.Panel', {
                    top     : 0,
                    left    : 0,
                    modal   : true,
                    cls     : Ext.baseCSSPrefix + 'select-overlay',
                    layout  : 'fit',
                    hideOnMaskTap: true,
                    items: {
                        xtype: 'list',
                        store: this.getStore(),
                        itemTpl: '<span class="x-list-label">{' + this.getDisplayField() + '}</span>',
                        listeners: {
                            select : this.onListSelect,
                            itemtap: this.onListTap,
                            scope  : this
                        }
                    }
                });
            }
    
            return this.listPanel;
        },
    So you would have to override it and change the itemTpl on the list. As I said, you could also create a Panel with a list and put it on the listPanel property of the Select field.

    Going further, there is going to be a new defaultTabletPickerConfig that you can use but you would have to do this:

    Code:
    defaultTabletPickerConfig : {
        items : {
            xtype: 'list',
            store: this.getStore(),
            itemTpl: '<span class="x-list-label">{' + this.getDisplayField() + '}</span>',
            listeners: {
                select : 'onListSelect',
                itemtap: 'onListTap'
            }
        }
    }
    The issue I see there is the scoping of the listeners. If that doesn't work then you would have to define your own getDefaultTabletPickerConfig method on the select field:

    Code:
    getDefaultTabletPickerConfig : function() {
        return {
            items : {
                xtype: 'list',
                store: this.getStore(),
                itemTpl: '<span class="x-list-label">{' + this.getDisplayField() + '}</span>',
                listeners: {
                    select : this.onListSelect,
                    itemtap: this.onListTap,
                    scope: this
                }
            }
        };
    }
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha User nak1's Avatar
    Join Date
    Jan 2008
    Posts
    266
    Vote Rating
    0
    Answers
    1
    nak1 is an unknown quantity at this point

      0  

    Default


    Looking on the code, couldn't I simply override the getDisplayField method?
    No longer a Newbie

  4. #4
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,651
    Vote Rating
    899
    Answers
    3575
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    If you take into account that this.getDisplayField() is wrapped with '{' and '}' already so you are restricted a little.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

Thread Participants: 1