Ext4.2 Actions in combo

by rixo

HTML

<link rel="stylesheet" href="http://cdn.sencha.io/ext-4.2.0-gpl/resources/css/ext-all-neptune.css">

CSS

.my-boundlist-item-menu {
    padding: 0 6px;
    line-height: 22px;
    cursor: pointer;
    cursor: hand;
    position: relative;
    zoom: 1;
    border-width: 1px;
    border-style: dotted;
    border-color: white;
    font-weight: bold;
}

.my-boundlist-item-menu:hover {
    background: #D6E8F6;
    border-color: #D6E8F6;
}

JavaScript

if (console && console.clear) {
    console.clear();
}

var store = Ext.create('Ext.data.Store', {
        fields: ['Name', 'Street1', 'Street2', 'City', 'StateOrProvince', 'PostalCode']
        ,proxy: {
            type: 'memory'
            ,data: getData()
        }
});

var itemTpl = '<tpl if="Name">{Name}<br /></tpl>'+'<tpl if="Street1">{Street1}<br /></tpl>'+'<tpl if="Street2">{Street2}<br /></tpl>'+'{City}, {StateOrProvince} {PostalCode}';

Ext.widget('combo', {
    renderTo: Ext.getBody()
    ,margin: 10
    ,store: store
    ,listConfig: {
        tpl: '<div class="my-boundlist-item-menu">Add New Address</div>'
            + '<tpl for=".">'
            + '<div class="x-boundlist-item">' + itemTpl + '</div></tpl>'
        ,listeners: {
            el: {
                delegate: '.my-boundlist-item-menu'
                ,click: function() {
                    alert('Go go go!');
                }
            }
        }
    }
});

function getData() {
    return [
        {Name: 'Foo Bar', Street1: '1, Main Street', City: 'New Foo', StateOrProvince: 'Greenland', PostalCode: '12345'}
        ,{Name: 'Bar Baz', Street1: '2, Second Street', City: 'New Bar', StateOrProvince: 'Redland', PostalCode: '54321'}
        ,{Name: 'Baz Bat', Street1: '3, Big Road', City: 'Old Baz', StateOrProvince: 'Yellowsand', PostalCode: '11223'}
    ];
}