Gelmiş geçmiş en büyük porno sitemiz olan 2pe de her zaman en kaliteli pornoları sunmayı hedefledik. Diğer video sitemiz olan vuam da ise hd porno ağırlıklı çalışmalara başladık.

  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