extjs 4.2 grid and combobox

by Tomasz

HTML

<link rel="stylesheet" href="http://docs.sencha.com/ext-js/4-0/extjs-build/resources/css/ext-all.css">

JavaScript

var store = Ext.create('Ext.data.Store', {
    proxy: {
        type: 'memory'
    },
    fields: [{
        name: 'company'
    }, {
        name: 'price',
        type: 'float'
    }]
});

store.add({
    company: 'Sencha',
    price: 1500
}, {
    company: '3m Co',
    price: 71.72
}, {
    company: 'Alcoa Inc',
    price: 29.01
}, {
    company: 'Altria Group Inc',
    price: 83.81
}, {
    company: 'American Express Company',
    price: 52.55
}, {
    company: 'American International Group, Inc.',
    price: 64.13
}, {
    company: 'AT&T Inc.',
    price: 31.61
}, {
    company: 'Boeing Co.',
    price: 75.43
});

var states = Ext.create('Ext.data.Store', {
    fields: ['abbr', 'name'],
    data: [{
        "abbr": "AL",
        "name": "Alabama"
    }, {
        "abbr": "AK",
        "name": "Alaska"
    }, {
        "abbr": "AZ",
        "name": "Arizona"
    }]
});

Ext.define('My.Grid.Combo', {
    extend: 'Ext.form.ComboBox',
    fieldLabel: 'Choose State',
    store: states,
    alias: 'widget.combostates',
    queryMode: 'local',
    displayField: 'name',
    valueField: 'abbr',
    forceSelection: true,
    listeners: {
        change: function (field, newValue, oldValue) {
            console.log(newValue);
        },
        scope: this
    }
});

Ext.create('Ext.grid.Panel', {
    store: store,
    renderTo: Ext.getBody(),
    columns: [{
        text: 'Company',
        flex: 0.5,
        sortable: false,
        dataIndex: 'company'
    }, {
        text: 'Price',
        flex: 0.5,
        sortable: true,
        renderer: 'usMoney',
        dataIndex: 'price'
    }],
    height: 300,
    width: 500,
    title: 'Grid with combobox in TBAR',

    tbar: [{
        xtype: 'combostates'
    }]
});