1. #1
    Sencha User alexbariv's Avatar
    Join Date
    May 2009
    Location
    Mérida, Venezuela
    Posts
    67
    Vote Rating
    2
    alexbariv is on a distinguished road

      0  

    Question ComboBox with Images in ExtJS 4

    ComboBox with Images in ExtJS 4


    Hi everybody.

    I need to create a combo with the countries and flags in there.

    Browsing a while i found this resource [1] but it says that its for Ext1-2, so i was wondering if with ext4 there is a more simple approach to this. For example, putting the icons directly without using a CCS class.

    Thanks in advance.

    [1] http://www.sencha.com/learn/Tutorial...ding_Ext_Class
    Think like an action person, act like a thinking person

  2. #2
    Sencha User alexbariv's Avatar
    Join Date
    May 2009
    Location
    Mérida, Venezuela
    Posts
    67
    Vote Rating
    2
    alexbariv is on a distinguished road

      2  

    Default


    Well in case that someone want to accomplish this too, here is what i did:

    Code:
    // The data
    var countries = [
       {"iso2":"UY","code":"598","name":"Uruguay"},
       {"iso2":"UZ","code":"998","name":"Uzbekistan"},
       {"iso2":"VU","code":"678","name":"Vanuatu"},      
       {"iso2":"VE","code":"58","name":"Venezuela"}
    ];                
    
    // Model
    Ext.define("Country", {extend: "Ext.data.Model",
        fields: [
            {type: 'iso2',   name: 'iso2'},
            {type: 'string', name: 'code'},
            {type: 'string', name: 'name'}
        ]
    });
    
    // The data store
    var countryStore = Ext.create('Ext.data.Store', {
        model: 'Country',
        data: countries
    });
    
    // ComboBox with a custom item template
    countryCombo = Ext.create('Ext.form.field.ComboBox', {
        displayField : 'name',
        valueField   : 'code',
        grow         : true,
        store        : countryStore,
        queryMode    : 'local',
        listConfig: {
            getInnerTpl: function() {
                // here you place the images in your combo
                var tpl = '<div>'+
                          '<img src="images/flags/{iso2}.png" align="left">&nbsp;&nbsp;'+
                          '{name}</div>';
                return tpl;
            }
        }
    });
    Result:



    If there is a better way to do this with ExtJS4, please feel free to improve the code.

    Cheers!
    Think like an action person, act like a thinking person

  3. #3
    Sencha User
    Join Date
    Jul 2011
    Location
    Ukraine
    Posts
    3
    Vote Rating
    0
    davs87 is on a distinguished road

      0  

    Default


    Hi! Don't you know is there any way to make 'iconable' selected value field ( I mean field near drop-sown button) ?

  4. #4
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,207
    Vote Rating
    856
    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

      1  

    Default


    They way to change what you see is in the listConfig like you have done. There is also a tpl option on listConfig if you want complete control. getInnerTpl just injects that string into the tpl so if you want complete control of everything, you can assign tpl to a XTemplate.
    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.

  5. #5
    Sencha User pmachner's Avatar
    Join Date
    Jun 2011
    Location
    Kraków, Poland
    Posts
    54
    Vote Rating
    1
    pmachner is on a distinguished road

      0  

    Default


    Thanks guys, this thread has been really helpful

  6. #6
    Sencha User fabio.policeno's Avatar
    Join Date
    Sep 2010
    Location
    Curitiba - PR / Brasil
    Posts
    304
    Vote Rating
    5
    fabio.policeno is on a distinguished road

      0  

    Default


    Code:
    itemTpl: Ext.create('Ext.XTemplate',
                    '<div>',
                        '<img src="' + me.pathIconsFlag + '{icon}.' + me.extensionFlag + '" align="left">&nbsp;&nbsp;{name}',
                    '</div>'
                )

  7. #7
    Sencha User
    Join Date
    Jul 2011
    Location
    Ukraine
    Posts
    3
    Vote Rating
    0
    davs87 is on a distinguished road

      0  

    Default


    Quote Originally Posted by fabio.policeno View Post
    Code:
    itemTpl: Ext.create('Ext.XTemplate',
                    '<div>',
                        '<img src="' + me.pathIconsFlag + '{icon}.' + me.extensionFlag + '" align="left">&nbsp;&nbsp;{name}',
                    '</div>'
                )
    Even setting :
    Code:
     itemTpl: Ext.create('Ext.XTemplate', '<div><img src="path_to_img/file.png" align="left"/>ABCD</div>'
    Doesn't help .. its just shows ABCD

  8. #8
    Sencha User fabio.policeno's Avatar
    Join Date
    Sep 2010
    Location
    Curitiba - PR / Brasil
    Posts
    304
    Vote Rating
    5
    fabio.policeno is on a distinguished road

      0  

    Default


    Do not post a solution, it was a better response from the first post.

  9. #9
    Sencha User
    Join Date
    Mar 2010
    Posts
    249
    Vote Rating
    1
    Ex_Soft is an unknown quantity at this point

      1  

    Default


    Quote Originally Posted by mitchellsimoens View Post
    They way to change what you see is in the listConfig like you have done. There is also a tpl option on listConfig if you want complete control. getInnerTpl just injects that string into the tpl so if you want complete control of everything, you can assign tpl to a XTemplate.
    As I understand tpl is used to create list of options. But value is shown by Ext.form.field.Text which is rendered to html tag <input type="text">. How to show image in the value field?

  10. #10
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,207
    Vote Rating
    856
    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

      -1  

    Default


    Quote Originally Posted by Ex_Soft View Post
    As I understand tpl is used to create list of options. But value is shown by Ext.form.field.Text which is rendered to html tag <input type="text">. How to show image in the value field?
    You can't in a text field really.
    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.