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
    35,668
    Vote Rating
    746
    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
    301
    Vote Rating
    4
    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
    301
    Vote Rating
    4
    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
    245
    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
    35,668
    Vote Rating
    746
    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.

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar