1. #1
    Sencha User
    Join Date
    Feb 2012
    Posts
    219
    Answers
    10
    Vote Rating
    5
    webfriend13 is on a distinguished road

      0  

    Default Answered: Combobox with link button

    Answered: Combobox with link button


    Hi All,

    I want to add link button to each item in the combobox as shown in the below image.

    DropDownWithLink.JPG

    Please share code/link or plugin I can use to add link button to combobox. I am using Extjs 4.1

  2. You can modify tpl to do that. Example:
    Code:
    Ext.onReady(function(){
        Ext.create('Ext.form.field.ComboBox', {
            renderTo: Ext.getBody(),
            width: 200,
            queryMode: 'local',
            valueField: 'id',
            displayField: 'name',
            store: {
                fields: ['id', 'name', 'link'],
                data: [
                    { id: 1, name: 'A', link: 'http://www.google.com'},
                    { id: 2, name: 'B', link: 'http://www.yahoo.com'},
                    { id: 3, name: 'C', link: 'http://www.microsoft.com'}
                ]
            },
            listConfig: {
                tpl: [
                    '<table width="100%"><tpl for=".">',
                        '<tr>',
                            '<td role="option" class="x-boundlist-item" width="70%">{name}</td>',
                            '<td align="right"><a href="{link}" width="30%" target="_blank">manage</a></td>',
                        '</tr>',
                    '</tpl></table>'
                ]
            }
        });
    });

  3. #2
    Sencha - Community Support Team
    Join Date
    Jan 2012
    Posts
    1,376
    Answers
    346
    Vote Rating
    113
    vietits is a name known to all vietits is a name known to all vietits is a name known to all vietits is a name known to all vietits is a name known to all vietits is a name known to all

      1  

    Default


    Try this:
    Code:
    Ext.onReady(function(){
        Ext.create('Ext.form.field.ComboBox', {
            renderTo: Ext.getBody(),
            width: 200,
            queryMode: 'local',
            valueField: 'id',
            displayField: 'name',
            store: {
                fields: ['id', 'name', 'link'],
                data: [
                    { id: 1, name: 'A', link: 'http://www.google.com'},
                    { id: 2, name: 'B', link: 'http://www.yahoo.com'},
                    { id: 3, name: 'C', link: 'http://www.microsoft.com'}
                ]
            },
            listConfig: {
                tpl: [
                    '<ul><tpl for=".">',
                        '<li role="option" class="x-boundlist-item">{name} <a href="{link}" target="_blank">{link}</a></li>',
                    '</tpl></ul>'
                ]
            }
        });
    });

  4. #3
    Sencha User
    Join Date
    Feb 2012
    Posts
    219
    Answers
    10
    Vote Rating
    5
    webfriend13 is on a distinguished road

      0  

    Default


    Hi Vietits,

    Thank you for quick reply. I am able to add link to the combobox (as shown in the belwo image).
    Is it possible to create logical separation between the text and the link? I want to separate the text and the link for two reasons:
    a) After I click on link, it actually selects the item (who's link i have seelcted) and it fires the select event of the combo-box which I want to avoid. (clicking on link must not trigger select event)
    b) I want to suggest to user that these two are separate actions.

    Right nowI am seeing the combobox like this.

    AlignmentIssue.JPG

  5. #4
    Sencha - Community Support Team
    Join Date
    Jan 2012
    Posts
    1,376
    Answers
    346
    Vote Rating
    113
    vietits is a name known to all vietits is a name known to all vietits is a name known to all vietits is a name known to all vietits is a name known to all vietits is a name known to all

      0  

    Default


    You can modify tpl to do that. Example:
    Code:
    Ext.onReady(function(){
        Ext.create('Ext.form.field.ComboBox', {
            renderTo: Ext.getBody(),
            width: 200,
            queryMode: 'local',
            valueField: 'id',
            displayField: 'name',
            store: {
                fields: ['id', 'name', 'link'],
                data: [
                    { id: 1, name: 'A', link: 'http://www.google.com'},
                    { id: 2, name: 'B', link: 'http://www.yahoo.com'},
                    { id: 3, name: 'C', link: 'http://www.microsoft.com'}
                ]
            },
            listConfig: {
                tpl: [
                    '<table width="100%"><tpl for=".">',
                        '<tr>',
                            '<td role="option" class="x-boundlist-item" width="70%">{name}</td>',
                            '<td align="right"><a href="{link}" width="30%" target="_blank">manage</a></td>',
                        '</tr>',
                    '</tpl></table>'
                ]
            }
        });
    });

  6. #5
    Sencha User
    Join Date
    Feb 2012
    Posts
    219
    Answers
    10
    Vote Rating
    5
    webfriend13 is on a distinguished road

      0  

    Default


    Hi Vietits,

    AWESOME !!!! This is what I was looking for. Thank you.

  7. #6
    Sencha User
    Join Date
    Feb 2012
    Posts
    219
    Answers
    10
    Vote Rating
    5
    webfriend13 is on a distinguished road

      0  

    Default


    Hi Vietits,



    Ext.onReady(function(){
    Ext.create('Ext.form.field.ComboBox', {
    renderTo: Ext.getBody(),
    width: 200,
    queryMode: 'local',
    valueField: 'id',
    displayField: 'name',
    store: {
    fields: ['id', 'name', 'link'],
    data: [
    { id: 1, name: 'A', link: 'http://www.google.com'},
    { id: 2, name: 'B', link: 'http://www.yahoo.com'},
    { id: 3, name: 'C', link: 'http://www.microsoft.com'}
    ]
    },
    listConfig: {
    tpl: [
    '<ul><tpl for=".">',
    '<li role="option" class="x-boundlist-item">{name} <a href="{link}" target="_blank">{link}</a></li>',
    '</tpl></ul>'
    ]
    }
    });
    });


    If I use above code, I am seeing list like this:
    AlignmentIssue.JPG

    Problem: If I click on Manage link, system also fires the select event of the dropdown list. I dont want to fire the select event of the combobox if I have clicked on the link.

  8. #7
    Sencha - Community Support Team
    Join Date
    Jan 2012
    Posts
    1,376
    Answers
    346
    Vote Rating
    113
    vietits is a name known to all vietits is a name known to all vietits is a name known to all vietits is a name known to all vietits is a name known to all vietits is a name known to all

      0  

    Default


    Have you tried the solution I posted on post #4? Combobox won't fire 'select' event if you click on 'manage' link.

  9. #8
    Sencha User
    Join Date
    Feb 2012
    Posts
    219
    Answers
    10
    Vote Rating
    5
    webfriend13 is on a distinguished road

      0  

    Default


    HI Vietits,

    Yes, I have tried that and it does not fire 'select' event. But the problem with this approach is, when i move mosue of the list, system changes the back color for first TD and not for 2nd TD. I know I need to class="x-boundlist-item" in second TD as well. But If I add "x-boundlist-item" class in second TD, system is throwing some javascript error saying 'InterId is null' .

    Thank you replying. I really appreciate your help.

  10. #9
    Sencha - Community Support Team
    Join Date
    Jan 2012
    Posts
    1,376
    Answers
    346
    Vote Rating
    113
    vietits is a name known to all vietits is a name known to all vietits is a name known to all vietits is a name known to all vietits is a name known to all vietits is a name known to all

      0  

    Default


    Then, try this:
    Code:
    Ext.onReady(function(){
        Ext.create('Ext.form.field.ComboBox', {
            renderTo: Ext.getBody(),
            width: 200,
            queryMode: 'local',
            valueField: 'id',
            displayField: 'name',
            store: {
                fields: ['id', 'name', 'link'],
                data: [
                    { id: 1, name: 'A', link: 'http://www.google.com'},
                    { id: 2, name: 'B', link: 'http://www.yahoo.com'},
                    { id: 3, name: 'C', link: 'http://www.microsoft.com'}
                ]
            },
            listConfig: {
                tpl: [
                    '<table width="100%"><tpl for=".">',
                        '<tr role="option" class="x-boundlist-item">',
                            '<td width="70%">{name}</td>',
                            '<td align="right"><a href="{link}" width="30%" target="_blank">manage</a></td>',
                        '</tr>',
                    '</tpl></table>'
                ],
                listeners: {
                    beforeitemclick: function(view, record, item, index, event){
                        return event.target.nodeName != 'A';
                    }
                }
            }
        });
    });

  11. #10
    Sencha User
    Join Date
    Feb 2012
    Posts
    219
    Answers
    10
    Vote Rating
    5
    webfriend13 is on a distinguished road

      0  

    Default


    Hi Vietits,

    Thank you for the quick reply. The solution you suggested is working fine . Without the listner, system also calls the select event of the combox even when I click on the link. While i understand the use of the listner, I am not sure how it is working.

    Thank you once again for the help . I cannot thank you enough

Thread Participants: 1

Tags for this Thread

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi